带你读《现代TypeScript高级教程》六、命名空间和模块(2)

简介: 带你读《现代TypeScript高级教程》六、命名空间和模块(2)

带你读《现代TypeScript高级教程》六、命名空间和模块(1)https://developer.aliyun.com/article/1348551?groupCode=tech_library


  1. 模块

在 TypeScript 中,模块是另一种组织代码的方式,但它们更关注的是依赖管理。每个模块都有其自己的作用域,并且只有明确地导出的部分才能在其他模块中访问。

创建和使用模块的方式如下:

myModule.ts文件中:

export const myVar: number = 10;export function myFunction(): void {
  console.log("Hello from myModule");}

 

在另一个文件中导入和使用模块:

 

import { myVar, myFunction } from './myModule';
console.log(myVar); // 输出:10myFunction(); // 输出:Hello from myModule

 

在 TypeScript 中,我们可以使用模块解析策略(如 Node 或 Classic),以确定如何查找模块。这些策略在 tsconfig.json 文件的 compilerOptions 选项下的 moduleResolution 选项中定义。

命名空间与模块的对比

虽然命名空间和模块在某种程度上有所相似,但它们有以下几个关键区别:

 

  • 作用域:命名空间是在全局作用域中定义的,而模块则在自己的作用域中定义。这意味着,在模块内部定义的所有内容默认情况下在模块外部是不可见的,除非显式地导出它们。
  • 文件组织:命名空间通常用于组织在同一文件中的代码,而模块则是跨文件进行组织。
  • 依赖管理:模块关注的是如何导入和导出功能,以便管理代码之间的依赖关系。相比之下,命名空间并未对依赖管理提供明确的支持。

使用场景:随着 ES6 模块语法的普及,现代 JavaScript 项目通常更倾向于使用模块来组织代码。然而,对于一些遗留项目或那些需要将多个文件合并为一个全局可用的库的场景,命名空间可能更为合适。

相关文章
|
25天前
|
JavaScript Java API
30.【TypeScript 教程】Reflect Metadata
30.【TypeScript 教程】Reflect Metadata
15 4
|
25天前
|
JavaScript 编译器
31.【TypeScript 教程】混入(Mixins)
31.【TypeScript 教程】混入(Mixins)
17 3
|
24天前
|
JavaScript 编译器
35.【TypeScript 教程】编译选项
35.【TypeScript 教程】编译选项
16 2
|
25天前
|
JavaScript 编译器
33.【TypeScript 教程】命名空间
33.【TypeScript 教程】命名空间
18 2
|
25天前
|
JavaScript 前端开发
37.【TypeScript 教程】TSLint 与 ESLint
37.【TypeScript 教程】TSLint 与 ESLint
17 0
|
24天前
|
JavaScript 编译器 IDE
36.【TypeScript 教程】tsconfig.json 配置
36.【TypeScript 教程】tsconfig.json 配置
13 0
|
25天前
|
JavaScript 前端开发 编译器
34.【TypeScript 教程】声明合并
34.【TypeScript 教程】声明合并
18 0
|
25天前
|
JavaScript 编译器 开发者
32.【TypeScript 教程】模块
32.【TypeScript 教程】模块
12 0
|
25天前
|
JavaScript 监控 编译器
29.【TypeScript 教程】装饰器(Decorator)
29.【TypeScript 教程】装饰器(Decorator)
13 0
|
23天前
|
JavaScript 前端开发 Java
TypeScript 类型兼容性
TypeScript 类型兼容性