&emsp;&emsp;TypeScript中的命名空間可將那些具有內在聯系的接口、類或對象等代碼組織在一起，既能隔離作用域，也能避免命名沖突，并且使得代碼結構清晰，更易追蹤。在命名空間內部，所有實體部分默認都是私有的，需要由export關鍵字導出之后，才能在外部訪問，如下所示。 ~~~ namespace Util { export function log(msg) { console.log(msg); } } Util.log("strick"); ~~~ &emsp;&emsp;TypeScript會將上面的命名空間編譯成兩部分：Util變量和即時函數，如下代碼所示，這是一種常見的模塊化封裝。 ~~~ var Util; (function(Util) { function log(msg) { console.log(msg); } Util.log = log; })(Util || (Util = {})); Util.log("strick"); ~~~ &emsp;&emsp;注意，由于TypeScript 1.5為了與ES6的術語保持一致，已將內部模塊改為命名空間，外部模塊簡稱為模塊，因此原先用于內部模塊的module關鍵字和現在的namespace關鍵字在功能上是一樣的。但是為了避免被ES6、CommonJS、UMD等模塊概念中的相似名稱所迷惑，官方推薦使用namespace。 ## 一、分離 &emsp;&emsp;當命名空間膨脹的過大時，為了便于維護，有必要將其分離到各個文件中。例如將命名空間分到三個文件中，第一個util.ts文件的代碼如下。 ~~~ namespace Util { export function log(msg) { console.log(msg); } } ~~~ &emsp;&emsp;第二個validator.ts文件的代碼如下。 ~~~ namespace Validator { export function isAcceptable(str) { return str.length > 1; } } ~~~ &emsp;&emsp;第三個default.ts文件的代碼如下所示，其中三斜線指令用來通知編譯器在編譯時需要引入的外部文件，并且它必須聲明在文件頂部。 ~~~ /// <reference path="util.ts" /> /// <reference path="validator.ts" /> let str = "abc"; if(Validator.isAcceptable(str)) { Util.log("success"); } ~~~ &emsp;&emsp;當需要處理多個包含命名空間的文件時，有兩種方式可確保編譯后的代碼按正確順序加載。第一種是在輸入編譯命令時添加--outFile參數，如下所示，其后會跟一個輸出的腳本文件以及一個或多個要編譯的文件。 ~~~ tsc --outFile default.js default.ts ~~~ &emsp;&emsp;第二種是將編譯后的腳本通過HTML的元素在頁面中按正確的順序引入，如下所示。 ~~~ <script src="util.js"></script> <script src="validator.js"></script> <script src="default.js"></script> ~~~ ## 二、別名 &emsp;&emsp;命名空間支持嵌套，即在內部聲明另一個命名空間，如下所示。 ~~~ namespace Shape { export namespace Polygon { export class Triangle { } export class Square { } } } ~~~ &emsp;&emsp;當引用這類命名空間時，可以通過import關鍵字為其取一個短的別名，如下代碼所示。注意，不要與加載模塊的import語法相混淆，此處import的右側必須包含命名空間。 ~~~ import P = Shape.Polygon; import Triangle = Shape.Polygon.Triangle; let sq = new P.Square(); let triangle = new Triangle(); ~~~ &emsp;&emsp;通過編譯后的代碼可以發現，由于import是var的語法糖（如下代碼所示），因此改變P或Triangle變量的值不會影響命名空間的引用。 ~~~ var P = Shape.Polygon; var Triangle = Shape.Polygon.Triangle; var sq = new P.Square(); var triangle = new Triangle(); ~~~ ***** > 原文出處： [博客園-TypeScript躬行記](https://www.cnblogs.com/strick/category/1561745.html) [知乎專欄-TypeScript躬行記](https://zhuanlan.zhihu.com/pwts2019) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。