TypeScript-命名空间

简介: TypeScript-命名空间

命名空间概述


命名空间可以看做是一个微型模块 当我们想把相关的业务代码写在一起, 又不想污染全局空间的时候, 我们就可以使用 命名空间本质就是定义一个大对象, 把变量/方法/类/接口 ... 等,都放里面




命名空间和模块区别


在程序内部使用的代码, 可以使用命名空间封装和防止全局污染 在程序内部外部使用的代码, 可以使用模块封装防止全局污染 总结: 由于模块也能实现相同的功能, 所以大部分情况下用模块即可



博主假设有这么一个需求: 定义一个检验传入的参数是否为 a-z 的功能。首先来分析一下该功能如果定义在当前 ts 文件当中会造成污染全局的问题,其实可以利用命名空间来解决该污染问题如下:

namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export const LettersValidator = (value) => {
        return lettersRegexp.test(value);
    }
}
console.log(Validation.LettersValidator('abc'));
console.log(Validation.LettersValidator(123));

如上代码需要注意的就是需要将外界需要使用的函数或者属性都需要通过 export 进行导出外界才可以进行调用,如上的命名空间我是定义在同一个 ts 文件当中的,那么没有定义在同一个文件当中该如何编写呢?首先需要创建一个 ts 文件来进行存储命名空间编写的功能性代码如下:

namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export const LettersValidator = (value) => {
        return lettersRegexp.test(value);
    }
}


然后在需要使用该命名空间的地方通过 /// <reference path="xxx"/> 的方式进行使用:

/// <reference path="./test.ts"/>
console.log(Validation.LettersValidator('abc'));
console.log(Validation.LettersValidator(123));


然后在通过 tsc --outFile index.js index.ts 来进行打包,打包之后的结果如下:

  • tsc --outFile:第一个参数为:打包之后的文件存储的位置
  • tsc --outFile:第二个参数为:需要打包哪个文件

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
8月前
|
JavaScript 前端开发
带你读《现代TypeScript高级教程》六、命名空间和模块(1)
带你读《现代TypeScript高级教程》六、命名空间和模块(1)
|
8月前
|
JavaScript
TypeScript-声明安装和TypeScript-命名空间补充
TypeScript-声明安装和TypeScript-命名空间补充
26 0
|
20天前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
79 0
|
8月前
|
JavaScript 前端开发
开心档之TypeScript 命名空间
开心档之TypeScript 命名空间
34 0
|
1天前
|
JavaScript 编译器
33.【TypeScript 教程】命名空间
33.【TypeScript 教程】命名空间
9 2
|
20天前
|
JavaScript 前端开发
TypeScript中使用命名空间组织代码:原理与实践
【4月更文挑战第23天】了解TypeScript的命名空间用于组织代码,防止命名冲突,提升可读性。通过`namespace`关键字定义,如`namespace MyNamespace {...}`。访问元素时需指明命名空间,如`MyNamespace.myFunction()`。可嵌套命名空间,但应避免过度使用导致复杂。考虑使用模块代替,保持命名空间简洁。命名空间是代码组织的有效工具,但需结合实际情况灵活选择。
|
20天前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
34 0
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
|
20天前
|
JavaScript
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(上)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
43 0
|
11月前
|
JavaScript 前端开发
《现代Typescript高级教程》命名空间和模块
命名空间和模块 命名空间(Namespace) 在 TypeScript 中,命名空间是一种将代码封装在一个特定名称下的方式,以防止全局作用域污染并避免命名冲突。命名空间在 TypeScript 中非常重要,因为它们为模块化和封装提供了灵活的选项。 创建命名空间的语法如下:
71 0
|
20天前
|
JavaScript
TypeScript 命名空间是怎样的?
TypeScript 命名空间是怎样的?
91 1