TypeScript namespace 怎么用
你有没有过这样的经历：写 JavaScript 时，不小心给全局变量改了个名，结果另一个功能直接报错；或者几个同事写的模块，变量名重复，最后要花半小时改兼容？其实用 TypeScript 的 namespace，就能解决这种“变量打架”的麻烦，而且用法一点不难，咱们用生活化的例子一步步说清。
先搞懂：namespace 到底是啥？
你可以把 namespace 理解成“带锁的收纳盒”——平时你把袜子、T恤、围巾都堆在衣柜（全局作用域）里，一开门就乱；要是按“夏季衣物”“冬季衣物”“配饰”分进不同收纳盒，找的时候不会混，还能放同名字的东西（比如两个收纳盒里都能放围巾）。
对应到代码里，namespace 就是把相关的变量、函数、类都打包在一个“专属盒子”里，外面要调用的话，得先报盒子名字，就不会和其他内容重名了。比如你做一个美食APP，里面有“中餐工具”和“西餐工具”，这俩就是两个不同的 namespace。
第一步：怎么定义一个 namespace？
定义 namespace 特别简单，就用 namespace 关键字，后面跟个你喜欢的名字就行，比如咱们做个“中餐调料”的 namespace：
`typescript
// 定义中餐调料的专属收纳盒
namespace ChineseSeasoning {
// 这个盒子里的变量，叫“生抽”
export const lightSoySauce = "李锦记生抽";
// 这个盒子里的变量，叫“老抽”
export const darkSoySauce = "海天老抽";
// 盒子里还能放函数，比如做“调料清单”
export function showList() {
return 中餐常用调料：${lightSoySauce}、${darkSoySauce};
}
}
`
这里要注意一个关键：export 关键字——就像收纳盒的“透明窗口”，只有加了 export 的内容，才能被外面的代码看到和调用；没加的，就是盒子内部的“私藏”，外面碰不到。比如你在 ChineseSeasoning 里加个 secretSauce = "老板秘制酱"，没写 export，外面就用不了它，只能在盒子内部用。
第二步：怎么调用 namespace 里的内容？
调用的时候，要先报“收纳盒名字”，中间用 . 连接，就像你要从“中餐调料盒”里拿生抽，得说“我要拿中餐调料盒里的生抽”。比如写个小例子：
`typescript
// 调用中餐调料的内容
console.log(ChineseSeasoning.showList());
// 输出：中餐常用调料：李锦记生抽、海天老抽
// 要是你想做西餐调料，还能再建一个独立的 namespace，不怕重名
namespace WesternSeasoning {
export const butter = "安佳黄油";
export function showList() {
return 西餐常用调料：${butter};
}
}
// 两个盒子的 showList 不会冲突，因为是不同 namespace
console.log(WesternSeasoning.showList());
// 输出：西餐常用调料：安佳黄油
`
你看，两个 showList 函数名字完全一样，但分属不同 namespace，调用时不会撞车，这就是 namespace 最实用的地方——解决同名冲突。
进阶用法：把 namespace 拆到不同文件里
要是项目大了，所有代码都写在一个文件里，看着乱，还容易和其他代码混。TypeScript 支持把 namespace 拆到多个文件里，只要加个 /// <reference path="..." /> 引入就行。
比如你把“中餐调料”拆成 chinese-seasoning.ts：
`typescript
namespace ChineseSeasoning {
export const lightSoySauce = "李锦记生抽";
}
`
再建个 cook-book.ts 用它：
`typescript
// 引入刚才的 namespace 文件
/// <reference path="./chinese-seasoning.ts" />
namespace CookBook {
export function makeDish() {
return 用${ChineseSeasoning.lightSoySauce}炒青菜;
}
}
`
这样代码按功能拆分，看着清爽，还能共用同一个 namespace 的内容，不用反复写代码。
最后说个要注意的小细节
namespace 适合中小项目，比如自己的小工具、小网站，用来整理代码、避免同名冲突特别方便；但如果是大项目，现在更推荐用 ES6 的模块（import/export），不过要是你用的是旧环境，或者想快速拆分代码，namespace 还是很顺手的工具。
其实它的核心逻辑就是“分组+隔离”，把相关的内容归成一组，外面要找就按组来，不会乱。下次你写代码再遇到“变量不知道该放哪”“怕和别人重名”的问题，试试用 namespace 打包，就能少踩很多小坑。