TypeScript | 元组 Tuple

6,596 阅读2分钟

元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。

定义元组类型

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

//定义一个元组类型
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

应用

  1. React Hook 的 useState
import { useState } from 'react';
const [loading, setLoading] = useState<boolean>(false); 
  1. 数据源是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]

学习链接