极客笔记TypeScript 内部模块与外部模块有何区别
TypeScript是JavaScript的扩展，引入模块作为一种有效结构和组织代码的方式。模块通过实现代码封装和可重用性，在开发可伸缩和可维护的应用程序方面起着关键作用。TypeScript支持两种类型的模块：内部模块（命名空间）和外部模块（ES模块）。
在本文中，我们将深入探讨TypeScript中内部模块和外部模块之间的区别，探索它们的特性以及对代码组织和在项目中的共享的影响。
内部模块
内部模块，也被称为命名空间，是在单个文件内作为逻辑容器来组合相关代码元素的。它们提供诸如避免命名冲突、提供更好的组织和封装等好处。在TypeScript中，可以使用 namespace 关键字来定义内部模块。
在TypeScript中，内部模块的一个例子可以是一个名为 math.ts 的文件，其中包含数学运算 –
namespace Math {
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
}
通过在Math命名空间内组织相关功能，我们可以防止命名冲突并提高代码可维护性。内部模块也可以使用/// <reference path="…" />语法拆分到多个文件中，允许开发人员基于功能组织代码。
然而，内部模块有一些限制。由于它们的作用域仅限于封闭的文件或模块，它们缺少与外部模块相同级别的模块化。随着项目的发展，管理内部模块可能变得具有挑战性，可能导致代码重复或紧密耦合。
外部模块
外部模块，也称为ES模块，可以在单个文件中封装代码，并促进不同文件和项目之间的代码共享。它们遵循被广泛采用的模块语法，如CommonJS或ES6，允许与各种模块系统和打包工具之间的互操作性。
TypeScript中外部模块的一个示例可能是一个名为calculator.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 被导出，使它们可以被其他文件或模块访问。外部模块促进了一种模块化和解耦的架构，组件可以独立开发，根据需要进行组合。这有助于代码的重用，并支持创建可以轻松共享和使用的库和可重用模块。
外部模块在现代JavaScript和工具支持方面取得了显著的流行。TypeScript本身鼓励使用外部模块作为构建可扩展和可维护应用程序的推荐方法。
示例1：内部模块
使用以下步骤设置TypeScript项目──
$ npm i -g typescript
$ tsc --init
在这个例子中，我们有一个叫做 MathUtils 的内部模块。它包含两个函数： add 和 subtract ，用于对数字进行加法和减法运算。
MathUtils.ts
export namespace MathUtils {
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
}
在 main.ts 文件中，我们使用 import 语句从 mathUtils.ts 文件中导入 MathUtils 命名空间。
import { MathUtils } from './mathUtils';
const result1 = MathUtils.add(5, 3);
console.log(`Result of addition: {result1}`);
const result2 = MathUtils.subtract(10, 4);
console.log(`Result of subtraction:{result2}`);
我们使用以下函数进行加法和减法运算，在MathUtils命名空间中分别使用add和subtract。结果分别存储在result1和result2变量中，并使用console.log()显示它们的值。
编译时，我们运行以下命令−
$ tsc main.ts
$ node main.js
输出
将会产生以下输出-
Result of addition: 8
Result of subtraction: 6
通过使用内部模块，我们可以将这些相关功能封装在 Catalog 命名空间中，防止与代码库的其他部分产生命名冲突。
示例2：外部模块
我们将使用与示例1相同的过程再次设置一个新的TypeScript项目。
现在，让我们考虑一个外部模块的示例，其中我们有两个独立的文件：calculator.ts和app.ts。calculator.ts文件导出数学运算，app.ts文件导入并使用这些运算。
calculator.ts
export function add(a: number, b: number): number {
return a + b;
}
export function subtract(a: number, b: number): number {
return a - b;
}
app.ts
import { add, subtract } from "./calculator";
console.log(`The sum of 3 and 5 is: {add(5, 3)}`); // Output: 8
console.log(`The difference between 4 and 10 is:{subtract(10, 4)}`); // Output: 6
在这个例子中， calculator.ts 文件使用 export 关键字导出 add 和 subtract 函数。然后可以通过指定相对路径（ ‘./calculator’ ）来将这些函数导入并在 app.ts 文件中使用。导入的函数可以直接调用，提供了模块化和代码重用。
输出
它将产生以下输出 –
The sum of 3 and 5 is: 8
The difference between 4 and 10 is: 6
结论
总而言之，理解TypeScript中内部模块和外部模块的区别对于有效地组织代码至关重要。内部模块能够更好地组织代码，并避免文件或模块内的命名冲突。然而，在较大的项目中，它们可能变得难以控制。外部模块提供了更模块化和可共享的方法，增强了可重用性和协作性。对于大多数项目来说，外部模块是首选，因为它们提供了灵活性和可扩展性。通过利用模块，TypeScript开发人员可以提高代码组织性，促进可重用性，并构建健壮的应用程序。