關(guān)于術(shù)語(yǔ)的一點(diǎn)說(shuō)明: 請(qǐng)務(wù)必注意一點(diǎn),TypeScript 1.5里術(shù)語(yǔ)名已經(jīng)發(fā)生了變化。 “內(nèi)部模塊”現(xiàn)在稱(chēng)做“命名空間”。 “外部模塊”現(xiàn)在則簡(jiǎn)稱(chēng)為“模塊”,這是為了與 ECMAScript 2015里的術(shù)語(yǔ)保持一致,(也就是說(shuō)
module X {
相當(dāng)于現(xiàn)在推薦的寫(xiě)法namespace X {
)。
這篇文章描述了如何在TypeScript里使用命名空間(之前叫做“內(nèi)部模塊”)來(lái)組織你的代碼。
就像我們?cè)谛g(shù)語(yǔ)說(shuō)明里提到的那樣,“內(nèi)部模塊”現(xiàn)在叫做“命名空間”。
另外,任何使用module
關(guān)鍵字來(lái)聲明一個(gè)內(nèi)部模塊的地方都應(yīng)該使用namespace
關(guān)鍵字來(lái)替換。
這就避免了讓新的使用者被相似的名稱(chēng)所迷惑。
我們先來(lái)寫(xiě)一段程序并將在整篇文章中都使用這個(gè)例子。 我們定義幾個(gè)簡(jiǎn)單的字符串驗(yàn)證器,假設(shè)你會(huì)使用它們來(lái)驗(yàn)證表單里的用戶(hù)輸入或驗(yàn)證外部數(shù)據(jù)。
interface StringValidator {
isAcceptable(s: string): boolean;
}
let lettersRegexp = /^[A-Za-z]+$/;
let numberRegexp = /^[0-9]+$/;
class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
// Some samples to try
let strings = ["Hello", "98052", "101"];
// Validators to use
let validators: { [s: string]: StringValidator; } = {};
validators["ZIP code"] = new ZipCodeValidator();
validators["Letters only"] = new LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(s => {
for (let name in validators) {
console.log(""" + s + "" " + (validators[name].isAcceptable(s) ? " matches " : " does not match ") + name);
}
});
隨著更多驗(yàn)證器的加入,我們需要一種手段來(lái)組織代碼,以便于在記錄它們類(lèi)型的同時(shí)還不用擔(dān)心與其它對(duì)象產(chǎn)生命名沖突。 因此,我們把驗(yàn)證器包裹到一個(gè)命名空間內(nèi),而不是把它們放在全局命名空間下。
下面的例子里,把所有與驗(yàn)證器相關(guān)的類(lèi)型都放到一個(gè)叫做Validation
的命名空間里。 因?yàn)槲覀兿胱屵@些接口和類(lèi)在命名空間之外也是可訪(fǎng)問(wèn)的,所以需要使用 export
。 相反的,變量 lettersRegexp
和numberRegexp
是實(shí)現(xiàn)的細(xì)節(jié),不需要導(dǎo)出,因此它們?cè)诿臻g外是不能訪(fǎng)問(wèn)的。 在文件末尾的測(cè)試代碼里,由于是在命名空間之外訪(fǎng)問(wèn),因此需要限定類(lèi)型的名稱(chēng),比如 Validation.LettersOnlyValidator
。
namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
const lettersRegexp = /^[A-Za-z]+$/;
const numberRegexp = /^[0-9]+$/;
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
}
// Some samples to try
let strings = ["Hello", "98052", "101"];
// Validators to use
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(s => {
for (let name in validators) {
console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);
}
});
當(dāng)應(yīng)用變得越來(lái)越大時(shí),我們需要將代碼分離到不同的文件中以便于維護(hù)。
現(xiàn)在,我們把Validation
命名空間分割成多個(gè)文件。 盡管是不同的文件,它們?nèi)允峭粋€(gè)命名空間,并且在使用的時(shí)候就如同它們?cè)谝粋€(gè)文件中定義的一樣。 因?yàn)椴煌募g存在依賴(lài)關(guān)系,所以我們加入了引用標(biāo)簽來(lái)告訴編譯器文件之間的關(guān)聯(lián)。 我們的測(cè)試代碼保持不變。
namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
}
/// <reference path="Validation.ts" />
namespace Validation {
const lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
}
/// <reference path="Validation.ts" />
namespace Validation {
const numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
}
/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />
// Some samples to try
let strings = ["Hello", "98052", "101"];
// Validators to use
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(s => {
for (let name in validators) {
console.log(""" + s + "" " + (validators[name].isAcceptable(s) ? " matches " : " does not match ") + name);
}
});
當(dāng)涉及到多文件時(shí),我們必須確保所有編譯后的代碼都被加載了。 我們有兩種方式。
第一種方式,把所有的輸入文件編譯為一個(gè)輸出文件,需要使用--outFile
標(biāo)記:
tsc --outFile sample.js Test.ts
編譯器會(huì)根據(jù)源碼里的引用標(biāo)簽自動(dòng)地對(duì)輸出進(jìn)行排序。你也可以單獨(dú)地指定每個(gè)文件。
tsc --outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts
第二種方式,我們可以編譯每一個(gè)文件(默認(rèn)方式),那么每個(gè)源文件都會(huì)對(duì)應(yīng)生成一個(gè)JavaScript文件。 然后,在頁(yè)面上通過(guò) <script>
標(biāo)簽把所有生成的JavaScript文件按正確的順序引進(jìn)來(lái),比如:
<script src="Validation.js" type="text/javascript" />
<script src="LettersOnlyValidator.js" type="text/javascript" />
<script src="ZipCodeValidator.js" type="text/javascript" />
<script src="Test.js" type="text/javascript" />
另一種簡(jiǎn)化命名空間操作的方法是使用import q = x.y.z
給常用的對(duì)象起一個(gè)短的名字。 不要與用來(lái)加載模塊的 import x = require('name')
語(yǔ)法弄混了,這里的語(yǔ)法是為指定的符號(hào)創(chuàng)建一個(gè)別名。 你可以用這種方法為任意標(biāo)識(shí)符創(chuàng)建別名,也包括導(dǎo)入的模塊中的對(duì)象。
namespace Shapes {
export namespace Polygons {
export class Triangle { }
export class Square { }
}
}
import polygons = Shapes.Polygons;
let sq = new polygons.Square(); // Same as "new Shapes.Polygons.Square()"
注意,我們并沒(méi)有使用require
關(guān)鍵字,而是直接使用導(dǎo)入符號(hào)的限定名賦值。 這與使用 var
相似,但它還適用于類(lèi)型和導(dǎo)入的具有命名空間含義的符號(hào)。 重要的是,對(duì)于值來(lái)講, import
會(huì)生成與原始符號(hào)不同的引用,所以改變別名的var
值并不會(huì)影響原始變量的值。
為了描述不是用TypeScript編寫(xiě)的類(lèi)庫(kù)的類(lèi)型,我們需要聲明類(lèi)庫(kù)導(dǎo)出的API。 由于大部分程序庫(kù)只提供少數(shù)的頂級(jí)對(duì)象,命名空間是用來(lái)表示它們的一個(gè)好辦法。
我們稱(chēng)其為聲明是因?yàn)樗皇峭獠砍绦虻木唧w實(shí)現(xiàn)。 我們通常在 .d.ts
里寫(xiě)這些聲明。 如果你熟悉C/C++,你可以把它們當(dāng)做 .h
文件。 讓我們看一些例子。
流行的程序庫(kù)D3在全局對(duì)象d3
里定義它的功能。 因?yàn)檫@個(gè)庫(kù)通過(guò)一個(gè) <script>
標(biāo)簽加載(不是通過(guò)模塊加載器),它的聲明文件使用內(nèi)部模塊來(lái)定義它的類(lèi)型。 為了讓TypeScript編譯器識(shí)別它的類(lèi)型,我們使用外部命名空間聲明。 比如,我們可以像下面這樣寫(xiě):
declare namespace D3 {
export interface Selectors {
select: {
(selector: string): Selection;
(element: EventTarget): Selection;
};
}
export interface Event {
x: number;
y: number;
}
export interface Base extends Selectors {
event: Event;
}
}
declare let d3: D3.Base;
更多建議: