跳到主要内容

TypeScript 外部模块

介绍​

在 TypeScript 中，外部模块（External Modules）是一种将代码分割成多个文件的方式，使得代码更易于管理和维护。外部模块允许我们将相关的功能组织在一起，并通过导入（import）和导出（export）机制在文件之间共享代码。

外部模块是 TypeScript 中实现模块化的核心方式，它与 JavaScript 的模块系统（如 CommonJS 或 ES Modules）兼容。通过使用外部模块，我们可以将大型项目分解为更小、更易管理的部分。

外部模块的基本概念​

1. 导出（Export）​

在 TypeScript 中，我们可以使用 export 关键字将变量、函数、类或接口等暴露给其他模块使用。例如：

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

export const PI = 3.14;

在上面的代码中，add 函数和 PI 常量被导出，其他模块可以导入并使用它们。

2. 导入（Import）​

要使用其他模块导出的内容，我们需要使用 import 关键字。例如：

typescript
// main.ts
import { add, PI } from './mathUtils';

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

在上面的代码中，我们从 mathUtils.ts 模块中导入了 add 函数和 PI 常量，并在 main.ts 中使用它们。

默认导出与命名导出​

1. 命名导出（Named Exports）​

命名导出允许我们导出多个值，每个值都有一个名称。例如：

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

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

在导入时，我们需要使用花括号 {} 来指定要导入的内容：

typescript
import { add, subtract } from './mathUtils';

2. 默认导出（Default Export）​

默认导出允许我们导出一个模块的主要功能。每个模块只能有一个默认导出。例如：

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

在导入时，我们可以为默认导出的内容指定任意名称：

typescript
import myLogger from './logger';
myLogger('Hello, TypeScript!');
提示

默认导出通常用于模块的主要功能，而命名导出则用于辅助功能或工具函数。

模块解析与路径​

TypeScript 支持多种模块解析策略，包括相对路径、绝对路径以及 Node.js 的模块解析规则。例如：

  • 相对路径：import { add } from './mathUtils';
  • 绝对路径：import { add } from 'src/utils/mathUtils';
  • Node.js 模块：import fs from 'fs';
警告

确保模块路径正确，否则 TypeScript 会报错。如果使用第三方库，请确保已安装相应的类型定义文件（@types）。

实际应用场景​

场景 1：组织工具函数​

假设我们有一个工具函数库，包含多个与数学相关的函数。我们可以将这些函数放在一个模块中：

typescript
// mathUtils.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;
}

然后在其他模块中使用这些函数：

typescript
// main.ts
import { add, subtract, multiply } from './mathUtils';

console.log(add(2, 3));       // 输出: 5
console.log(subtract(5, 2));  // 输出: 3
console.log(multiply(2, 3));  // 输出: 6

场景 2：使用第三方库​

在 TypeScript 中，我们可以轻松地使用第三方库。例如，使用 lodash 库：

typescript
import _ from 'lodash';

const numbers = [1, 2, 3, 4, 5];
const sum = _.sum(numbers);
console.log(sum); // 输出: 15

总结​

TypeScript 的外部模块是一种强大的工具，可以帮助我们更好地组织和管理代码。通过使用 export 和 import，我们可以将代码分割成多个模块，从而提高代码的可读性、可维护性和可扩展性。

  • 命名导出：用于导出多个值。
  • 默认导出：用于导出模块的主要功能。
  • 模块解析：支持相对路径、绝对路径和 Node.js 模块。

附加资源与练习​

资源​

练习​

  1. 创建一个名为 stringUtils.ts 的模块，导出以下函数：
    • reverseString(str: string): string：返回字符串的反转。
    • capitalize(str: string): string：将字符串的首字母大写。
  2. 在 main.ts 中导入并使用这些函数。