关于前端:现代TypeScript高级教程命名空间和模块

命名空间和模块

命名空间（Namespace）

在 TypeScript 中，命名空间是一种将代码封装在一个特定名称下的形式，以避免全局作用域净化并防止命名抵触。命名空间在 TypeScript 中十分重要，因为它们为模块化和封装提供了灵便的选项。

创立命名空间的语法如下：

namespace MyNamespace {
  export const myVar: number = 10;
  export function myFunction(): void {console.log("Hello from MyNamespace");
  }
}

在此例中，咱们创立了一个名为 MyNamespace 的命名空间，该命名空间内有一个变量 myVar 和一个函数 myFunction。export 关键字容许咱们从命名空间内部拜访这些元素。

命名空间中的元素能够通过以下形式拜访：

console.log(MyNamespace.myVar); // 输入：10
MyNamespace.myFunction(); // 输入：Hello from MyNamespace

咱们也能够应用嵌套的命名空间：

namespace ParentNamespace {
  export namespace ChildNamespace {export const myVar: number = 20;}
}
console.log(ParentNamespace.ChildNamespace.myVar); // 输入：20

命名空间（Namespace）应用场景

在 TypeScript 的晚期版本中，命名空间被宽泛地应用来组织和包装一组相干的代码。然而，随着 ES6 模块零碎（ES6 Modules）的呈现和宽泛应用，命名空间的用法变得越来越少，当初被视为一种遗留的形式来组织代码。

第三方库

一些第三方库依然应用命名空间来组织本人的代码，并提供命名空间作为库的入口点。在这种状况下，咱们须要应用命名空间来拜访和应用库中的类型和函数。

namespace MyLibrary {export function myFunction() {// ...}
}

MyLibrary.myFunction();

兼容性

在一些遗留的 JavaScript 代码或库中，命名空间依然是一种常见的组织代码的形式。如果咱们须要与这些代码进行交互，咱们可能须要创立命名空间来适应它们。

// legacy.js
var MyNamespace = {myFunction: function() {// ...}
};

MyNamespace.myFunction();

在下面的示例中，咱们演示了命名空间的几个应用场景。第一个示例展现了如何应用命名空间拜访和应用第三方库的函数。第二个示例展现了如何应用命名空间来治理全局状态。第三个示例展现了如何在与遗留 JavaScript 代码进行交互时创立命名空间。

尽管在古代 TypeScript 开发中，模块是更常见和举荐的代码组织形式，但命名空间依然在特定的状况下具备肯定的用途，并且在与一些特定的库或代码进行交互时可能是必须的。

模块

在 TypeScript 中，模块是另一种组织代码的形式，但它们更关注的是依赖治理。每个模块都有其本人的作用域，并且只有明确地导出的局部能力在其余模块中拜访。

创立和应用模块的形式如下：

在 myModule.ts 文件中：

export const myVar: number = 10;
export function myFunction(): void {console.log("Hello from myModule");
}

在另一个文件中导入和应用模块：

import {myVar, myFunction} from './myModule';

console.log(myVar); // 输入：10
myFunction(); // 输入：Hello from myModule

在 TypeScript 中，咱们能够应用模块解析策略（如 Node 或 Classic），以确定如何查找模块。这些策略在 tsconfig.json 文件的 compilerOptions 选项下的 moduleResolution 选项中定义。

3. 命名空间与模块的比照

尽管命名空间和模块在某种程度上有所类似，但它们有以下几个要害区别：

1. 作用域：命名空间是在全局作用域中定义的，而模块则在本人的作用域中定义。这意味着，在模块外部定义的所有内容默认状况下在模块内部是不可见的，除非显式地导出它们。
2. 文件组织：命名空间通常用于组织在同一文件中的代码，而模块则是跨文件进行组织。
3. 依赖治理：模块关注的是如何导入和导出性能，以便治理代码之间的依赖关系。相比之下，命名空间并未对依赖治理提供明确的反对。
4. 应用场景：随着 ES6 模块语法的遍及，古代 JavaScript 我的项目通常更偏向于应用模块来组织代码。然而，对于一些遗留我的项目或那些须要将多个文件合并为一个全局可用的库的场景，命名空间可能更为适合。