快捷導(dǎo)航

TypeScript命名空間講解

更新時間：2021年12月10日 09:49:40 作者：一碗周

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

1.定義和使用

1.1定義

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

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

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

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

1.2使用

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

// 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' /> 。語法結(jié)構(gòu)是不能錯的，否則編譯是不通過的。

編譯命令如下：

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

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

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

// 通過 namespace 創(chuàng)建一個名為 Validation 的命名空間
var Validation;
(function (Validation) {
    // 定義一個正則表達式
    var isLetterReg = /^[A-Za-z]+$/;
    // 這里在定義一個正則表達式，與上一個的區(qū)別就是這個正則表達式通過export導(dǎo)出了
    Validation.isNumberReg = /^[0-9]+$/;
    // 導(dǎo)出一個方法
    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ā)內(nèi)容的不斷增加，我們可以將同一個命名命名空間拆分為多個文件分開維護，盡管我們將其拆分為為多個文件，但是他們?nèi)匀粚儆谝粋€命名空間，

示例代碼如下：

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);

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

3.別名

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

import q = x.y.z

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

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

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

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

您可能感興趣的文章: