面试官：说说对 TypeScript 中命名空间与模块的理解？区别？

古城微笑少年丶 2022-09-11 06:28 193阅读 0赞

![41b7ffb5961a74b6a1b35a5e9d1bb703.png][]

## 一、模块 ##

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

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

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

const a = 1

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

![c20b6376b4afa7d02c1c5a24ae206fda.png][]

提示重复声明`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 库类型的时候使用命名空间，主要作用是给编译器编写代码的时候参考使用

## 参考文献 ##

*  https://www.tslang.cn/docs/handbook/modules.html
 *  https://www.tslang.cn/docs/handbook/namespaces.html
 *  https://www.tslang.cn/docs/handbook/namespaces-and-modules.html

\--The End--

系列正在更新：10/12

点击下方卡片解锁更多

![9830edf21d136502fd4bbaf69be27723.png][]

创作不易，星标、点赞、在看 三连支持

[41b7ffb5961a74b6a1b35a5e9d1bb703.png]: /images/20220828/b9f2726124944d8f8417b84d9849c868.png
[c20b6376b4afa7d02c1c5a24ae206fda.png]: /images/20220828/f4d214d90ddc4aa3aa5b657e037d7cf4.png
[9830edf21d136502fd4bbaf69be27723.png]: /images/20220828/14a223d0d801449e8fe75741d56675e1.png