跳到主要内容

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，我们可以轻松地在不同的模块之间共享代码。模块化编程不仅提高了代码的可维护性，还使得代码更易于测试和重用。

提示

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

附加资源​

练习​

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