快捷導(dǎo)航

TypeScript命名空間講解

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

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

1.定義和使用

1.1定義

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

接下來(lái)定義一個(gè)正則驗(yàn)證的一個(gè).ts文件，實(shí)現(xiàn)代碼如下：

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

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

1.2使用

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

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

編譯命令如下：

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

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

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

// 通過(guò) namespace 創(chuàng)建一個(gè)名為 Validation 的命名空間
var Validation;
(function (Validation) {
    // 定義一個(gè)正則表達(dá)式
    var isLetterReg = /^[A-Za-z]+$/;
    // 這里在定義一個(gè)正則表達(dá)式，與上一個(gè)的區(qū)別就是這個(gè)正則表達(dá)式通過(guò)export導(dǎo)出了
    Validation.isNumberReg = /^[0-9]+$/;
    // 導(dǎo)出一個(gè)方法
    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.拆分為多個(gè)文件

隨著我們的開發(fā)內(nèi)容的不斷增加，我們可以將同一個(gè)命名命名空間拆分為多個(gè)文件分開維護(hù)，盡管我們將其拆分為為多個(gè)文件，但是他們?nèi)匀粚儆谝粋€(gè)命名空間，

示例代碼如下：

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)

我們使用命令行來(lái)編譯一下：

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.別名

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

import q = x.y.z

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

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

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

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

您可能感興趣的文章: