TypeScript 命名空间与模块的区别

命名空间

命名空间是用于逻辑分组功能的方式。它允许我们以更加清晰的方式组织代码。命名空间可以包括接口、类、函数和变量来支持一组相关的功能。

与 JavaScript 不同，命名空间是内置在 TypeScript 中的。在 JavaScript 中，变量声明进入全局范围。如果在同一项目中使用多个 JavaScript 文件，则有可能通过相似的名称覆盖它们来混淆新用户。因此，使用 TypeScript 的命名空间可以消除命名冲突。

命名空间可以跨越多个文件，并允许使用 “–outFile” 将每个文件连接起来，就像它们都是在一个地方定义的一样。

命名空间声明

文件名: StoreCalc.ts

namespace invoiceCalc {
   export namespace invoiceAccount {
      export class Invoice {
         public calculateDiscount(price: number) {
            return price * .60;
         }
      }
   }
}

访问命名空间

/// <reference path="./StoreCalc.ts"/>
let invoice = new invoiceCalc.invoiceAccount.Invoice();
console.log("Output: " +invoice.calculateDiscount(400));

模块

模块是创建一组相关变量、函数、类和接口等的一种方式，它在本地范围内执行，而不是全局范围内执行。换句话说，在模块中声明的变量、函数、类和接口不能直接在模块外部访问。我们可以使用 export 关键字创建模块，并使用 import 关键字在其他模块中使用。

模块使用 模块加载器 导入另一个模块。运行时，模块加载器负责在执行模块之前定位并执行其所有依赖项。用于 JavaScript 中的最常见的模块加载器是 Node.js 的 CommonJS 模块加载器和 Web 应用程序的 require.js。

TypeScript 命名空间与模块的区别

模块声明

文件名: addition.ts

export class Addition{
    constructor(private x?: number, private y?: number){
    }
    Sum(){
        console.log("SUM: " +(this.x + this.y));
    }
}

访问模块

import {Addition} from './addition';
let addObject = new Addition(10, 20);
addObject.Sum();

模块 vs. 命名空间

SN	Module	Namespace
1.	模块是一种方法，用于在单独的文件中组织代码，并在它们的本地范围内执行，而不是在全局范围内执行。	命名空间是一种方法，用于逻辑分组功能，并具有本地作用域。
2.	模块使用 export 关键字公开模块功能。	我们可以使用 namespace 关键字创建命名空间，并使用 export 关键字在大括号{}中定义所有接口、类、函数和变量。
3.	模块中的所有导出函数和类都可以在模块外部访问。	我们必须使用 export 关键字使函数和类能够在命名空间外部访问。
4.	我们可以使用 import 关键字在其他模块中使用模块。	必须使用三斜线(///)参考语法将命名空间包含在文件中。例如: `/// <reference path="path to namespace file"/>`
5.	它也称为外部模块。	它也称为内部模块。
6.	我们可以使用 “–module” 命令编译模块。	我们可以使用 “–outFile” 命令编译命名空间。
7.	模块通过使用模块加载器 API 导入另一个模块，在编译时指定，例如 CommonJS、require.js 等。	在命名空间中，无需模块加载器。通过在 HTML 页面中使用 `<script>` 标记包含命名空间的 .js 文件即可。
8.	模块可以声明它们的依赖项。	命名空间无法声明它们的依赖项。
9.	在模块中，我们可以重新导出其一些功能，使用它们的原始名称或重命名它。	在命名空间中，我们无法重新导出其功能或重命名其功能。
10.	模块声明: 文件名: addition.ts `export class Addition{ constructor(private x?: number, private y?: number){ } Sum(){ console.log("SUM: " +(this.x + this.y)); } }` 访问模块: `import {Addition} from './addition'; let addObject = new Addition(10, 20); addObject.Sum();`	命名空间声明: 文件名: StoreCalc.ts `namespace invoiceCalc { export namespace invoiceAccount { export class Invoice { public calculateDiscount(price: number) { return price * .60; } } } }` 访问命名空间:`///<reference path="./StoreCalc.ts"/> let invoice = new invoiceCalc.invoiceAccount.Invoice(); console.log("Output: " +invoice.calculateDiscount(400));`