跳到主要内容

TypeScript 模块导入导出

在现代JavaScript和TypeScript开发中,模块化编程是一个非常重要的概念。模块化允许我们将代码分割成多个文件,每个文件负责特定的功能,从而提高代码的可维护性和可重用性。TypeScript提供了强大的模块系统,支持导入和导出功能,使得开发者可以轻松地组织和管理代码。

什么是模块?

在TypeScript中,模块是一个独立的文件,包含一组相关的函数、类、接口或变量。通过模块化,我们可以将代码分割成多个文件,每个文件都可以独立开发和测试。模块之间可以通过导入和导出来共享代码。

导出模块

在TypeScript中,我们可以使用 export 关键字来导出模块中的内容。导出的内容可以是变量、函数、类、接口等。

导出变量

typescript
// math.ts
export const PI = 3.14;
export const E = 2.71;

在上面的例子中,我们导出了两个常量 PIE

导出函数

typescript
// math.ts
export function add(a: number, b: number): number {
return a + b;
}

export function subtract(a: number, b: number): number {
return a - b;
}

这里我们导出了两个函数 addsubtract

导出类

typescript
// shapes.ts
export class Circle {
constructor(public radius: number) {}

area(): number {
return Math.PI * this.radius ** 2;
}
}

在这个例子中,我们导出了一个 Circle 类。

导入模块

要使用其他模块中导出的内容,我们需要使用 import 关键字来导入。

导入变量和函数

typescript
// app.ts
import { PI, E, add, subtract } from './math';

console.log(PI); // 输出: 3.14
console.log(add(2, 3)); // 输出: 5

在这个例子中,我们从 math.ts 模块中导入了 PIEaddsubtract

导入类

typescript
// app.ts
import { Circle } from './shapes';

const circle = new Circle(5);
console.log(circle.area()); // 输出: 78.53981633974483

这里我们从 shapes.ts 模块中导入了 Circle 类,并创建了一个 Circle 实例。

导入所有内容

如果你需要导入一个模块中的所有内容,可以使用 * as 语法。

typescript
// app.ts
import * as math from './math';

console.log(math.PI); // 输出: 3.14
console.log(math.add(2, 3)); // 输出: 5

在这个例子中,我们将 math.ts 模块中的所有导出内容都导入到一个名为 math 的对象中。

默认导出

除了命名导出,TypeScript还支持默认导出。一个模块只能有一个默认导出。

默认导出函数

typescript
// logger.ts
export default function log(message: string): void {
console.log(message);
}

导入默认导出

typescript
// app.ts
import log from './logger';

log('Hello, TypeScript!'); // 输出: Hello, TypeScript!

在这个例子中,我们导入了 logger.ts 模块中的默认导出函数 log

实际应用场景

假设我们正在开发一个简单的计算器应用,我们可以将不同的功能模块化:

typescript
// 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;
}
typescript
// 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);
}
}
typescript
// 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的模块系统使得代码的组织和管理变得更加简单和高效。通过使用 exportimport,我们可以轻松地在不同的模块之间共享代码。模块化编程不仅提高了代码的可维护性,还使得代码更易于测试和重用。

提示

在实际开发中,建议将相关的功能放在同一个模块中,并尽量保持模块的单一职责。这样可以提高代码的可读性和可维护性。

附加资源

练习

  1. 创建一个名为 utils.ts 的模块,导出一些常用的工具函数,如 isEvenisOdd 等。
  2. 在另一个模块中导入并使用这些工具函数。
  3. 尝试使用默认导出来导出一个工具类,并在另一个模块中导入并使用它。