元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。
定义元组类型
元组中规定的元素类型顺序必须是完全对照的,而且不能多、不能少:
//定义一个元组类型
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'
可选元素类型
元组类型允许在元素类型后缀一个 ?
来说明元素是可选的:
let list: [number, string?, boolean?]
list = [10, 'Sherlock', true]
list = [10, 'Sherlock']
list = [10]
可选元素必须在必选元素的后面,也就是如果一个元素后缀了 ?号,其后的所有元素都要后缀 ?号:
let list1: [number, string?, boolean]
// Error: A required element cannot follow an optional element
应用
- React Hook 的 useState
import { useState } from 'react';
const [loading, setLoading] = useState<boolean>(false);
- 数据源是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]