What is TypeScript？
1 | TypeScript = JavaScript + A type System |
TypeScript 是基於 JavaScript 加上強大的型別系統。
Why use TypeScript?
- 因為 TypeScript 簡化了 JavaScript，也包含物件導向的概念，因此也提高了程式碼的可讀性和可維護性
- TypeScript 會進行型別的檢查，幫助我們在開發時就抓出錯誤並提示，有別於以往 JavaScript 需要運行才能發現錯誤
- TypeScript 是開源的
- 完全相容 JavaScript 語法，可循序漸進的學習
How to start?
還沒有安裝環境前，我們可以透過線上的 TypeScript 編譯器來練習
安裝
全域安裝 typescript 環境和 ts-node1
npm install -g typescript ts-node
安裝 ts-node 是整合 tsc 和 node 指令，讓編譯與運行可以透過一個指令完成。
從簡單練習快速了解 TypeScript
這邊的練習主要是從熟悉的 JavaScript 函式帶到一些 TypeScript 語法，讓讀者可以透過簡單的範例內容了解 TypeScript 的益處。
- 創建資料夾，並新增一個 index.ts
在 index.ts 中寫程式碼（這邊寫的都是 JavaScript 的函式寫法）
1
2
3
4function starter(word) {
console.log('learn TypeScript : ' + word);
}
starter('Hello World');終端運行 tsc index.ts，可以發現資料中多了一個編譯後的 index.js
- 而再次運行 node index.js 可以發現出現 console.log 的內容
而這邊的第 3 步驟與第 4 步驟也可以改用我們剛剛安裝的 ts-node 直接做 ts 檔案的運行（這個指令不會另外編譯 js 檔案）1
ts-node inedex.ts
- 接下來這一步就會使用到 TypeScript 中的 Type Annotations
Type Annotations 常被翻譯為型別註釋，用來說明變數或是參數的型別。
如同下方函式參數，加上型別註釋讓 word 為 string。1
2
3
4
5function starter(word: string) {
console.log('learn TypeScript : ' + word);
}
starter('Hello World');
starter(true); // error TS2345: Argument of type 'true' is not assignable to parameter of type 'string'.
當呼叫函式並傳入非 string 的值時，就會出現編譯的錯誤訊息。
- 接著再來體驗一下 TypeScript 中的 Interfaces
Interface 常被翻譯為介面或是接口，可用來定義結構化的子類型。1
2
3
4
5
6
7
8
9
10
11interface StartData {
firstWord: string;
lastWord: boolean;
}
function starterInterface(word: StartData) {
console.log('learn TypeScript : ' + word.firstWord + '' + word.lastWord)
}
starterInterface({ firstWord: 'Hello', lastWord: 'World' })
// error TS2322: Type 'string' is not assignable to type 'boolean'.
上面的程式碼編譯後可以發現因為 lastWord 指令的型別是 boolean，但卻傳入字串而出現錯誤。
將傳入的內容改為 { firstWord: 'Hello', lastWord: true } 就 ok 啦～
從以上兩個簡短的範例就可以了解使用 TypeScript 為何可以減低很多不必要的錯誤，讓結構更為嚴謹，在往後維護上也可以更便利。
參考資料：
TypeScript 新手指南
TypeScript in 5 minutes
Udemy - Typescript: The Complete Developer’s Guide 2020