類型聲明
TypeScript 代碼最明顯的特征,就是為 JavaScript 變量加上了類型聲明。
let foo:string;
上面示例中,變量foo的后面使用冒號,聲明了它的類型為string。
類型聲明的寫法,一律為在標識符后面添加“冒號 + 類型”。函數(shù)參數(shù)和返回值,也是這樣來聲明類型。
function toString(num:number):string {
return String(num);
}
上面示例中,函數(shù)toString()的參數(shù)num的類型是number。參數(shù)列表的圓括號后面,聲明了返回值的類型是string。更詳細的介紹,參見《函數(shù)》一章。
注意,變量的值應該與聲明的類型一致,如果不一致,TypeScript 就會報錯。
// 報錯
let foo:string = 123;
上面示例中,變量foo的類型是字符串,但是賦值為數(shù)值123,TypeScript 就報錯了。
另外,TypeScript 規(guī)定,變量只有賦值后才能使用,否則就會報錯。
let x:number;
console.log(x) // 報錯
上面示例中,變量x沒有賦值就被讀取,導致報錯。而 JavaScript 允許這種行為,不會報錯,沒有賦值的變量會返回undefined。
類型推斷
類型聲明并不是必需的,如果沒有,TypeScript 會自己推斷類型。
let foo = 123;
上面示例中,變量foo并沒有類型聲明,TypeScript 就會推斷它的類型。由于它被賦值為一個數(shù)值,因此 TypeScript 推斷它的類型為number。
后面,如果變量foo更改為其他類型的值,跟推斷的類型不一致,TypeScript 就會報錯。
let foo = 123;
foo = 'hello'; // 報錯
上面示例中,變量foo的類型推斷為number,后面賦值為字符串,TypeScript 就報錯了。
TypeScript 也可以推斷函數(shù)的返回值。
function toString(num:number) {
return String(num);
}
上面示例中,函數(shù)toString()沒有聲明返回值的類型,但是 TypeScript 推斷返回的是字符串。正是因為 TypeScript 的類型推斷,所以函數(shù)返回值的類型通常是省略不寫的。
從這里可以看到,TypeScript 的設計思想是,類型聲明是可選的,你可以加,也可以不加。即使不加類型聲明,依然是有效的 TypeScript 代碼,只是這時不能保證 TypeScript 會正確推斷出類型。由于這個原因。所有 JavaScript 代碼都是合法的 TypeScript 代碼。
這樣設計還有一個好處,將以前的 JavaScript 項目改為 TypeScript 項目時,你可以逐步地為老代碼添加類型,即使有些代碼沒有添加,也不會無法運行。
TypeScript 的編譯
JavaScript 的運行環(huán)境(瀏覽器和 Node.js)不認識 TypeScript 代碼。所以,TypeScript 項目要想運行,必須先轉(zhuǎn)為 JavaScript 代碼,這個代碼轉(zhuǎn)換的過程就叫做“編譯”(compile)。
TypeScript 官方?jīng)]有做運行環(huán)境,只提供編譯器。編譯時,會將類型聲明和類型相關的代碼全部刪除,只留下能運行的 JavaScript 代碼,并且不會改變 JavaScript 的運行結果。
因此,TypeScript 的類型檢查只是編譯時的類型檢查,而不是運行時的類型檢查。一旦代碼編譯為 JavaScript,運行時就不再檢查類型了。
值與類型
學習 TypeScript 需要分清楚“值”(value)和“類型”(type)。
“類型”是針對“值”的,可以視為是后者的一個元屬性。每一個值在 TypeScript 里面都是有類型的。比如,3是一個值,它的類型是number。
TypeScript 代碼只涉及類型,不涉及值。所有跟“值”相關的處理,都由 JavaScript 完成。
這一點務必牢記。TypeScript 項目里面,其實存在兩種代碼,一種是底層的“值代碼”,另一種是上層的“類型代碼”。前者使用 JavaScript 語法,后者使用 TypeScript 的類型語法。
它們是可以分離的,TypeScript 的編譯過程,實際上就是把“類型代碼”全部拿掉,只保留“值代碼”。
編寫 TypeScript 項目時,不要混淆哪些是值代碼,哪些是類型代碼。
TypeScript Playground
最簡單的 TypeScript 使用方法,就是使用官網(wǎng)的在線編譯頁面,叫做 TypeScript Playground。
只要打開這個網(wǎng)頁,把 TypeScript 代碼貼進文本框,它就會在當前頁面自動編譯出 JavaScript 代碼,還可以在瀏覽器執(zhí)行編譯產(chǎn)物。如果編譯報錯,它也會給出詳細的報錯信息。
這個頁面還具有支持完整的 IDE 支持,可以自動語法提示。此外,它支持把代碼片段和編譯器設置保存成 URL,分享給他人。
本書的示例都建議放到這個頁面,進行查看和編譯。
tsc 編譯器
TypeScript 官方提供的編譯器叫做 tsc,可以將 TypeScript 腳本編譯成 JavaScript 腳本。本機想要編譯 TypeScript 代碼,必須安裝 tsc。
根據(jù)約定,TypeScript 腳本文件使用.ts后綴名,JavaScript 腳本文件使用.js后綴名。tsc 的作用就是把.ts腳本轉(zhuǎn)變成.js腳本。
安裝
tsc 是一個 npm 模塊,使用下面的命令安裝(必須先安裝 npm)。