【TypeScript 小教室 02】

Q: 想學 TypeScript, 為什麼還是得先學 JavaScript 呢？不是說 TypeScript 就是用來解決 JavaScript 的問題嗎？

* * *

A: TypeScript 雖然能強化 JavaScript, 最終產出的依然是JavaScript 程式碼, 因為這是瀏覽器與 Node.js 等環境的通用語言。某些開發者之所以採用 TypeScript, 是因為他們想撰寫網頁應用程式, 卻又不想學JavaScript。這些人看到 TypeScript 是微軟推出的, 誤以為 TypeScript 是C# 或 Java 語言的網頁版, 結果就陷入了愁雲慘霧。

所以若要有效活用 TypeScript, 你就得對 JavaScript 語言本身有充足的認識, 並理解它為何會有某些奇怪的行為。本書第 3 章與第 4 章會帶各位快速入門 JavaScript 基礎、講解它的古怪特性, 好讓讀者能更充分理解TypeScript 這項工具的強大之處。

--- 旗標出版《TypeScript 邁向專家之路》Ch.2

* * *

我們來看書中第三章開頭提到的一個例子：

* * *

在 JavaScript 中, 當算符 ( 或稱運算子, 比如加減乘除) 被套用到不同型別的值時, JavaScript 執行環境會將其中一個轉換為另一個型別的值, 這個過程叫做強制轉型 (type coercion)。前面 index.js 執行後產生的詭異結果 ( 判定數值的 100 與字串的 100 相等, 以及相加兩者變成兩者相連) 便是發生了兩次強制轉型的結果, 但若你曉得這特色是如何運作的, 就知道它其實是預料中的結果。

let hatPrice = 100; // 數值

let bootsPrice = "100"; // 字串

// 判斷 hatPrice 的值是否和 bootsPrice 相等

if (hatPrice == bootsPrice) {

console.log("Prices are the same");

} else {

console.log("Prices are different");

}

這段程式碼執行後將產生下列結果：

Prices are the same

在 JavaScript 語法中, 雙等號 == 表示進行的是一般相等比較 (abstract equality comparison), 它會先將兩個變數的值轉換為相同的型別, 好產生有意義的比較結果。例如, 在比較數值與字串這兩種不同型別時, 字串值會被自動轉換為數值, 然後再進行比較。所以當 if 在比較hatPrice 是否等於 bootPrice 時, bootPrice 的 100 便從字串被轉成了數值, 這就是為什麼它們的比較結果會是 true ( 被認為相等)。...

--- 旗標出版《TypeScript 邁向專家之路》Ch.3

* * *

不過, 要是你將這段程式碼拿去給 TypeScript 編譯器編譯, 它會自動隱性推論 (見第 7 章) hatPrice 為 number 型別, bootsPrice 則是 string 型別, 而且用 == 比較時也不會發生強制轉型。你反而會得到一個錯誤訊息：

error TS2367: This condition will always return 'false' since the types 'number' and 'string' have no overlap.

(自己玩玩看：https://pse.is/3rnxv7)

這個錯誤訊息其實也是 TypeScript 的型別防衛敘述 (type guard) 發揮了作用, 告訴你說拿 number 和 string 型別比較是絕不可能成立的, 因此 if...else 裡只有 else 條件會執行。本書第 7 章與後續章節會談到更多 type guard 的使用情境。

由上可知, 藉由 TypeScript 的強大功能, 你就能避免程式碼中難以除錯的無心之過 (例如意外將字串打成數值), 並在 JS 程式執行之前就揪出問題。

去哪裡買 旗標出版《TypeScript 邁向專家之路》?
https://pse.is/3mr25v