TypeScript ｜ 元组 Tuple

相同类型元素组成成为数组，不同类型元素组成了元组（Tuple）

定义元组类型

元组中规定的元素类型顺序必须是完全对照的，而且不能多、不能少：

let x: [string, number]; 
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
复制代码

当访问一个已知索引的元素，会得到正确的类型：

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Property 'substr' does not exist on type 'number'
复制代码

元组越界

//可以越界添加元素（不建议），但不可越界访问
const list: [string, number] = ['Sherlock', 1887]
list.push('hello world')
console.log(list)      // [ 'Sherlock', 1887, 'hello world' ]
console.log(list[2])   // Tuple type '[string, number]' of length '2' has no element at index '2'
复制代码

可选元素类型

元组类型允许在元素类型后缀一个 ? 来说明元素是可选的：

const list: [number, string?, boolean?]
list = [10, 'Sherlock', true]
list = [10, 'Sherlock']
list = [10]
复制代码

应用

1. React Hook 的 useState

import { useState } from 'react';
const [loading, setLoading] = useState<boolean>(false); 
复制代码

2. 数据源是CVS这种文件的时候，会使用元组

type Touple = [string, number, string];
let csvData: Touple[] = [
    ['张三', 18, '男'], 
    ['李四', 14, '男']
];
复制代码

元组类型的 Rest 使用

元组可以作为参数传递给函数，函数的 Rest 形参可以定义为元组类型：

declare function rest(...args: [number, string, boolean]): void
//等价
declare function rest(arg1: number, arg2: string, arg3: boolean): void
复制代码

在声明文件（.d.ts）中，关键字 declare 表示声明作用。声明文件用于编写第三方类库，通过配置 tsconfig.json 文件中的 declaration 为 true，在编译时可自行生成。

const list: [number, ...string[]] = [10, 'a', 'b', 'c']
const list1: [string, ...number[]] = ['a', 1, 2, 3]
复制代码

学习链接

• www.imooc.com/wiki/typesc…
• www.runoob.com/typescript/…