TypeScript 元組(Tuple)

本節(jié)介紹元組這一數(shù)據(jù)類型的定義及其使用，通過元組可以存儲不同類型的元素，而非像數(shù)組那樣只能存儲相同元素類型（any[] 除外）。

1. 慕課解釋

相同類型元素組成成為數(shù)組，不同類型元素組成了元組（Tuple）。

2. 定義元組類型

聲明一個由 string 和 number 構(gòu)成的元組：

const list: [string, number] = ['Sherlock', 1887]   // ok

const list1: [string, number] = [1887, 'Sherlock']  // error

代碼解釋： 元組中規(guī)定的元素類型順序必須是完全對照的，而且不能多、不能少，list1 中定義的第一個元素為 string類型，不能賦值為 number類型的數(shù)據(jù)。

當(dāng)賦值或訪問一個已知索引的元素時，會得到正確的類型：

const list: [string, number] = ['Sherlock', 1887]

list[0].substr(1)  // ok
list[1].substr(1)  // Property 'substr' does not exist on type 'number'.

代碼解釋：

第 3 行，list[0] 是一個字符串類型，擁有 substr() 方法。

第 4 行，list[1] 是一個數(shù)字類型，沒有 substr() 方法，所以報錯。

要注意元組的越界問題，雖然可以越界添加元素（不建議），但是不可越界訪問：

const list: [string, number] = ['Sherlock', 1887]
list.push('hello world')

console.log(list)      // ok [ 'Sherlock', 1887, 'hello world' ]
console.log(list[2])   // Tuple type '[string, number]' of length '2' has no element at index '2'

代碼解釋：

第 2 行，向一個聲明了只有兩個元素的元組繼續(xù)添加元素，這種操作雖然可行，但是嚴重不建議！

第 5 行，該元組只有兩個元素，不可越界訪問第三個元素。

3. 可選元素類型

元組類型允許在元素類型后綴一個 ? 來說明元素是可選的：

const list: [number, string?, boolean?]
list = [10, 'Sherlock', true]
list = [10, 'Sherlock']
list = [10]

代碼解釋： 可選元素必須在必選元素的后面，也就是如果一個元素后綴了 ?號，其后的所有元素都要后綴 ?號。

4. 元組類型的 Rest 使用

元組可以作為參數(shù)傳遞給函數(shù)，函數(shù)的 Rest 形參可以定義為元組類型：

declare function rest(...args: [number, string, boolean]): void

等價于：

declare function rest(arg1: number, arg2: string, arg3: boolean): void

TIPS： 在聲明文件（.d.ts）中，關(guān)鍵字 declare 表示聲明作用。聲明文件用于編寫第三方類庫，通過配置 tsconfig.json 文件中的 declaration 為 true，在編譯時可自行生成。

還可以這樣：

const list: [number, ...string[]] = [10, 'a', 'b', 'c']

const list1: [string, ...number[]] = ['a', 1, 2, 3]

代碼解釋： Rest 元素指定了元組類型是無限擴展的，可能有零個或多個具有數(shù)組元素類型的額外元素。

5. 小結(jié)

本小節(jié)介紹了元組類型的聲明方式和一些技巧，在實際開發(fā)中可以靈活應(yīng)用。