TypeScript
本篇為以下資源之學習筆記:
根據 TypeScript 官網 說明:
TypeScript extends JavaScript by adding types.
By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.
Any browser, any OS, anywhere JavaScript runs. Entirely Open Source.
將上述文字翻譯成中文:
TypeScript 透過增加型別定義來擴展 JavaScript。
透過瞭解 JavaScript,TypeScript 可在執行程式碼之前找到錯誤並提供修復,節省開發除錯的時間。
可在任何瀏覽器、任何作業系統、任何能運行 JavaScript 的地方執行。並且是完全開源的。
簡單來說,TypeScript 是⋯⋯
(圖片來源:Angular TypeScript Vs ES6 Vs ES5)
由於 JavaScript 是弱型別語言,TypeScript 的出現就是為了解決這個問題。
而 TypeScript 就是原生 JavsScript 的延伸,包含 ES3、ES5 與 ES6+ 語法,以及本身的擴充內容,也就是說,TypeScript 具備以下特性:
具體而言,TypeScript 和 JavsCript 的差別在哪呢?以下舉簡單的例子說明:
原生 JavaScript:
TypeScript:
可以發現差別就在於「型別」,關於 TypeScript 如何處理型別,主要可分為這三個概念,也就是所謂的型別系統:
在上述範例中,TypeScript 透過 Type annotation(型別註解),在參數或變數之後加上冒號 : type
,繼續以剛才的例子說明:
一旦宣告型別,就不能使用其他資料型別進行賦值,否則程式就會報錯(但 TypeScript Compiler 還是會編譯成 JS 檔)。
像這樣藉由 Type Annotation(型別註解)執行靜態型別檢查,可有效預防運行錯誤,並統一規格、提高程式碼的可讀性,以方便多人協作。
JavaScript 的型別分為兩種:原始資料型別(Primitive data types)和物件型別(Object types)。
在 TypeScript 中,除了上述這些型別,還有像是空值(Void)、任意型別(any)、Never 等特殊型別。
在 JavaScript 沒有空值(Void)的概念,而在 TypeScript 中,通常用 void 表示沒有任何 return 值的 function:
參考資料:【Day 15】TypeScript 資料型別 - 特殊型別(上)- Never
其實就類似在 JavaScript 使用 var 宣告變數。一旦將變數宣告成 any 型別,或在定義時沒有賦值,不管之後有沒有賦值,都會被推斷成 any 型別,完全不會進行型別檢查:
注意:不要濫用 any 任意型別,否則將失去型別檢查保障!
表示陣列的方式,大致可分為以下幾種:
type[]
Array<elemType>
比較簡單,也較常使用的方法是以「型別 + 方括號」來表示陣列:
一旦宣告型別,陣列的項中就不允許出現其他型別,否則會報錯:
常使用 any 來表示陣列中允許出現任意型別:
我們也可以使用陣列泛型(Array Generic) Array<elemType>
來表示陣列:
以下方程式碼為例:
經過 TSC(TypeScript Compiler)後,會得到下方結果:
接著以番茄鐘為例,假設 Timer 有三種狀態,分別是停止、暫停、計時,即可列舉下列複合型別:
在 TS 檔中檢視上述範例程式碼,會發現不管有無明確註記型別,TypeScript 編譯器都會依照「型別推論」的規則,自動推斷出一個資料型別。
又以下方程式碼為例,雖然沒有指定值的型別,卻會在編譯時報錯:
這是因為在宣告變數並賦值時,TypeScript 編譯器就已經自動從程式碼推斷出 myFavoriteNumber 是字串型別,若嘗試以非字串的資料賦值時就會報錯!
對 TypeScript 編譯器來說,上方程式碼其實就等同於:
由於型別推論是 TypeScript 被動的防護機制,不管在什麼情況下都會自動推論型別,即使想故意註記一個錯誤,透過 TypeScript 的運算機制,仍會跳出錯誤訊息:
但實際在開發時,專案的資料型別也會越發複雜,不能只仰賴 TypeScript 單純的推論,這時就需要適時搭配型別斷言。
開發者能藉由手動指定一個值的型別,覆蓋 TypeScript 編譯器的推論,避免出現警告錯誤,這個機制就是「型別斷言」。
型別斷言有兩種寫法:
<型別>值
(angle-bracket <>)值 as 型別
(as keyword)兩者語法效果相同,但如果是在 React 專案中,使用 JSX 語法時只能用第二種。
在聯合型別的情境下,表示值可以是多種型別的其中一種。以下方程式碼為例,getLength 的參數可能是字串或數字,但因為 length 不為字串和數字的共同屬性,因此會報錯:
這時可使用型別斷言,將 something 指定為字串型別(如:<string>something
),即可避免報錯:
接下來,在深入探討 TypeScript 與 ES6+ 差別之前,先來稍微回顧一些常用的 ES6+(或稱 ES2015)語法吧!
...
運算子在複習了 ES6+ 語法之後,究竟 TypeScript 除了型別系統,還提供哪些重要的酷東西呢?為什麼不寫 ES6+ 就好?
主要可分為三個方面:
Interface 被稱作介面或是接口,在物件導向程式語言中,用來定義抽象物件的型別,又被稱作是 TypeScript 的一個型別檢查工具。
因為介面只做描述,不做動作。
主要用於定義 Class(類別)行為,介面只會描述有哪些 Method(方法)和 Property(屬性),不包含怎麼執行,也就是說,具體行為必須由 Class 實現(implement)。
賦值的時候,Class 需和介面定義的行為保持一致。
舉例來說:
當 Class 用 implements 指定要實作的 Interface,除了可選屬性(在屬性名稱後方加上問號 ?
),必須實作介面內所有的 Method 和 Property,否則會在編譯時報錯。
這篇是在剛接觸 Angular 框架時,寫下的學習筆記。偶爾會被問說,覺得學新框架最大的困難處在哪?其實 Angular 和 React 要說不同,也不盡然完全相差甚遠,或許實作方法不一樣,卻還是能用共通的邏輯去思考問題。
反而時常會卡關的地方,是在 TypeScript 型別判定上,為什麼這裡型別檢查這麼嚴格?難道我一定要給個 any 才會過嗎?直到學會如何定義 Interface 之後,後續開發就會順利不少,尤其是在打電文時更是如此,能事先統一 Request 和 Response 的格式,就比較不容易出現意外的錯誤。