在確保我們創建的變量不會泄露至全局變量中,我們以前曾采用過這種代碼組織形式:
(function(someObj){
someObj.age = 18;
})(someObj || someObj = {});
但在基于文件模塊的項目中,我們無須擔心這一點,此種方式,適合用于合理的函數邏輯分組中,在 TypeScript 中,提供了 namespace 關鍵字來描述這種分組,在 typescript 編譯器進行編譯過后,命名空間也就被編譯成了上述示例那樣的代碼。
命名空間的聲明
TypeScript 的命名空間只對外暴露需要在外部訪問的對象,命名空間內的對象通過 export 關鍵字對外暴露,比如我們在一個名叫 utils.ts
的文件里聲明一個命名空間:
// utils.ts
namespace Utils {
export interface IPerson {
name: string;
age: number;
}
}
命名空間的使用
通過 namespace 關鍵字聲明命名空間,在命名空間外部需要通過完全限定名訪問這些對象,通常情況下,聲明的命名空間代碼和調用的代碼不在同一個文件里,因此在其他文件中使用,注意引入的路徑要寫正確,此處我們在同級目錄中任意一個 ts 文件中使用我們剛定義的命名空間:
/// <reference path="utils.ts" />
const me: Utils.IPerson = {
name: 'funlee',
age: 18
}
console.log(me); // {name: 'funlee', age: 18}
如上述代碼所示,通過 reference 注釋引用命名空間,即可通過完全限定名進行訪問,我們也可以通過 import
導入模塊的形式,引入命名空間:
import './utils'
const me: Utils.IPerson = {
name: 'funlee',
age: 18
}
console.log(me); // {name: 'funlee', age: 18}
多文件的命名空間
就像普通的 JS 模塊文件可以相互引用一樣,包含 namespace 的命名空間文件也可以相互引入,還可以組合成一個更大的命名空間,下面是一個簡單的示例,所有文件都在同一目錄下,你也可參考官方示例:
utils.ts
namespace Utils {
export interface IAnimal {
name: string;
say(): void;
}
}
animal.ts
/// <reference path="utils.ts" />
export namespace Animal {
export class Dog implements Utils.IAnimal{
name: string;
constructor(theName: string) {
this.name = theName;
}
say() {
console.log(`${this.name}: 汪汪汪`)
}
}
}
index.ts
import {Animal} from './animal';
const he = new Animal.Dog('Jack');
he.say(); // Jack: 汪汪汪