TypeScript 模块导入导出
在现代JavaScript和TypeScript开发中,模块化编程是一个非常重要的概念。模块化允许我们将代码分割成多个文件,每个文件负责特定的功能,从而提高代码的可维护性和可重用性。TypeScript提供了强大的模块系统,支持导入和导出功能,使得开发者可以轻松地组织和管理代码。
什么是模块?
在TypeScript中,模块是一个独立的文件,包含一组相关的函数、类、接口或变量。通过模块化,我们可以将代码分割成多个文件,每个文件都可以独立开发和测试。模块之间可以通过导入和导出来共享代码。
导出模块
在TypeScript中,我们可以使用 export
关键字来导出模块中的内容。导出的内容可以是变量、函数、类、接口等。
导出变量
// math.ts
export const PI = 3.14;
export const E = 2.71;
在上面的例子中,我们导出了两个常量 PI
和 E
。
导出函数
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
这里我们导出了两个函数 add
和 subtract
。
导出类
// shapes.ts
export class Circle {
constructor(public radius: number) {}
area(): number {
return Math.PI * this.radius ** 2;
}
}
在这个例子中,我们导出了一个 Circle
类。
导入模块
要使用其他模块中导出的内容,我们需要使用 import
关键字来导入。
导入变量和函数
// app.ts
import { PI, E, add, subtract } from './math';
console.log(PI); // 输出: 3.14
console.log(add(2, 3)); // 输出: 5
在这个例子中,我们从 math.ts
模块中导入了 PI
、E
、add
和 subtract
。
导入类
// app.ts
import { Circle } from './shapes';
const circle = new Circle(5);
console.log(circle.area()); // 输出: 78.53981633974483
这里我们从 shapes.ts
模块中导入了 Circle
类,并创建了一个 Circle
实例。
导入所有内容
如果你需要导入一个模块中的所有内容,可以使用 * as
语法。
// app.ts
import * as math from './math';
console.log(math.PI); // 输出: 3.14
console.log(math.add(2, 3)); // 输出: 5
在这个例子中,我们将 math.ts
模块中的所有导出内容都导入到一个名为 math
的对象中。
默认导出
除了命名导出,TypeScript还支持默认导出。一个模块只能有一个默认导出。
默认导出函数
// logger.ts
export default function log(message: string): void {
console.log(message);
}
导入默认导出
// app.ts
import log from './logger';
log('Hello, TypeScript!'); // 输出: Hello, TypeScript!
在这个例子中,我们导入了 logger.ts
模块中的默认导出函数 log
。
实际应用场景
假设我们正在开发一个简单的计算器应用,我们可以将不同的功能模块化:
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
export function multiply(a: number, b: number): number {
return a * b;
}
export function divide(a: number, b: number): number {
return a / b;
}
// calculator.ts
import { add, subtract, multiply, divide } from './math';
export class Calculator {
static add(a: number, b: number): number {
return add(a, b);
}
static subtract(a: number, b: number): number {
return subtract(a, b);
}
static multiply(a: number, b: number): number {
return multiply(a, b);
}
static divide(a: number, b: number): number {
return divide(a, b);
}
}
// app.ts
import { Calculator } from './calculator';
console.log(Calculator.add(2, 3)); // 输出: 5
console.log(Calculator.multiply(4, 5)); // 输出: 20
在这个例子中,我们将数学运算函数放在 math.ts
模块中,然后在 calculator.ts
模块中使用这些函数来实现一个计算器类。最后在 app.ts
中使用计算器类来执行运算。
总结
TypeScript的模块系统使得代码的组织和管理变得更加简单和高效。通过使用 export
和 import
,我们可以轻松地在不同的模块之间共享代码。模块化编程不仅提高了代码的可维护性,还使得代码更易于测试和重用。
在实际开发中,建议将相关的功能放在同一个模块中,并尽量保持模块的单一职责。这样可以提高代码的可读性和可维护性。
附加资源
练习
- 创建一个名为
utils.ts
的模块,导出一些常用的工具函数,如isEven
、isOdd
等。 - 在另一个模块中导入并使用这些工具函数。
- 尝试使用默认导出来导出一个工具类,并在另一个模块中导入并使用它。