這篇文章主要介紹了TypeScript命名空間，TypeScript 是 JavaScript 的一個超集，支持 ECMAScript 6 標準。由微軟開發(fā)的自由和開源的編程語言。設計目標是開發(fā)大型應用，它可以編譯成純 JavaScript,編譯出來的 JavaScript 可以運行在任何瀏覽器上,下面來看詳細內容吧

1.定義和使用

1.1定義

命名空間的定義就相當于定義了一個對象，該對象中可以定義變量、接口、類、方法等等，但是如果不使用export關鍵字指定此內容為外部可見的話，外部是沒有辦法訪問到的。

接下來定義一個正則驗證的一個.ts文件，實現代碼如下：

// validation.ts
// 通過 namespace 創(chuàng)建一個名為 Validation 的命名空間
namespace Validation {
    // 定義一個正則表達式
    const isLetterReg = /^[A-Za-z]+$/
    // 這里在定義一個正則表達式，與上一個的區(qū)別就是這個正則表達式通過export導出了
    export const isNumberReg = /^[0-9]+$/
    // 導出一個方法
    export const checkLetter = (text: any) => {
        return isLetterReg.test(text)
    }
}

在上面的代碼中，我們定義了一個名為Validation的命名空間，并在里面定義了兩個屬性和一個方法，并將一個屬性和一個方法導出(命名空間的中導出使用export關鍵字)。

1.2使用

在某個文件使用命名空間中的內容只需要在使用外部命名空間的地方使用/// <reference path=“namespace.ts”/>來引入，注意三斜線///開頭，然后在 path 屬性指定相對于當前文件，這個命名空間文件的路徑。具體代碼如下：

// index.ts
/// <reference  path='validation.ts' />
let isLetter = Validation.checkLetter('text')
const reg = Validation.isNumberReg
console.log(isLetter)
console.log(reg)

值得注意的是第一行的/// <reference path='validation.ts' /> 。語法結構是不能錯的，否則編譯是不通過的。

編譯命令如下：

tsc --outFile src/index.js index.ts

outFile參數是用于將輸出文件合并為一個文件

編譯后的index.js文件如下：

// 通過 namespace 創(chuàng)建一個名為 Validation 的命名空間
var Validation;
(function (Validation) {
    // 定義一個正則表達式
    var isLetterReg = /^[A-Za-z]+$/;
    // 這里在定義一個正則表達式，與上一個的區(qū)別就是這個正則表達式通過export導出了
    Validation.isNumberReg = /^[0-9]+$/;
    // 導出一個方法
    Validation.checkLetter = function (text) {
        return isLetterReg.test(text);
    };
})(Validation || (Validation = {}));
/// <reference  path='validation.ts' />
var isLetter = Validation.checkLetter('text');
var reg = Validation.isNumberReg;
console.log(isLetter);
console.log(reg);

2.拆分為多個文件

隨著我們的開發(fā)內容的不斷增加，我們可以將同一個命名命名空間拆分為多個文件分開維護，盡管我們將其拆分為為多個文件，但是他們仍然屬于一個命名空間，

示例代碼如下：

LetterValidation.ts

// LetterValidation.ts
namespace Validation {
    export const isLetterReg = /^[A-Za-z]+$/
    export const checkLetter = (text: any) => {
        return isLetterReg.test(text)
    }
}

NumberValidation.ts

// NumberValidation.ts
namespace Validation {
    export const isNumberReg = /^[0-9]+$/
    export const checkNumber = (text: any) => {
        return isNumberReg.test(text)
    }
}

index.ts

// index.ts
/// <reference path="./LetterValidation.ts"/>
/// <reference path="./NumberValidation.ts"/>
let isLetter = Validation.checkLetter('text')
const reg = Validation.isNumberReg
console.log(isLetter)

我們使用命令行來編譯一下：

tsc --outFile src/index.js index.ts

最終編譯后的index.js代碼如下：

// LetterValidation.ts
var Validation;
(function (Validation) {
    Validation.isLetterReg = /^[A-Za-z]+$/;
    Validation.checkLetter = function (text) {
        return Validation.isLetterReg.test(text);
    };
})(Validation || (Validation = {}));
// NumberValidation.ts
var Validation;
(function (Validation) {
    Validation.isNumberReg = /^[0-9]+$/;
    Validation.checkNumber = function (text) {
        return Validation.isNumberReg.test(text);
    };
})(Validation || (Validation = {}));
/// <reference path="./LetterValidation.ts"/>
/// <reference path="./NumberValidation.ts"/>
var isLetter = Validation.checkLetter('text');
var reg = Validation.isNumberReg;
console.log(isLetter);

由編譯結果可以看出，我們先引入了LetterValidation.ts文件，后引入NumberValidation.ts文件，他們最終編譯后的結果也是按照引入順序編譯的。

3.別名

別名是一種簡化命名空間的操作方式，其語法是使用import關鍵字，使用方式如下：

import q = x.y.z

值得注意的是該方式不要與家長模塊的import x = require('name')語法混淆，這里的語法是為指定的符號創(chuàng)建一個別名?？梢允褂迷摲椒槿我鈽俗R符創(chuàng)建別名，也包括引入模塊中的對象。

// 定義一個命名空間
namespace Shapes {
    // 在命名空間中定義一個子命名空間，并將其導出
    export namespace Polygons {
        export class Triangle {}
        export class Square {}
    }
}
// 通過 import 的語法將導出的子命名空間重新命名為 polygons
import polygons = Shapes.Polygons
// 通過導出的命名空間實例化 Square 類
let sq = new polygons.Square()

通過這個例子我們可以看到，使用import關鍵字來定義命名空間中某個輸出元素的別名，可以減少我們深層次獲取屬性的成本。

到此這篇關于TypeScript命名空間講解的文章就介紹到這了,更多相關TypeScript命名空間內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: