文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

TypeScript命名空间讲解

2024-04-02 19:55

关注

前言:

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

1.定义和使用

1.1定义

命名空间的定义就相当于定义了一个对象,该对象中可以定义变量、接口、类、方法等等,但是如果不使用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关键字)。

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 创建一个名为 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);

2.拆分为多个文件

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

示例代码如下:

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')语法混淆,这里的语法是为指定的符号创建一个别名。可以使用该方法为任意标识符创建别名,也包括引入模块中的对象。


// 定义一个命名空间
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命名空间内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯