TypeScript - 認識與安裝 TypeScript
什麼是 TypeScript
根據 官網的定義：
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.
TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.
TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.
TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.
TypeScript 是 Javascript 的超集 (superset)，為 JS 提供了額外的語法
TypeScript 主要提供了型別系統和對 ES6 的支援
TypeScript 支援 ES6，並可以被編譯成純 Javascript
TypeScript 可以運行於任何能夠運行 Javascript 的伺服器和系統上
TypeScript 由 Microsoft 開發，程式碼開源於 GitHub 上
圖片來源：Angular TypeScript Vs ES6 Vs ES5
超集（Superset） 是指包含或涵蓋另一個集合的集合。如果集合 A 中的所有元素也是集合 B 中的元素，那麼集合 A 就是集合 B 的超集。
以程式語言為例，如果 A 語言為 B 語言的超集，意思就是 A 語言包含了 B 語言的所有語法和功能，並且還可能擴展了其他額外的語法和功能。
在這個情況下，A 語言就稱為「超集」，而 B 語言則被稱為「子集」。
為什麼會需要 TypeScript
Javascript 是一個弱型別語言(Loosely typed language)，在 JS 宣告變數時不需要特別定義它的型別，因此我們很難一眼看出函式的參數和變數是什麼型別，可能會因為傳入了錯誤型別的資料而導致程式碼出錯。TypeScript 的出現就是為了解決這個問題。
TypeScript 具備了以下的特性：
Strong typing 強型別：變數的型別在宣告時就已經確定
Object-oriented-features 物件導向特性：TypeScript 支援介面(Interface)、類別(Class)和物件(Object)
Compile-time errors 編譯錯誤
使用 TypeScript 的好處
撰寫更好懂、更好維護的程式碼，並減少 bug 的產生
透過型別系統可提高程式碼的可讀性，大部分的函式在看到型別定義時大概就能夠知道該如何使用
TypeScript 的強型別讓我們可以在編譯時就預先進行靜態型別檢查，不必等到執行的時候才報錯
增強了編譯器和 IDE 的功能，像是自動完成、介面提示、跳轉到定義、重構等
TypeScript 非常包容
TypeScript 是 JavaScript 的超集，
.js檔案可以直接重新命名為.tsTypeScript 的編譯器可以自由地設定讓專案編譯成想要的 JS 版本
即使不顯示定義型別， TypeScript 也能夠自動做出「型別推論」
可以定義從簡單到複雜的幾乎一切型別：除了 Javascript 的型別之外，Typescript 還提供了像是空值（Void）、任意型別（any）、Never 等特殊型別
即使 TypeScript 編譯報錯，仍然可以產生 JavaScript 檔案
相容第三方函式庫，即使第三方函式庫不是用 TypeScript 寫的，也可以編寫單獨的型別檔案供 TypeScript 讀取
安裝 Typescript
在全域環境安裝 TypeScript：
npm install -g typescript
在全域性環境下安裝 Typescript ，之後就可以在任何地方執行 tsc 命令。
建立 Typescript 編譯器的設定檔 tsconfig.json：
tsc --init
編譯一個 TypeScript 檔案：
tsc index.ts
或是直接編譯同一個檔案資料夾下所有 Typescript 檔案：
tsc
TypeScript 編譯器就會幫我們自動掃描所有 .ts 結尾的檔案，並且編譯成 JS 檔案。
.ts 為字尾； 用 TypeScript 編寫 React 時，以 .tsx 為字尾。Hello Typescript
建立 index.ts 檔案，並撰寫一些 TypeScript 程式碼：
// index.ts
function sayHello(something: string) {
return 'Hello, ' + something;
}
let message = 'Typescript';
console.log(sayHello(message));
編譯檔案：
tsc index.ts
這時候會產生一個編譯好的檔案 index.js：
// index.js
function sayHello(something) {
return 'Hello, ' + something;
}
let message = 'Typescript';
console.log(sayHello(message));
左邊為原本的 index.ts，右邊為編譯後的 index.js：
使用
:指定參數something的型別為string（:的前後有沒有空格都可以）編譯後的 JS 程式碼並不會插入任何檢查的程式碼
再把 message 改成陣列試試看：
function sayHello(something: string) {
return 'Hello, ' + something;
}
let message = [0, 1, 2];
console.log(sayHello(message));
這時候可以看到編輯器中的錯誤提示以及編譯後出現的錯誤訊息：
Argument of type 'number[]' is not assignable to parameter of type 'string'.
儘管 Typescript 在編譯的時候報錯，仍然可以產生 JS 程式碼：
