模块和命名空间简介

TypeScript 中的模块和命名空间有助于组织和构建代码，尤其适用于大型项目。

虽然二者可以实现相似的目标，但使用方式不同。本课程将引导您了解它们之间的区别及其用法。

什么是模块？

模块是文件或代码片段，可以导出变量、函数或类等功能，以便在应用程序的其他部分中重复使用。

TypeScript 使用 ES 模块实现导入和导出功能，而 ES 模块现在已成为 JavaScript 的标准。

在模块中导出和导入

您可以使用 export 从模块中导出代码，并使用 import 导入代码：

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

在另一个文件中导入它：

// app.ts
import { add } from './math';
console.log(add(2, 3));

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

// app.ts
import { add } from './math';
console.log(add(2, 3));

默认导出

TypeScript 还支持默认导出，这样您就可以从模块中导出单个值：

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

导入时无需使用花括号：

// app.ts
import add from './math';
console.log(add(2, 3));

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

// app.ts
import add from './math';
console.log(add(2, 3));

什么是命名空间？

命名空间是 TypeScript 中将相关代码归到同一名称下的一种方式，有助于组织代码并避免命名冲突。

命名空间使用 namespace 关键字定义。

创建和使用命名空间

下面是一个命名空间示例：

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

您可以这样使用它：

console.log(MathUtils.add(2, 3));

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

console.log(MathUtils.add(2, 3));

模块与命名空间的比较

模块和命名空间之间的主要区别如下：

• 模块以文件为基础，并支持 ES 模块语法。
• 命名空间非常适合在单个文件中组织代码，但对于现代应用程序而言已被视为过时方案。

最佳实践

使用 TypeScript 时：

• 对于新项目，请使用模块，因为它们符合现代 JavaScript 标准。
• 仅在旧项目或小型项目中考虑使用命名空间。
• 始终保持代码的组织性和一致性。

恭喜您！

您已经学会了如何使用模块和命名空间来构建和组织 TypeScript 项目。请继续练习，掌握这些重要概念！