命名空间和模块的区别

2025年3月17日 | 阅读 3 分钟

命名空间

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

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

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

命名空间声明

文件名: StoreCalc.ts

访问命名空间

要阅读更多信息,请点击这里


模块

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

模块通过使用模块加载器导入另一个模块。在运行时,模块加载器负责在执行模块之前找到并执行模块的所有依赖项。JavaScript 中最常用的模块加载器是用于 Node.jsCommonJS 模块加载器和用于 Web 应用程序的 require.js

Namespaces vs Modules

模块声明

文件名: addition.ts

访问模块

要阅读更多信息,请点击这里


模块 vs 命名空间

序号模块命名空间
1.模块是一种用于在单独的文件中组织代码的方式,并且可以在其局部范围内执行,而不是在全局范围内。命名空间是一种用于对功能进行逻辑分组的方式,具有局部作用域。
2.模块使用 export 关键字来公开模块功能。我们可以使用 namespace 关键字创建一个命名空间,并且所有接口、类、函数和变量都可以在大括号 {} 中使用 export 关键字定义。
3.模块中的所有导出函数和类都可以在模块外部访问。我们必须使用 export 关键字才能在命名空间外部访问函数和类。
4.我们可以使用 import 关键字在其他模块中使用一个模块。必须使用三斜杠 (///) 引用语法将命名空间包含在文件中。例如
/// <reference path="path to namespace file"/>
5.它也被称为外部模块。它也被称为内部模块。
6.我们可以使用“--module”命令编译模块。我们可以使用“--outFile”命令编译命名空间。
7.模块通过使用模块加载器 API 导入另一个模块,该 API 在编译时指定,例如 CommonJS、require.js 等。在命名空间中,不需要模块加载器。使用 <script> 标签在 HTML 页面中包含命名空间的 .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));
下一个主题TypeScript 泛型