TypeScript 命名空间与模块化对比：模块导入导出与命名空间使用指南

一、模块

在 TypeScript 与 ECMAScript 标准中，2015 年及以后的规范规定，任何包含顶级 import 或者 export 语句的文件，均被视为一个独立的模块。

反之，若文件未包含顶级的 import 或 export 声明，则该文件内的所有内容将被视为全局可见，不受模块作用域限制。

例如，在 TypeScript 项目中创建一个名为 1.ts 的文件，并在其中声明一个变量 a，代码结构如下所示。

const a = 1

随后在另一个文件中再次声明同名变量 a，此时编译器会报错。

一、模块

错误信息提示变量 a 被重复声明，这是因为两个文件的内容都暴露在全局空间中，导致命名冲突。

要解决此问题，需利用 import 或 export 关键字引入模块系统，从而隔离变量作用域。

具体实现方式如下。

const a = 10;
export default a

在 typescript 中，export 关键字用于导出变量或类型，其语法行为与 es6 模块体系保持一致。

示例代码如下。

export const a = 1
export type Person = {
    name: String
}

通过 import 语句引入已导出的模块，具体用法见下文。

import { a, Person } from './export';

命名空间最主要的设计目的是解决标识符重名问题。

它定义了标识符的可见范围，允许同一标识符在多个不同的名字空间中定义，且各空间内的含义互不干扰。

因此，在新定义的名字空间中，可以自由使用任意标识符，而不会与已有其他名字空间中的定义发生冲突。

在 TypeScript 中，使用 namespace 关键字来定义命名空间，语法结构如下。

namespace SomeNameSpaceName {
   export interface ISomeInterfaceName {      }
   export class SomeClassName {      }
}

上述代码定义了一个名为 SomeNameSpaceName 的命名空间。若需从外部调用 SomeNameSpaceName 内部的类和接口，必须为这些类和接口添加 export 关键字以暴露其成员。

调用方式示例如下。

SomeNameSpaceName.SomeClassName

从本质上看，命名空间是一个普通的 JavaScript 对象，其作用是将一系列相关的全局变量封装为该对象的属性。

namespace Letter {
  export let a = 1;
  export let b = 2;
  export let c = 3;
  // ...
  export let z = 26;
}

将其编译为 js 代码后，结构如下所示。

var Letter;
(function (Letter) {
    Letter.a = 1;
    Letter.b = 2;
    Letter.c = 3;
    // ...
    Letter.z = 26;
})(Letter || (Letter = {}));

命名空间本质上是全局命名空间下的一个带名字的 JavaScript 对象，使用简便。然而，如同其他全局命名空间一样，它难以清晰识别组件间的依赖关系，尤其在大型应用中容易引发全局污染问题。
虽然模块也包含代码和声明，但其核心区别在于模块能够明确声明其依赖关系，从而实现更好的模块化管理。
在常规的 TypeScript 项目开发中，通常不建议使用命名空间。但在通过 .d.ts 类型声明文件标记 JavaScript 库类型时，命名空间仍被广泛使用，主要作用是为编译器提供代码参考和类型定义。

至此，关于 TypeScript 中命名空间与模块化的详细介绍完毕。如需了解更多 TypeScript 命名空间相关内容，建议查阅本站过往文章或继续浏览后续教程，感谢支持。