TypeScript（一）TypeScript 的特性（靜態型別、弱型別）、編譯時報錯、安裝

• 網址：https://ts.xcatliu.com/

1. 什么是 TypeScript

Typed JavaScript at Any Scale.
添加了型別系統的 JavaScript，適用于任何規模的專案，

以上描述是官網[1]對于 TypeScript 的定義，

它強調了 TypeScript 的兩個最重要的特性——型別系統、適用于任何規模，

TypeScript 的特性

型別系統

從 TypeScript 的名字就可以看出來，「型別」是其最核心的特性，

我們知道，JavaScript 是一門非常靈活的編程語言：

• 它沒有型別約束，一個變數可能初始化時是字串，過一會兒又被賦值為數字，
• 由于隱式型別轉換的存在，有的變數的型別很難在運行前就確定，
• 基于原型的面向物件編程，使得原型上的屬性或方法可以在運行時被修改，
• 函式是 JavaScript 中的一等公民[2]，可以賦值給變數，也可以當作引數或回傳值，

這種靈活性就像一把雙刃劍，一方面使得 JavaScript 蓬勃發展，無所不能，從 2013 年開始就一直蟬聯最普遍使用的編程語言排行榜冠軍[3]；另一方面也使得它的代碼質量參差不齊，維護成本高，運行時錯誤多，

而 TypeScript 的型別系統，在很大程度上彌補了 JavaScript 的缺點，

TypeScript 是靜態型別

型別系統按照「型別檢查的時機」來分類，可以分為動態型別和靜態型別，

動態型別是指在運行時才會進行型別檢查，這種語言的型別錯誤往往會導致運行時錯誤，JavaScript 是一門解釋型語言[4]，沒有編譯階段，所以它是動態型別，以下這段代碼在運行時才會報錯：

let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 運行時會報錯（foo.split 不是一個函式），造成線上 bug

靜態型別是指編譯階段就能確定每個變數的型別，這種語言的型別錯誤往往會導致語法錯誤，TypeScript 在運行前需要先編譯為 JavaScript，而在編譯階段就會進行型別檢查，所以 TypeScript 是靜態型別，這段 TypeScript 代碼在編譯階段就會報錯了：

let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 編譯時會報錯（數字沒有 split 方法），無法通過編譯

你可能會奇怪，這段 TypeScript 代碼看上去和 JavaScript 沒有什么區別呀，

沒錯！大部分 JavaScript 代碼都只需要經過少量的修改（或者完全不用修改）就變成 TypeScript 代碼，這得益于 TypeScript 強大的[型別推論][]，即使不去手動宣告變數 foo 的型別，也能在變數初始化時自動推論出它是一個 number 型別，

完整的 TypeScript 代碼是這樣的：

let foo: number = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 編譯時會報錯（數字沒有 split 方法），無法通過編譯

TypeScript 是弱型別

型別系統按照「是否允許隱式型別轉換」來分類，可以分為強型別和弱類型，

以下這段代碼不管是在 JavaScript 中還是在 TypeScript 中都是可以正常運行的，運行時數字 1 會被隱式型別轉換為字串 '1'，加號 + 被識別為字串拼接，所以列印出結果是字串 '11'，

console.log(1 + '1');
// 列印出字串 '11'

TypeScript 是完全兼容 JavaScript 的，它不會修改 JavaScript 運行時的特性，所以它們都是弱型別，

作為對比，Python 是強型別，以下代碼會在運行時報錯：

print(1 + '1')
# TypeError: unsupported operand type(s) for +: 'int' and 'str'

若要修復該錯誤，需要進行強制型別轉換：

print(str(1) + '1')
# 列印出字串 '11'

強/弱是相對的，Python 在處理整型和浮點型相加時，會將整型隱式轉換為浮點型，但是這并不影響 Python 是強型別的結論，因為大部分情況下 Python 并不會進行隱式型別轉換，相比而言，JavaScript 和 TypeScript 中不管加號兩側是什么型別，都可以通過隱式型別轉換計算出一個結果——而不是報錯——所以 JavaScript 和 TypeScript 都是弱型別，

雖然 TypeScript 不限制加號兩側的型別，但是我們可以借助 TypeScript 提供的型別系統，以及 ESLint 提供的代碼檢查功能，來限制加號兩側必須同為數字或同為字串[5]，這在一定程度上使得 TypeScript 向「強型別」更近一步了——當然，這種限制是可選的，

這樣的型別系統體現了 TypeScript 的核心設計理念[6]：在完整保留 JavaScript 運行時行為的基礎上，通過引入靜態型別系統來提高代碼的可維護性，減少可能出現的 bug，

適用于任何規模

TypeScript 非常適用于大型專案——這是顯而易見的，型別系統可以為大型專案帶來更高的可維護性，以及更少的 bug，

在中小型專案中推行 TypeScript 的最大障礙就是認為使用 TypeScript 需要寫額外的代碼，降低開發效率，但事實上，由于有[型別推論][]，大部分型別都不需要手動宣告了，相反，TypeScript 增強了編輯器（IDE）的功能，包括代碼補全、介面提示、跳轉到定義、代碼重構等，這在很大程度上提高了開發效率，而且 TypeScript 有近百個[編譯選項][]，如果你認為型別檢查過于嚴格，那么可以通過修改編譯選項來降低型別檢查的標準，

TypeScript 還可以和 JavaScript 共存，這意味著如果你有一個使用 JavaScript 開發的舊專案，又想使用 TypeScript 的特性，那么你不需要急著把整個專案都遷移到 TypeScript，你可以使用 TypeScript 撰寫新檔案，然后在后續更迭中逐步遷移舊檔案，如果一些 JavaScript 檔案的遷移成本太高，TypeScript 也提供了一個方案，可以讓你在不修改 JavaScript 檔案的前提下，撰寫一個[型別宣告檔案][]，實作舊專案的漸進式遷移，

事實上，就算你從來沒學習過 TypeScript，你也可能已經在不知不覺中使用到了 TypeScript——在 VSCode 編輯器中撰寫 JavaScript 時，代碼補全和介面提示等功能就是通過 TypeScript Language Service 實作的[7]：

一些第三方庫原生支持了 TypeScript，在使用時就能獲得代碼補全了，比如 Vue 3.0[8]：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AAZLAcDU-1635059102872)(https://ts.xcatliu.com/assets/what-is-typescript-vue.png)]

有一些第三方庫原生不支持 TypeScript，但是可以通過安裝社區維護的型別宣告庫[9]（比如通過運行 npm install --save-dev @types/react 來安裝 React 的型別宣告庫）來獲得代碼補全能力——不管是在 JavaScript 專案中還是在 TypeScript 中專案中都是支持的：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Qu06tt4p-1635059102874)(https://ts.xcatliu.com/assets/what-is-typescript-react.png)]

由此可見，TypeScript 的發展已經深入到前端社區的方方面面了，任何規模的專案都或多或少得到了 TypeScript 的支持，

與標準同步發展

TypeScript 的另一個重要的特性就是堅持與 ECMAScript 標準[10]同步發展，

ECMAScript 是 JavaScript 核心語法的標準，自 2015 年起，每年都會發布一個新版本，包含一些新的語法，

一個新的語法從提案到變成正式標準，需要經歷以下幾個階段：

• Stage 0：展示階段，僅僅是提出了討論、想法，尚未正式提案，
• Stage 1：征求意見階段，提供抽象的 API 描述，討論可行性，關鍵演算法等，
• Stage 2：草案階段，使用正式的規范語言精確描述其語法和語意，
• Stage 3：候選人階段，語法的設計作業已完成，需要瀏覽器、Node.js 等環境支持，搜集用戶的反饋，
• Stage 4：定案階段，已準備好將其添加到正式的 ECMAScript 標準中，

一個語法進入到 Stage 3 階段后，TypeScript 就會實作它，一方面，讓我們可以盡早的使用到最新的語法，幫助它進入到下一個階段；另一方面，處于 Stage 3 階段的語法已經比較穩定了，基本不會有語法的變更，這使得我們能夠放心的使用它，

除了實作 ECMAScript 標準之外，TypeScript 團隊也推進了諸多語法提案，比如可選鏈運算子（?.）[11]、空值合并運算子（??）[12]、Throw 運算式[13]、正則匹配索引[14]等，

總結

什么是 TypeScript？

• TypeScript 是添加了型別系統的 JavaScript，適用于任何規模的專案，
• TypeScript 是一門靜態型別、弱型別的語言，
• TypeScript 是完全兼容 JavaScript 的，它不會修改 JavaScript 運行時的特性，
• TypeScript 可以編譯為 JavaScript，然后運行在瀏覽器、Node.js 等任何能運行 JavaScript 的環境中，
• TypeScript 擁有很多編譯選項，型別檢查的嚴格程度由你決定，
• TypeScript 可以和 JavaScript 共存，這意味著 JavaScript 專案能夠漸進式的遷移到 TypeScript，
• TypeScript 增強了編輯器（IDE）的功能，提供了代碼補全、介面提示、跳轉到定義、代碼重構等能力，
• TypeScript 擁有活躍的社區，大多數常用的第三方庫都提供了型別宣告，
• TypeScript 與標準同步發展，符合最新的 ECMAScript 標準（stage 3），

2. 安裝 TypeScript

TypeScript 的命令列工具安裝方法如下：

npm install -g typescript

以上命令會在全域環境下安裝 tsc 命令，安裝完成之后，我們就可以在任何地方執行 tsc 命令了，

編譯一個 TypeScript 檔案很簡單：

tsc hello.ts

我們約定使用 TypeScript 撰寫的檔案以 .ts 為后綴，用 TypeScript 撰寫 React 時，以 .tsx 為后綴，

編輯器

TypeScript 最大的優勢之一便是增強了編輯器和 IDE 的功能，包括代碼補全、介面提示、跳轉到定義、重構等，

主流的編輯器都支持 TypeScript，這里我推薦使用 Visual Studio Code，

它是一款開源，跨終端的輕量級編輯器，內置了對 TypeScript 的支持，

另外它本身也是用 TypeScript 撰寫的，

下載安裝：https://code.visualstudio.com/

獲取其他編輯器或 IDE 對 TypeScript 的支持：

• Sublime Text
• WebStorm
• Vim
• Emacs
• Eclipse
• Atom
• [Visual Studio 2019](https://marketplace.visualstudio.com/search?term=TypeScriptTeam&target=VS&category=All categories&vsVersion=vs2019&sortBy=UpdatedDate)
• [Visual Studio 2017](https://marketplace.visualstudio.com/search?term=TypeScriptTeam&target=VS&category=All categories&vsVersion=vs15&sortBy=UpdatedDate)

3. Hello TypeScript

我們從一個簡單的例子開始，

將以下代碼復制到 hello.ts 中：

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = 'Tom';
console.log(sayHello(user));

然后執行

tsc hello.ts

這時候會生成一個編譯好的檔案 hello.js：

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

在 TypeScript 中，我們使用 : 指定變數的型別，: 的前后有沒有空格都可以，

上述例子中，我們用 : 指定 person 引數型別為 string，但是編譯為 js 之后，并沒有什么檢查的代碼被插入進來，

這是因為 TypeScript 只會在編譯時對型別進行靜態檢查，如果發現有錯誤，編譯的時候就會報錯，而在運行時，與普通的 JavaScript 檔案一樣，不會對型別進行檢查，

如果我們需要保證運行時的引數型別，還是得手動對型別進行判斷：

function sayHello(person: string) {
    if (typeof person === 'string') {
        return 'Hello, ' + person;
    } else {
        throw new Error('person is not a string');
    }
}

let user = 'Tom';
console.log(sayHello(user));

let 是 ES6 中的關鍵字，和 var 類似，用于定義一個區域變數，可以參閱 let 和 const 命令，

下面嘗試把這段代碼編譯一下：

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = [0, 1, 2];
console.log(sayHello(user));

編輯器中會提示錯誤，編譯的時候也會出錯：

hello.ts:6:22 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

但是還是生成了 js 檔案：

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = [0, 1, 2];
console.log(sayHello(user));

這是因為 TypeScript 編譯的時候即使報錯了，還是會生成編譯結果，我們仍然可以使用這個編譯之后的檔案，

如果要在報錯的時候終止 js 檔案的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可，關于 tsconfig.json，請參閱官方手冊（中文版），