跳到主要内容

TypeScript 命名导出

介绍​

在 TypeScript 中，模块是组织代码的基本单位。通过模块，我们可以将代码分割成多个文件，每个文件都可以导出（export）特定的功能，供其他模块使用。命名导出（Named Exports）是 TypeScript 中一种常见的导出方式，它允许我们从模块中导出多个变量、函数、类等，并在其他模块中按需导入。

与默认导出（Default Export）不同，命名导出可以导出多个值，并且导入时需要明确指定导入的名称。这使得代码更加清晰和可维护。

基本语法​

命名导出的语法非常简单。我们可以使用 export 关键字来导出模块中的变量、函数、类等。以下是一个简单的示例：

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;
}

在这个示例中，我们导出了两个函数 add 和 subtract。其他模块可以通过 import 关键字来导入这些函数。

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

console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2
备注

注意：在导入命名导出时，必须使用花括号 {} 来包裹导入的名称，并且名称必须与导出的名称一致。

重命名导出​

有时，我们可能希望导出的名称与模块中的名称不同。这时，我们可以使用 as 关键字来重命名导出。

typescript
// mathUtils.ts
function multiply(a: number, b: number): number {
    return a * b;
}

export { multiply as product };

在导入时，我们需要使用重命名后的名称：

typescript
// main.ts
import { product } from './mathUtils';

console.log(product(5, 3)); // 输出: 15

导出多个值​

命名导出允许我们一次性导出多个值。我们可以将所有需要导出的值放在一个 export 语句中：

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

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

function multiply(a: number, b: number): number {
    return a * b;
}

export { add, subtract, multiply };

在导入时，我们可以选择性地导入需要的值：

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

console.log(add(5, 3)); // 输出: 8
console.log(multiply(5, 3)); // 输出: 15

实际应用场景​

命名导出在实际开发中非常常见，尤其是在需要导出多个功能时。例如，在一个工具库中，我们可能会导出多个工具函数：

typescript
// utils.ts
export function formatDate(date: Date): string {
    return date.toISOString();
}

export function capitalize(str: string): string {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

在另一个模块中，我们可以按需导入这些工具函数：

typescript
// app.ts
import { formatDate, capitalize } from './utils';

const today = new Date();
console.log(formatDate(today)); // 输出: 2023-10-05T12:34:56.789Z

const name = 'typescript';
console.log(capitalize(name)); // 输出: Typescript

总结​

命名导出是 TypeScript 中一种强大的模块导出方式，它允许我们从模块中导出多个值，并在其他模块中按需导入。通过命名导出，我们可以更好地组织代码，使其更加模块化和可维护。

提示

提示：在实际开发中，建议将相关的功能放在同一个模块中，并通过命名导出来提供清晰的接口。

附加资源与练习​

  • 练习 1：创建一个模块 stringUtils.ts，导出多个字符串处理函数（如 reverse、toUpperCase 等），并在另一个模块中使用这些函数。
  • 练习 2：尝试在一个模块中导出多个类，并在另一个模块中导入并使用这些类。

通过练习，你将更好地掌握 TypeScript 中的命名导出，并能够在实际项目中灵活运用。