TypeScript 如何做命名空间
打开电脑写代码时，你有没有过这种“小烦恼”：给变量起名字，刚起完就发现和前面写的某个函数重名；或者写工具函数时，想把相关的功能放一块，结果代码乱糟糟的，找起来像在垃圾堆里找钥匙？其实，只要学会给代码“归置分类”，这些问题就能轻松解决，而 TypeScript 里的命名空间，就是帮你给代码“分抽屉”的实用工具。
什么是命名空间？先从家里的“收纳盒”说起
不用想复杂的技术概念，把命名空间当成家里的“分类收纳盒”就行。比如你要整理杂物，把袜子放一个盒、衣服放另一个盒，袜子和衣服都叫“收纳盒里的东西”，但不会混放——这就是命名空间的核心作用：给代码里的变量、函数、类等内容，套上一个“专属盒子”，避免和其他代码里的同名内容打架。
举个生活化的例子：你自己写了一个叫 User 的类，用来处理用户信息；另一个同事写的工具库，也有个叫 User 的类，专门处理后台数据。如果没有命名空间，两个同名类放在一起，代码直接报错，根本分不清用哪个。但用了命名空间，你的 User 可以放在 MyApp 盒子里，同事的 User 放在 ThirdLib 盒子里，调用时分别写 MyApp.User 和 ThirdLib.User，就像“客厅的毛巾”和“卫生间的毛巾”，名字一样但不会乱。
怎么用命名空间？3步就能学会
TypeScript 用 namespace 关键字定义命名空间，操作超简单，跟着3个小步骤就能上手，全是实际开发里的常见用法。
第一步：先定义专属“收纳盒”
写 namespace 后面跟命名空间的名字，比如做一个博客系统，就叫 BlogApp，然后把要归类的内容写在大括号里：
`typescript
// 定义博客相关的命名空间
namespace BlogApp {
// 博客文章类
export class Article {
constructor(public title: string, public content: string) {}
// 文章预览方法
getPreview() {
return this.content.slice(0, 20) + '...';
}
}
// 评论函数
export function addComment(articleId: number, text: string) {
console.log(给文章${articleId}加了评论：${text});
}
}
`
这里要注意加 export，就像给收纳盒“贴标签”，告诉外面的代码：这个东西我要给别人用，你可以拿。如果不加 export，命名空间里的内容就是“私有的”，外面拿不到。
第二步：调用“收纳盒”里的内容
用 . 来取命名空间里的内容，比如要创建一篇博客文章，就这么写：
`typescript
// 创建一篇文章，用BlogApp的Article类
const myArticle = new BlogApp.Article('国庆游记', '今天去爬了香山...');
console.log(myArticle.getPreview()); // 输出：今天去爬了香山...
// 调用添加评论的函数
BlogApp.addComment(1, '写得真好！');
`
是不是和从收纳盒里拿东西一样？不用怕和其他代码的 Article 重名，只要通过 BlogApp 就能精准找到。
第三步：嵌套命名空间，给收纳盒再分小格
如果你的项目更大，博客里还要分“文章模块”和“用户模块”，可以给命名空间嵌套，就像大收纳盒里再放小盒子：
`typescript
namespace BlogApp {
// 嵌套命名空间，处理用户相关内容
export namespace UserModule {
export class User {
constructor(public name: string) {}
}
}
// 顶层的文章类
export class Article { /* ... */ }
}
`
调用嵌套的内容时，就写 BlogApp.UserModule.User，就像“博客盒里的用户小盒里的用户类”，层级清晰，找东西再也不会乱。
日常开发里的小提醒，别踩这2个坑
学会了基本用法，再注意两个实际用的时候容易踩的小坑，就能少走弯路。
第一个坑：如果代码分成多个文件，不能直接用 namespace 跨文件。比如把 Article 放在 article.ts，把 User 放在 user.ts，直接在 user.ts 里写 BlogApp.UserModule 会报错，得用 /// <reference path="article.ts" /> 把文件关联起来，就像告诉代码：“我要用的东西在这个文件里，先读它”。
第二个坑：现在前端开发常用模块化（比如ES Module），命名空间不是唯一的代码分类方式。如果你的项目用了打包工具（比如Vite、Webpack），用 import/export 模块化更灵活；但如果是小型项目、或者要给浏览器直接写脚本，命名空间还是很方便的，不用搞复杂的模块配置。
其实不管是命名空间还是模块化，核心都是“把相关的东西放一起，避免同名冲突”——就像整理房间的本质，不是买收纳盒，而是让东西各归其位。学会用 TypeScript 的命名空间，你的代码也能变得整整齐齐，找起来一目了然。