[](https://hackmd.io/J-lzcW66RdiACrDtUa9Xpg)
###### tags: `TypeScript`
# 【學習筆記】TypeScript 基礎入門：從型別談起

[TOC]

本篇為以下資源之學習筆記：
- [Github - microsoft/TypeScript](https://github.com/microsoft/TypeScript)
- [TypeScript 新手指南](https://willh.gitbook.io/typescript-tutorial/)
- [Angular Tutorial for Beginners: Learn Angular & TypeScript - Programming with Mosh
](https://www.youtube.com/watch?v=k5E2AVpwsko)

## 什麼是 TypeScript？


根據 [TypeScript 官網](https://www.typescriptlang.org/) 說明：

> 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 是⋯⋯

- 一個基於 JavaScript 的超集合（SuperSet）
- 提供型別系統（Type System），能夠在開發時期宣告型別
- 支援 ECMAScript，可將 TS 檔編譯成 JS 檔給瀏覽器解讀

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

## 型別系統 Type System

由於 JavaScript 是弱型別語言，TypeScript 的出現就是為了解決這個問題。

而 TypeScript 就是原生 JavsScript 的延伸，包含 ES3、ES5 與 ES6+ 語法，以及本身的擴充內容，也就是說，TypeScript 具備以下特性：

- Strong typing 強型別
- Object-oriented-features 物件導向特性
- Compile-time errors 編譯錯誤

具體而言，TypeScript 和 JavsCript 的差別在哪呢？以下舉簡單的例子說明：

原生 JavaScript：

function sayHello(person) {
    return 'Hello, ' + person;
}

let name = 'Heidi';
console.log(sayHello(name));

TypeScript：

function sayHello(person: string) {  // 傳入的參數
    return 'Hello, ' + person;
}

let name: string = 'Heidi';    // 宣告的變數
console.log(sayHello(name));

可以發現差別就在於「型別」，關於 TypeScript 如何處理型別，主要可分為這三個概念，也就是所謂的型別系統：

* Type annotation（型別註解）
* 主動，大多使用在初始化階段，例如宣告變數或函式參數等
* Type Inference（型別推論）
* 被動，自動推論資料型別的機制
* Type Assertion（型別斷言）
* 主動，通常用於接收外部參數，需明確指定資料型別

### 型別註解 Type annotation

在上述範例中，TypeScript 透過 Type annotation（型別註解），在參數或變數之後加上冒號 `: type`，繼續以剛才的例子說明：

// 變數的型別註解
let name: string = 'Heidi';   

// 函式參數/回傳值的型別註解
function sayHello(person: string): string {
    return 'Hello, ' + person;
}

一旦宣告型別，就不能使用其他資料型別進行賦值，否則程式就會報錯（但 TypeScript Compiler 還是會編譯成 JS 檔）。

像這樣藉由 Type Annotation（型別註解）執行靜態型別檢查，可有效預防運行錯誤，並統一規格、提高程式碼的可讀性，以方便多人協作。

### 複習：JavaScript 型別

JavaScript 的型別分為兩種：原始資料型別（Primitive data types）和物件型別（Object types）。

- 原始資料型別
- boolean 布林值
- number 數值
- string 字串
- null 空值
- undefined 未定義
- Symbol（於 ES6 新定義）
- 物件型別
- Object 物件
- Array 陣列
- Function 函式

在 TypeScript 中，除了上述這些型別，還有像是空值（Void）、任意型別（any）、Never 等特殊型別。

### 空值 Void：沒有回傳值

在 JavaScript 沒有空值（Void）的概念，而在 TypeScript 中，通常用 void 表示沒有任何 return 值的 function：

function alertName(): void {
    alert('My name is Heidi!');
}

// 若宣告一個 void 型別的變數，只能賦值為 null 或 undefined
let unusable: void = undefined;

### 補充：void 與 never 的差異

- Void 型別
- 沒有回傳值，函式會繼續執行到結束

let noReturn = function sayHello(){
   console.log('hello');      // 不會有回傳值
}


- Never 型別
- 應該要回傳，但因為函式中斷執行或進入無窮迴圈，永遠不會有回傳值的函式
- 常用於處理函式的錯誤

let neverEnd = function forever(){
   while(true){    // 無窮迴圈
     // code
   }
}


參考資料：[【Day 15】TypeScript 資料型別 - 特殊型別(上)- Never](https://ithelp.ithome.com.tw/articles/10222916)

### 任意型別 any：不檢查型別

其實就類似在 JavaScript 使用 var 宣告變數。一旦將變數宣告成 any 型別，或在定義時沒有賦值，不管之後有沒有賦值，都會被推斷成 any 型別，完全不會進行型別檢查：

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;


> 注意：不要濫用 any 任意型別，否則將失去型別檢查保障！

### 陣列型別 Array

表示陣列的方式，大致可分為以下幾種：
- 型別 + 方括號：`type[]`
- 陣列泛型（Array Generic）：`Array<elemType>`
- 用介面表示陣列
- 類別陣列（Array-like Object）

比較簡單，也較常使用的方法是以「型別 + 方括號」來表示陣列：

let fibonacci: number[] = [1, 1, 2, 3, 5];

一旦宣告型別，陣列的項中就不允許出現其他型別，否則會報錯：

let fibonacci: number[] = [1, '1', 2, 3, 5];

// Type 'string' is not assignable to type 'number'.

常使用 any 來表示陣列中允許出現任意型別：

let list: any[] = ['heidiliu', 99, { website: 'https://github.com/heidiliu2020' }];

我們也可以使用陣列泛型（Array Generic） `Array<elemType>` 來表示陣列：

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

### 列舉型別 enum

以下方程式碼為例：

enum Color {Red, Green, Blue};    // 0, 1, 2
let c: Color = Color.Green;       // 1

經過 TSC（TypeScript Compiler）後，會得到下方結果：

"use strict";
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
;
let c = Color.Green;

接著以番茄鐘為例，假設 Timer 有三種狀態，分別是停止、暫停、計時，即可列舉下列複合型別：

- timer-status.enum.ts：進行宣告並輸出

export enum TimerStatus {
  STOP = 'STOP',
  PAUSE = 'PAUSE',
  COUNTING = 'COUNTING'
}

- pomodoro.component.ts：引入使用，用法和物件類似

import { TimerStatus } from 'src/app/timer-status.enum';

// ...

  ngOnInit(): void {
    this.displayTime();
    console.log(TimerStatus);
    console.log(TimerStatus.STOP);
  }

// {STOP: "STOP", PAUSE: "PAUSE", COUNTING: "COUNTING"}
// STOP

### 型別推論 Type Inference

在 TS 檔中檢視上述範例程式碼，會發現不管有無明確註記型別，TypeScript 編譯器都會依照「型別推論」的規則，自動推斷出一個資料型別。

又以下方程式碼為例，雖然沒有指定值的型別，卻會在編譯時報錯：

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

這是因為在宣告變數並賦值時，TypeScript 編譯器就已經自動從程式碼推斷出 myFavoriteNumber 是字串型別，若嘗試以非字串的資料賦值時就會報錯！

對 TypeScript 編譯器來說，上方程式碼其實就等同於：

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

由於型別推論是 TypeScript 被動的防護機制，不管在什麼情況下都會自動推論型別，即使想故意註記一個錯誤，透過 TypeScript 的運算機制，仍會跳出錯誤訊息：

let randomNumber: string = Math.random()

/* TS2322: Type 'number' is not assignable to type 'string'. */

### 型別斷言 Type Assertion

但實際在開發時，專案的資料型別也會越發複雜，不能只仰賴 TypeScript 單純的推論，這時就需要適時搭配型別斷言。

開發者能藉由手動指定一個值的型別，覆蓋 TypeScript 編譯器的推論，避免出現警告錯誤，這個機制就是「型別斷言」。

型別斷言有兩種寫法：

- 第一種：`<型別>值 `（angle-bracket <>）

let code: any = 'Hello'; 
let helloCode = <string> code; 

- 第二種：`值 as 型別`（as keyword）

let code: any = 'Hello'; 
let helloCode = code as string; 

兩者語法效果相同，但如果是在 React 專案中，使用 JSX 語法時只能用第二種。

- 使用範例：將聯合型別的變數指定為更加具體的型別

在聯合型別的情境下，表示值可以是多種型別的其中一種。以下方程式碼為例，getLength 的參數可能是字串或數字，但因為 length 不為字串和數字的共同屬性，因此會報錯：

function getLength(something: string | number): number {
    if (something.length) {
        return something.length;
    } else {
        return something.toString().length;
    }
}

// error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

這時可使用型別斷言，將 something 指定為字串型別（如：`<string>something`），即可避免報錯：

function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

console.log(getLength(12345))    // 5
console.log(getLength("abc"))    // 3

> 參考資料：[【Day 04】 TypeScript 判斷資料型別的機制 - 型別推論 x 斷言 x 註解](https://ithelp.ithome.com.tw/articles/10217384)

<br>

## TypeScript 和 ES6+ 的差別？

接下來，在深入探討 TypeScript 與 ES6+ 差別之前，先來稍微回顧一些常用的 ES6+（或稱 ES2015）語法吧！

### 複習：那些常用的 ES6+ 語法

* let 與 const 宣告變數，以及變數作用域的不同
* var：function scope 函式作用域
* let 與 const：block scope 區塊作用域
* 解構賦值（Destructuring assignment）
* 能夠快速建立變數並取值

const pcBrands = ['Apple', 'Lenovo', 'Acer'];
// 自動建立名為 first, second, third 的變數
// 再依照陣列內元素的順序把值取出來
const [first, second, third] = pcBrands;

console.log(first);      // Apple
console.log(second);     // Lenovo
console.log(third);      // Acer

* 箭頭函式（Arrow Functions）

const foo = () => {
    console.log("ES6");
}

function foo2() {
    console.log("ES5");
}

foo();    // "ES6"
foo2();   // "ES5"

* 模板字串（Template Literals）
* ES5：使用單引號（''）或雙引號（""）
* ES6：使用反引號（``）

// 可用於字串拼接
console.log("Hello, " + name)
console.log(`Hellooo,  ${name}`)

* 展開語法和其餘語法（Spread Syntax/Rest Syntax）
* 根據不同用途使用 `...` 運算子

#### 展開語法：解壓縮，常用於複製一個物件或陣列，並為該物件增加屬性、或陣列添加元素

const PCOnSale = ['Apple', 'Lenovo', 'Acer'];
const allPCs = [...PCOnSale, 'HP', 'ASUS', 'TOSHIBA'];

console.log(allPCs);
// ["Apple", "Lenovo", "Acer", "HP", "ASUS", "TOSHIBA"] 

#### 其餘語法：壓縮，把沒有被取出來的物件屬性或陣列元素都放到一個壓縮包裡

const PCBrands = ["Apple", "Lenovo", "Acer", "HP", "ASUS", "TOSHIBA"] ;
const [first, second, third, ...other] = PCBrands;

console.log(other);
// ["HP", "ASUS", "TOSHIBA"] 

- Default Parameters 設定參數預設值
- Import & Export 引入與輸出
- 引入與輸出 module，類似 require 與 module.exports 的用法

> 可參考：[[Day 02] React 中一定會用到的 JavaScript 語法](https://ithelp.ithome.com.tw/articles/10217085)

### 所以，TypeScript 特別在哪？

在複習了 ES6+ 語法之後，究竟 TypeScript 除了型別系統，還提供哪些重要的酷東西呢？為什麼不寫 ES6+ 就好？

主要可分為三個方面：

* Class 類型
* Interface 介面
* 未來的 ES2016+ 特性，例如：Annotations 註解, Decorators 裝飾器, async/await 異步/等待

### 介面 Interface：定義抽象物件的型別

Interface 被稱作介面或是接口，在物件導向程式語言中，用來定義抽象物件的型別，又被稱作是 TypeScript 的一個型別檢查工具。

> 因為介面只做描述，不做動作。

主要用於定義 Class（類別）行為，介面只會描述有哪些 Method（方法）和 Property（屬性），不包含怎麼執行，也就是說，具體行為必須由 Class 實現（implement）。

> 賦值的時候，Class 需和介面定義的行為保持一致。

舉例來說：

// 定義一個介面 Person
interface Person {
    name: string;
    age: number;
    address?: string;    // 可選屬性
}

// 定義一個變數 heidi，型別是 Person
let heidi: Person = {
    name: 'Heidi',
    age: 99
};

當 Class 用 implements 指定要實作的 Interface，除了可選屬性（在屬性名稱後方加上問號 `?`），必須實作介面內所有的 Method 和 Property，否則會在編譯時報錯。

## 結語

這篇是在剛接觸 Angular 框架時，寫下的學習筆記。偶爾會被問說，覺得學新框架最大的困難處在哪？其實 Angular 和 React 要說不同，也不盡然完全相差甚遠，或許實作方法不一樣，卻還是能用共通的邏輯去思考問題。

反而時常會卡關的地方，是在 TypeScript 型別判定上，為什麼這裡型別檢查這麼嚴格？難道我一定要給個 any 才會過嗎？直到學會如何定義 Interface 之後，後續開發就會順利不少，尤其是在打電文時更是如此，能事先統一 Request 和 Response 的格式，就比較不容易出現意外的錯誤。