TypeScript 命名空间和模块的区别

命名空间

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

与JavaScript不同的是，命名空间在TypeScript中是内置的。在JavaScript中，变量声明进入全局范围。如果在同一项目中使用多个JavaScript文件，那么可能会通过类似的名称覆盖它们，从而让新用户感到困惑。因此，使用TypeScript命名空间可以消除命名冲突。

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

命名空间声明

文件名： StoreCalc.ts

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

访问命名空间

///
let invoice = new invoiceCalc.invoiceAccount.Invoice(); 
console.log("Output: "" +invoice.calculateDiscount(400));

要阅读更多信息，点击这里。

模块

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

模块通过使用 模块加载器 导入另一个模块。在运行时，模块加载器负责在执行模块之前定位和执行所有依赖项。在JavaScript中使用最常见的模块加载器是 CommonJS 模块加载器用于 Node.js 和用于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 命名空间

序号	模块	命名空间
1.	模块是一种用于将代码组织在不同文件中并以它们自己的局部范围执行的方式。	命名空间是一种用于逻辑上分组功能并具有局部作用域的方式。
2.	模块使用export关键字来公开模块功能。	我们可以使用namespace关键字创建一个命名空间，并使用export关键字在花括号{}中定义所有接口，类，函数和变量。
3.	模块中的所有导出函数和类可以在模块外部访问。	我们必须为函数和类使用export关键字，才能在命名空间之外访问它。
4.	我们可以使用import关键字在其他模块中使用模块。	命名空间必须使用三斜杠（///）引用语法包含在文件中。例如： `<reference path="路径至命名空间文件"/>`
5.	它也被称为外部模块。	它也被称为内部模块。
6.	我们可以使用”–module”命令编译模块。	我们可以使用”–outFile”命令编译命名空间。
7.	模块通过使用模块加载器API导入另一个模块，在编译时指定，例如CommonJS，require.js等。	在命名空间中，没有必要使用模块加载器。可以使用`<script>`标签在HTML页面中包含命名空间的.js文件。
8.	模块可以声明它们的依赖项。	命名空间不能声明它们的依赖项。
9.	在模块中，我们可以重新导出它们的一些特性，可以使用原始名称或重命名它。	在命名空间中，我们无法重新导出它们的特性或重命名它。

模块声明：
文件名： 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));