tags: TypeScript

【學習筆記】TypeScript 基礎入門：從型別談起

• 【學習筆記】TypeScript 基礎入門：從型別談起
  • 什麼是 TypeScript？
  • 型別系統 Type System
    • 型別註解 Type annotation
    • 複習：JavaScript 型別
    • 空值 Void：沒有回傳值
    • 補充：void 與 never 的差異
    • 任意型別 any：不檢查型別
    • 陣列型別 Array
    • 列舉型別 enum
    • 型別推論 Type Inference
    • 型別斷言 Type Assertion
  • TypeScript 和 ES6+ 的差別？
    • 複習：那些常用的 ES6+ 語法
    • 所以，TypeScript 特別在哪？
    • 介面 Interface：定義抽象物件的型別
  • 結語

本篇為以下資源之學習筆記：

• Github - microsoft/TypeScript
• TypeScript 新手指南
• Angular Tutorial for Beginners: Learn Angular & TypeScript - Programming with Mosh

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

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

（圖片來源：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

任意型別 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 註解

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 語法

所以，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 的格式，就比較不容易出現意外的錯誤。