谈谈 typescript 中 namespace 的理解

Lysun001

于 2025-04-14 15:05:53 发布

阅读量1k

点赞数 8

文章标签： typescript javascript 前端

本文链接：https://blog.youkuaiyun.com/lotpyve/article/details/147223329

版权

在 TypeScript 中，namespace 是一种将代码组织到逻辑组中的方式。它主要用于避免全局命名空间污染，并帮助开发者更好地组织和管理代码。尽管现代 TypeScript 开发中更推荐使用模块（import/export），但在某些场景下（尤其是旧项目或需要兼容性时），namespace 仍然有其用途。

我的理解是， namespace 相当与模块化的思想，因为那时候 js 的 module 还没有出来，所以 ts 出了这种功能，不过现在随着 js （import/export）的出现，namespace 尽量不要使用了，只是如果在一些以前的项目中看到，可以作为了解。

通过 namespace 我们引用其他文件的方式为

/// <reference path="路径" />

要主要前面有三个 ///

下面我举个例子，来看一下代码和应用

我现在在同一目录下有4个文件，分别是 hello.ts，trim.ts，测试.html，tsconfig.json，还有一个文件夹 dist

trim.ts：

namespace Greeter {
  export const value = 'Hello, World!'
}

hello.ts：

/// <reference path="trim.ts" />
namespace Greeter {
  export function trimFun() {
    console.log(`${value}, World!`)
  }
}

Greeter.trimFun()

测试.html：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<h1>测试的页面</h1>
	<script src="./dist/bundle.js"></script>
</body>

</html>

tsconfig.json：

{
  "compilerOptions": {
    "module": "none",
    "target": "ES5",
    "outFile": "./dist/bundle.js"
  }
}

之后，我们在当前目录中打开终端，输入 tsc，然后打开html文件

可以看到，我们在 hello.ts 中使用了 trim.ts 中定义的一个 value 值

namespace 使用值得主要的是

export 关键字用于导出命名空间中的成员，使其可以在命名空间外部访问。
如果没有用 export，命名空间中的成员是私有的，无法从外部访问。

下面来说说 Namespace 和 Module 的一些区别：

特性	Namespace	Module
文件范围	全局范围	文件范围
导入/导出机制	手动引用 (`/// <reference path="..."/>`)	使用 `import`/`export`
推荐使用场景	旧项目或小型脚本	现代 TypeScript 项目
是否会污染全局命名空间	是	否