TypeScript中命名空间与模块化详情

更新时间：2022年08月15日 14:16:04 作者：别救了这猴子废了

这篇文章主要介绍了TypeScript中命名空间与模块化详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下

一、模块

TypeScript 与ECMAScript 2015 一样，任何包含顶级 import 或者 export 的文件都被当成一个模块

相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的

例如我们在在一个 TypeScript 工程下建立一个文件 1.ts，声明一个变量a，如下：

const a = 1

然后在另一个文件同样声明一个变量a，这时候会出现错误信息

提示重复声明a变量，但是所处的空间是全局的

如果需要解决这个问题，则通过import或者export引入模块系统即可，

如下：

const a = 10;
export default a

在typescript中，export关键字可以导出变量或者类型，用法与es6模块一致，

如下：

export const a = 1
export type Person = {
    name: String
}

通过import 引入模块，如下：

import { a, Person } from './export';

二、命名空间

命名空间一个最明确的目的就是解决重名问题

命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的

这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中

TypeScript 中命名空间使用 namespace 来定义，语法格式如下：

namespace SomeNameSpaceName {
   export interface ISomeInterfaceName {      }
   export class SomeClassName {      }
}

以上定义了一个命名空间 SomeNameSpaceName，如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口，则需要在类和接口添加 export 关键字

使用方式如下：

SomeNameSpaceName.SomeClassName

命名空间本质上是一个对象，作用是将一系列相关的全局变量组织到一个对象的属性，如下：

namespace Letter {
  export let a = 1;
  export let b = 2;
  export let c = 3;
  // ...
  export let z = 26;
}

编译成js如下：

var Letter;
(function (Letter) {
    Letter.a = 1;
    Letter.b = 2;
    Letter.c = 3;
    // ...
    Letter.z = 26;
})(Letter || (Letter = {}));

三、区别

命名空间是位于全局命名空间下的一个普通的带有名字的 JavaScript 对象，使用起来十分容易。但就像其它的全局命名空间污染一样，它很难去识别组件之间的依赖关系，尤其是在大型的应用中
像命名空间一样，模块可以包含代码和声明。不同的是模块可以声明它的依赖
在正常的TS项目开发过程中并不建议用命名空间，但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间，主要作用是给编译器编写代码的时候参考使用

到此这篇关于TypeScript中命名空间与模块化详情的文章就介绍到这了,更多相关TypeScript命名空间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

IE8 内存泄露(内存一直增长 )的原因及解决办法
最近开发的时候对页面使用了定时的局部更新，结果在ie6，7和Firefox下，一切正常，而在ie8下过上几个小时就浏览器就崩溃了，显示是内存溢出，下面由脚本之家小编给大家介绍ie8下内存一直增长内存泄漏的原因及解决办法，需要的朋友一起学习吧
2016-04-04
小程序api实现promise封装过程解析
这篇文章主要介绍了小程序api实现promise封装过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11
详解ES6 Symbol 的用途
Symbol 唯一的用途就是标识对象属性，表明对象支持的功能。这篇文章给大家介绍ES6 Symbol 的用途，感兴趣的朋友跟随小编一起看看吧
2018-10-10
JavaScript实现页面电子时钟
这篇文章主要为大家详细介绍了JavaScript实现页面电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
JS多物体实现缓冲运动效果示例
这篇文章主要介绍了JS多物体实现缓冲运动效果的方法,涉及javascript基于时间函数进行动态运算实现页面元素动态操作的相关技巧,需要的朋友可以参考下
2016-12-12
对采用动态原型方式无法展示继承机制得思考
今天看书，作者讨论到能否采用动态原型方法展示继承机制，给出的答案是：不能。原因是prototype对象的唯一性。看下面代码（这段代码不正确，却值得研究）
2009-12-12
JavaScript实现tab栏切换的几种常用方法
这篇文章主要给大家介绍了关于JavaScript实现tab栏切换的几种常用方法,在Web开发中Tab切换是一个常见的功能,它允许用户在不同的页面部分之间进行切换,需要的朋友可以参考下
2023-12-12
bootstrap weebox 支持ajax的模态弹出框
本篇介绍的bootstrap weebox（支持ajax的模态弹出框），历经多次修改，目前版本已经稳定，整合了bootstrap的响应式，界面简单，功能却无比丰富，支持ajax、图片预览等等
2017-02-02
uniapp开发微信小程序主包太大和vendor.js过大无法打包问题解决
最近工作一直在uniapp开发小程序这一块,相信很多开发者都遇到过代码体积太大无法打包的问题,这篇文章主要给大家介绍了关于uniapp开发微信小程序主包太大和vendor.js过大无法打包问题的解决办法,需要的朋友可以参考下
2023-11-11
基于javascript实现彩票随机数生成（升级版）
这篇文章主要为大家详细介绍了基于javascript实现彩票随机数生成的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-01-01