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

开发 后端
TypeScript 与ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块。

[[423398]]

一、模块

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

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

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

  1. const a = 1 

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

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

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

  1. const a = 10; 
  2.  
  3. export default a 

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

  1. export const a = 1 
  2. export type Person = { 
  3.     name: String 

通过import 引入模块,如下:

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

二、命名空间

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

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

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

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

  1. namespace SomeNameSpaceName { 
  2.    export interface ISomeInterfaceName {      }   
  3.    export class SomeClassName {      }   

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

使用方式如下:

  1. SomeNameSpaceName.SomeClassName 

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

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

编译成js如下:

  1. var Letter; 
  2. (function (Letter) { 
  3.     Letter.a = 1; 
  4.     Letter.b = 2; 
  5.     Letter.c = 3; 
  6.     // ... 
  7.     Letter.z = 26; 
  8. })(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

 

责任编辑:武晓燕 来源: JS每日一题
相关推荐

2021-06-30 07:19:36

React事件机制

2021-06-04 07:55:30

Node Fs 操作

2021-05-31 10:35:34

TCPWebSocket协议

2021-09-07 08:33:27

JavaScript TypeScript 函数

2021-06-08 08:33:23

NodeStream数据

2021-06-07 09:41:48

NodeBuffer 网络协议

2021-07-12 08:35:24

组件应用场景

2021-07-07 08:36:45

React应用场景

2021-06-10 07:51:07

Node.js循环机制

2021-06-03 08:14:01

NodeProcessJavaScript

2021-07-08 06:51:29

React函数组件

2021-07-13 07:52:03

ReactHooks组件

2021-10-29 09:40:21

设计模式软件

2021-09-06 10:51:27

TypeScriptJavaScript

2021-07-29 07:55:20

React Fiber架构引擎

2021-09-08 07:49:34

TypeScript 泛型场景

2021-10-15 09:53:12

工具

2021-08-09 07:47:40

Git面试版本

2020-08-03 07:38:12

单例模式

2021-11-25 10:18:42

RESTfulJava互联网
点赞
收藏

51CTO技术栈公众号