内部模块与外部模块有何不同?

typescriptweb developmentfront end technology

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(`加法结果:${result1}`);
const result2 = MathUtils.subtract(10, 4);
console.log(`减法结果:${result2}`);

然后,我们使用 MathUtils 命名空间中的函数 add 和 subtract 分别执行加法和减法运算。结果存储在 result1 和 result2 变量中,并使用 console.log() 显示它们的值。

为了进行编译,我们运行以下命令 -

$ tsc main.ts
$ node main.js

输出

它将产生以下输出 -

加法结果:8
减法结果: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(`3 加 5 的和为:${add(5, 3)}`); // 输出:8
console.log(`4 加 10 的差为:${subtract(10, 4)}`); // 输出:6

在此示例中,calculator.ts 文件使用 export 关键字导出 add 和 subtract 函数。然后可以通过指定相对路径 ('./calculator') 在 app.ts 文件中导入和使用这些函数。导入的函数可以直接调用,从而提供模块化和代码重用。

输出

它将产生以下输出 -

3 加 5 的和是:8
4 加 10 的差是:6

结论

总而言之,了解 TypeScript 中内部模块和外部模块的区别对于有效地组织代码至关重要。内部模块可以提供更好的组织,并避免文件或模块内的命名冲突。但是,它们在较大的项目中可能会变得笨重。外部模块提供了更模块化和可共享的方法,增强了可重用性和协作性。对于大多数项目来说,外部模块是首选,因为它们提供了灵活性和可扩展性。通过利用模块,TypeScript 开发人员可以改进代码组织,提高可重用性,并构建健壮的应用程序。


相关文章