TypeScript中的模块
本文解释了TypeScript中的模块。
YouTube Video
TypeScript中的模块
TypeScript中的模块是增强代码重用性和可维护性的重要特性。与JavaScript类似，TypeScript也是基于ECMAScript 2015（ES6）模块系统，但一个关键特性是可以利用TypeScript的类型系统。
什么是模块？
模块是一种将相关代码分组到单一单元中的系统，可以在其他文件中导入和重用。在TypeScript中，每个文件都会创建一个作用域来封装代码，从而防止它影响其他文件。这有助于避免代码冲突并使维护更容易。
内部模块和外部模块
- 内部模块（命名空间）：TypeScript 1.5及更早版本中使用的一种模块定义方法，现在已不推荐使用。它现在被视为“命名空间”。
- 外部模块：目前的标准，基于ES6模块系统。本节主要解释外部模块。
如何导出模块
创建模块时，需要导出才能从外部访问。在TypeScript中，可以使用export关键字导出值、函数、类等。主要有两种导出方式。
命名导出
用于进行多个导出，允许导入方选择并使用特定的导出项。
1// mathUtils.ts
2export const pi: number = 3.14159;
3
4export function add(x: number, y: number): number {
5 return x + y;
6}
7
8export function subtract(x: number, y: number): number {
9 return x - y;
10}默认导出
用于模块只有一个默认导出的场景。默认导出是没有名称的，导入方可以使用任意名称接收。
1// calculator.ts
2export default class Calculator {
3 add(x: number, y: number): number {
4 return x + y;
5 }
6
7 subtract(x: number, y: number): number {
8 return x - y;
9 }
10}如何导入模块
要使用模块，可以使用 import 关键字从模块中导入值、函数、类等。
命名导入
从命名导出中导入特定元素时，使用大括号 {}。
1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);默认导入
导入默认导出时，可以用任何名称接收它。
1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);导入别名
为了避免名称冲突或简化过长的名称，可以使用别名导入。
1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);模块与命名空间之间的差异
命名空间（namespace）是早期 TypeScript 中用于组织代码的内部模块结构。然而，现在推荐使用 ES6 模块，命名空间几乎不再必要。
命名空间可以在同一个文件或多个文件中定义，由于它们可以被全局扩展，因此依赖管理可能变得困难。相比之下，模块拥有每个文件独立的作用域，并且依赖关系明确，成为一种更现代且更安全的方法。
1// Example of a namespace
2namespace Geometry {
3 export function calculateArea(radius: number): number {
4 return Math.PI * radius * radius;
5 }
6}
7
8// Can be used directly without importing the module (not recommended)
9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);TypeScript 模块解析
在 TypeScript 中，模块解析有两种策略。
- Node 模块解析：在 Node.js 环境中使用的标准解析方法，通过在
node_modules文件夹中搜索模块来解析。 - 经典模块解析：TypeScript 特有的解析方法，执行更灵活的搜索，但目前并不常用。
通常使用 Node 模块解析，并且默认启用，除非在配置文件中另有指定。
实际示例
最后，展示了一个使用模块实现和重用计算函数的示例。
mathUtils.ts
1export const pi: number = 3.14159;
2
3export function multiply(x: number, y: number): number {
4 return x * y;
5}
6
7export function divide(x: number, y: number): number {
8 if (y === 0) {
9 throw new Error("Cannot divide by zero");
10 }
11 return x / y;
12}- 该文件定义了数学实用函数，并提供可重用的基本算术运算。
calculator.ts
1import { multiply, divide } from './mathUtils';
2
3export default class Calculator {
4 multiplyNumbers(x: number, y: number): number {
5 return multiply(x, y);
6 }
7
8 divideNumbers(x: number, y: number): number {
9 return divide(x, y);
10 }
11}- 该文件定义并导出了
Calculator类。它通过引用自mathUtils的函数在内部封装了计算器功能。
main.ts
1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);- 该文件是应用程序的入口点。它创建了一个
Calculator类的实例，执行乘法和除法运算，并将结果输出到控制台。
总结
TypeScript 模块系统是组织代码、增强复用性和提高可维护性的强大工具。推荐使用基于 ES6 模块的外部模块，并使用 export 和 import 关键字轻松实现模块的导出和导入。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。