# TypeScript - 認識與安裝 TypeScript

## 什麼是 TypeScript
根據 [官網](https://www.typescriptlang.org/)的定義：

> 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](https://github.com/Microsoft/TypeScript) 上

圖片來源：[Angular TypeScript Vs ES6 Vs ES5](https://www.sneppets.com/angular/typescript-vs-es6-vs-es5/)

:::info
**超集（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 編譯錯誤

:::info
TypeScript 是**靜態型別系統**的程式語言，在**編譯**時做型別檢查；
Javascript 是**動態型別系統**的程式語言，在**執行**時做型別檢查。
:::

## 使用 TypeScript 的好處

#### 撰寫更好懂、更好維護的程式碼，並減少 bug 的產生
- 透過型別系統可提高程式碼的可讀性，大部分的函式在看到型別定義時大概就能夠知道該如何使用
- TypeScript 的強型別讓我們可以在編譯時就預先進行靜態型別檢查，不必等到執行的時候才報錯
- 增強了編譯器和 IDE 的功能，像是自動完成、介面提示、跳轉到定義、重構等

#### TypeScript 非常包容
- TypeScript 是 JavaScript 的超集，`.js` 檔案可以直接重新命名為 `.ts`
- TypeScript 的編譯器可以自由地設定讓專案編譯成想要的 JS 版本
- 即使不顯示定義型別， TypeScript 也能夠自動做出「型別推論」
- 可以定義從簡單到複雜的幾乎一切型別：除了 Javascript 的型別之外，Typescript 還提供了像是**空值（Void）**、**任意型別（any）**、**Never** 等特殊型別
- 即使 TypeScript 編譯報錯，仍然可以產生 JavaScript 檔案
- 相容第三方函式庫，即使第三方函式庫不是用 TypeScript 寫的，也可以編寫單獨的型別檔案供 TypeScript 讀取

## 安裝 Typescript
> https://www.npmjs.com/package/typescript

**在全域環境安裝 TypeScript：**

npm install -g typescript

在全域性環境下安裝 Typescript ，之後就可以在任何地方執行 `tsc` 命令。

**建立 Typescript 編譯器的設定檔 `tsconfig.json`：**

tsc --init

**編譯一個 TypeScript 檔案：**

tsc index.ts

或是**直接編譯同一個檔案資料夾下所有 Typescript 檔案：**

tsc

TypeScript 編譯器就會幫我們自動掃描所有 `.ts` 結尾的檔案，並且編譯成 JS 檔案。

:::info
使用 TypeScript 編寫的檔案以 `.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 程式碼**：

:::info
如果要在報錯的時候終止 JS 檔案的產生，可以在 `tsconfig.json` 中配置 `noEmitOnError` 即可。關於 `tsconfig.json`，請參閱[官方手冊](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)。
:::

## Ref
- [從零開始學 TypeScript 計畫](https://blog.anna-yufeng.com/series/typescript-from-scratch)
- [【學習筆記】TypeScript 基礎入門：從型別談起](https://hackmd.io/@Heidi-Liu/typescript#%E3%80%90%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98%E3%80%91TypeScript-%E5%9F%BA%E7%A4%8E%E5%85%A5%E9%96%80%EF%BC%9A%E5%BE%9E%E5%9E%8B%E5%88%A5%E8%AB%87%E8%B5%B7)