TypeScript 簡明教程：基本型別（二）

Hopsken發表於2019-03-30
TypeScript型別

本文為系列文章《TypeScript 簡明教程》中的一篇。

上一篇文章 基本型別（一）中，我們介紹了原始資料型別和其他幾個 TypeScript 新引入的基本型別。這篇文章將會繼續介紹剩下的幾個基本型別，包括：列表（array）、元組（tuple）、物件（object）、字面量（literal）和列舉（enum）型別。

[TOC]

陣列型別

TypeScript 提供了兩種定義陣列型別的方法。一種是在元素型別後加上 [] 表示這是一個陣列；另一種方法是使用泛型表示：Array<T>，其中 T 為陣列中元素的型別。

關於泛型，可以暫時理解為型別的引數。沒有接觸過強型別語言的同學，這裡理解起來可能會有點困難>不過沒關係，後面會有專門一篇文章講解泛型。

// 第一種
let fruits: string[] = ['Apple', 'Banana', 'Orange']

// 第二種
let fruits: Array<string> = ['Apple', 'Banana', 'Orange']
複製程式碼

一般來說，對於上面例子中的這種，陣列中元素都為簡單型別時，我們傾向於使用第一種表示方法。第二種使用泛型的方法則用於表示更為複雜的型別。

例如：

// 「|」用於表示聯合型別，這裡表示陣列中元素為 string 或 number 型別
let x: Array<string | number> 
x = ['Hello', 'World', 42]
複製程式碼

元組型別

乍看上去，元組與列表十分相似，都用於表示一組資料。它們之間的不同在於，元組的長度是有限的，而且可以分別定義每一位元素的型別。

一個常見的用法是用於儲存函式的執行結果。

let status: [string, number] = submit(data, urlPath)
console.log(status)
// => ['error', 400]
複製程式碼

物件型別

object 表示除原始型別以外的型別。也就是說，被定義為 object 型別的變數不能被賦值為 string、number、boolean、symbol、null、undefined 型別的資料（對於 null 和 undefined，需開啟 strictNullChecks）。

object 型別的存在允許我們進行更嚴格的型別定義。舉個例子，對於 Object.create() 函式，標準庫中的定義是這樣的：

interface ObjectConstructor {
  /**
   * Creates an object that has the specified prototype or that has null prototype.
   * @param o Object to use as a prototype. May be null.
   */
  create(o: object | null): any;
 }
複製程式碼

Object.create() 作用是使用現有的物件或 null 來建立一個新的物件。在進行以上定義後，當你不小心傳入一個 null 以外的原始值時，TypeScript 會在編譯時報錯。

Object.create({}) // OK
Object.create(null) // OK
Object.create('hello') // Error
Object.create(123) // Error
Object.create(true) // Error
Object.create(undefined) // Error
複製程式碼

字面量型別

字面量型別允許你約束某個變數可能的值，包括字串字面量型別，數字字面量型別，布林值字面量型別。它通常會和型別別名和聯合型別一起使用。

布林值字面量型別

let lovePeace: true
lovePeace = true // OK
lovePeace = false // Error
複製程式碼

字串字面量型別

用於約束某個字串可能的取值。

type Effect = 'ease-in' | 'ease-out' | 'ease-in-out'

function animate(ele: Element, effect: Effect) {
    // ...
}

animate(document.getElementById('app'), 'ease-in')
animate(document.getElementById('app'), 'fade-in') // Error
複製程式碼

數字字面量型別

例如：投骰子的結果只能為 1~6 之間的值。

function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 {
    // ...
}
複製程式碼

列舉型別

列舉是組織收集一組相關變數的方式。在 TypeScript 中，使用 enum 關鍵字定義。TS 支援兩種列舉方式：基於數字的列舉和基於字串的列舉。

數字列舉

首先我們來看基於數字的列舉：

enum Color {
    Red,
    Green,
    Blue
}
複製程式碼

上面我們定義了一個數字列舉 Color，其有三個成員 Red、Green、Blue。預設情況下，第一個成員的值為 0，其餘成員的值依次遞增。

Color.Red === 0
Color.Green === 1
Color.Blue === 2
複製程式碼

你也可以自行設定列舉成員的初始值，其後的值依然會依次遞增。

enum Color {
    Red = 1,
    Green,
    Blue
}
console.log(Color.Red, Color.Green, Color.Blue)
// => 1 2 3
複製程式碼

使用數字列舉時，TS 會為列舉成員生成反向對映。例如，對於上面的例子：

Color.Red === 1
Color[1] === 'Red'
複製程式碼

字串列舉

字串列舉允許你使用字串來初始化列舉成員，可以是一個字串字面量或者另一個字串列舉成員。

enum Color {
    Red = 'RED',
    Green = 'GREEN',
    Blue = 'BLUE'
}
複製程式碼

字串列舉成員不會自增長，每個成員都必須被初始化。另外，字串列舉不會為成員生成反向對映。

關於 TS 列舉型別，上面的內容基本上涵蓋了常用的情況。除此以外，還有很多細節，篇幅原因，這裡不再贅述，感興趣可以參考[這篇文章](https://jkchao.github.io/typescript-book-chinese/typings/enums.html)。

小結

本篇文章主要介紹了 TS 中其他幾個基礎型別：列表（array）、元組（tuple）、物件（object）、字面量（literal）和列舉（enum）型別。

相關文章