跳到主要内容

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 的外部模块是一种强大的工具,可以帮助我们更好地组织和管理代码。通过使用 exportimport,我们可以将代码分割成多个模块,从而提高代码的可读性、可维护性和可扩展性。

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

附加资源与练习

资源

练习

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