命名空间和模块的区别2025年3月17日 | 阅读 3 分钟 命名空间命名空间是一种用于对功能进行逻辑分组的方式。它允许我们以更清晰的方式组织我们的代码。命名空间可以包含接口、类、函数和变量,以支持一组相关的功能。 与 JavaScript 不同,命名空间是 TypeScript 的内置功能。在 JavaScript 中,变量声明会进入全局范围。如果在同一个项目中使用多个 JavaScript 文件,那么可能会因为名称相似而覆盖它们,从而混淆新用户。因此,使用 TypeScript 命名空间可以消除命名冲突。 一个命名空间可以跨越多个文件,并允许使用 "--outFile" 将每个文件连接起来,就像它们都定义在一个地方一样。 命名空间声明 文件名: StoreCalc.ts 访问命名空间 要阅读更多信息,请点击这里。
模块模块是一种创建一组相关变量、函数、类、接口等的方式。它在局部范围内执行,而不是在全局范围内。换句话说,在模块中声明的变量、函数、类和接口不能直接在模块外部访问。我们可以使用 export 关键字创建一个模块,并使用 import 关键字在其他模块中使用。 模块通过使用模块加载器导入另一个模块。在运行时,模块加载器负责在执行模块之前找到并执行模块的所有依赖项。JavaScript 中最常用的模块加载器是用于 Node.js 的 CommonJS 模块加载器和用于 Web 应用程序的 require.js。 
模块声明 文件名: 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.tsexport 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.tsnamespace 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));
|
|