17 模块与命名空间 📁之模块的定义与使用

在 TypeScript 中，模块是一种用于组织代码的机制。它通过将不同的功能分割到不同的文件或模块中，提升了代码的可维护性和可重用性。本章将深入探讨模块的定义与使用，帮助你理解如何有效地构造 TypeScript 应用。

什么是模块？

模块是一个包含相关功能、变量、函数和类的文件，它可以被其他模块导入。一个具有 export 的文件就是一个模块。通过使用模块，可以避免全局命名冲突，使代码结构更加清晰。

创建模块

要创建一个模块，我们首先定义一些功能并将其导出。以下是一个简单的示例，展示了如何定义和使用模块。

示例：数学模块

创建一个名为 mathUtils.ts 的文件，其中包含一些数学函数。

// mathUtils.ts
export function add(x: number, y: number): number {
    return x + y;
}

export function subtract(x: number, y: number): number {
    return x - y;
}

export const PI = 3.14;

一旦创建了这个模块，我们就可以在其他文件中导入并使用这些导出的功能。

导入模块

在另一个名为 app.ts 的文件中，我们可以如下导入并使用 mathUtils 模块：

// app.ts
import { add, subtract, PI } from './mathUtils';

console.log(`2 + 3 = ${add(2, 3)}`); // 输出: 2 + 3 = 5
console.log(`5 - 2 = ${subtract(5, 2)}`); // 输出: 5 - 2 = 3
console.log(`Value of PI is ${PI}`); // 输出: Value of PI is 3.14

在这个示例中，add、subtract 和 PI 都是通过 export 导出的，它们可以在其他模块中被导入和使用。

模块的作用域

与传统的 JavaScript 全局变量不同，每个模块有自己的作用域。这意味着在一个模块中定义的变量、函数或类不会污染其他模块的命名空间。

例如，在 mathUtils.ts 中定义的函数不能在 app.ts 中直接访问，除非我们显式地导入它们。

默认导出

如果一个模块只有一个主要的功能，可以使用默认导出。你可以在模块中使用 export default 来定义默认导出。以下是一个示例：

// calculator.ts
export default function multiply(x: number, y: number): number {
    return x * y;
}

上述代码中，我们定义了一个默认导出函数 multiply。可以在其他模块中这样导入：

// app.ts
import multiply from './calculator';

console.log(`2 * 3 = ${multiply(2, 3)}`); // 输出: 2 * 3 = 6

模块与命名空间的区别

在 TypeScript 中，模块和命名空间有一些相似之处，但它们在使用和目的上有显著不同。

• 模块：使用文件系统组织代码，避免全局命名冲突。导入和导出是基于文件的。
• 命名空间：是类型系统中的一部分，通常用于将代码逻辑组织在一起，是为了避免全局作用域污染，多用于同一个文件内的结构化代码。

现在我们已经了解了模块的定义和基本用法，接下来将深入探讨命名空间的概念及其用途。不过在继续之前，请确保你已掌握了模块相关的内容，以及它们在 TypeScript 开发中的重要性和应用。

小结

在本章中，我们学习了 TypeScript 中模块的定义、使用以及与命名空间的区别。通过示例，我们可以看到模块如何改善代码的组织结构以及提升可维护性。下章我们将进一步探讨命名空间的概念，以及它在项目中的应用。