【稳妥的TypeScript】命名空间

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

写在前面

命名空间namespace在TypeScript1.5版本之前是叫做内部模块 ，那是因为ES6中的模块还没有称为正式标准，在ES6提出该规范时，TypeScript1.5 正事更名为命名空间 ，用namespace来定义。

定义和使用

定义

命名空间的定义就相当于定义了一个对象，该对象中可以定义变量、接口、类、方法等等，但是如果不使用export关键字指定此内容为外部可见的话，外部是没有办法访问到的。

接下来定义一个正则验证的一个.ts文件，实现代码如下：

// validation.ts
// 通过 namespace 创建一个名为 Validation 的命名空间
namespace Validation {
    // 定义一个正则表达式
    const isLetterReg = /^[A-Za-z]+$/
    // 这里在定义一个正则表达式，与上一个的区别就是这个正则表达式通过export导出了
    export const isNumberReg = /^[0-9]+$/
    // 导出一个方法
    export const checkLetter = (text: any) => {
        return isLetterReg.test(text)
    }
}

在上面的代码中，我们定义了一个名为Validation的命名空间，并在里面定义了两个属性和一个方法，并将一个属性和一个方法导出(命名空间的中导出使用export关键字)。

使用

在某个文件使用命名空间中的内容只需要在使用外部命名空间的地方使用/// <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 创建一个名为 Validation 的命名空间
var Validation;
(function (Validation) {
    // 定义一个正则表达式
    var isLetterReg = /^[A-Za-z]+$/;
    // 这里在定义一个正则表达式，与上一个的区别就是这个正则表达式通过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);

拆分为多个文件

随着我们的开发内容的不断增加，我们可以将同一个命名命名空间拆分为多个文件分开维护，尽管我们将其拆分为为多个文件，但是他们仍然属于一个命名空间，示例代码如下：

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文件，他们最终编译后的结果也是按照引入顺序编译的。

别名

别名是一种简化命名空间的操作方式，其语法是使用import关键字，使用方式如下：

import q = x.y.z

值得注意的是该方式不要与家长模块的import x = require('name')语法混淆，这里的语法是为指定的符号创建一个别名。可以使用该方法为任意标识符创建别名，也包括引入模块中的对象。

// 定义一个命名空间
namespace Shapes {
    // 在命名空间中定义一个子命名空间，并将其导出
    export namespace Polygons {
        export class Triangle {}
        export class Square {}
    }
}
// 通过 import 的语法将导出的子命名空间重新命名为 polygons
import polygons = Shapes.Polygons
// 通过导出的命名空间实例化 Square 类
let sq = new polygons.Square()

通过这个例子我们可以看到，使用import关键字来定义命名空间中某个输出元素的别名，可以减少我们深层次获取属性的成本。

往期推荐

• 【建议收藏】总结了42种前端常用布局方案
• JS高级之必会的5个高阶函数
• JS高级之图解ES6之前的6种继承方式
• 关于v-model语法糖的知识点，这次应该说全了