美文网首页
TypeScript 详解之 TypeScript 的元组类型

TypeScript 详解之 TypeScript 的元组类型

作者: you的日常 | 来源:发表于2023-08-12 13:50 被阅读0次

简介

元组(tuple)是 TypeScript 特有的数据类型,JavaScript 没有单独区分这种类型。它表示成员类型可以自由设置的数组,即数组的各个成员的类型可以不同。

元组必须明确声明每个成员的类型。

const s:[string, string, boolean]
  = ['a', 'b', true];

上面示例中,元组s的前两个成员的类型是string,最后一个成员的类型是boolean

元组类型的写法,与上一章的数组有一个重大差异。数组的成员类型写在方括号外面(number[]),元组的成员类型是写在方括号里面([number])。

TypeScript 的区分方法是,成员类型写在方括号里面的就是元组,写在外面的就是数组。

let a:[number] = [1];

上面示例中,变量a是一个元组,只有一个成员,类型是number

使用元组时,必须明确给出类型声明(上例的[number]),不能省略,否则 TypeScript 会把一个值自动推断为数组。

// a 的类型为 (number | boolean)[]
let a = [1, true];

上面示例中,变量a的值其实是一个元组,但是 TypeScript 会将其推断为一个联合类型的数组,即a的类型为(number | boolean)[]

元组成员的类型可以添加问号后缀(?),表示该成员是可选的。

let a:[number, number?] = [1];

上面示例中,元组a的第二个成员是可选的,可以省略。

注意,问号只能用于元组的尾部成员,也就是说,所有可选成员必须在必选成员之后。

type myTuple = [
  number,
  number,
  number?,
  string?
];

上面示例中,元组myTuple的最后两个成员是可选的。也就是说,它的成员数量可能有两个、三个和四个。

由于需要声明每个成员的类型,所以大多数情况下,元组的成员数量是有限的,从类型声明就可以明确知道,元组包含多少个成员,越界的成员会报错。

let x:[string, string] = ['a', 'b'];

x[2] = 'c'; // 报错

上面示例中,变量x是一个只有两个成员的元组,如果对第三个成员赋值就报错了。

但是,使用扩展运算符(...),可以表示不限成员数量的元组。

type NamedNums = [
  string,
  ...number[]
];

const a:NamedNums = ['A', 1, 2];
const b:NamedNums = ['B', 1, 2, 3];

上面示例中,元组类型NamedNums的第一个成员是字符串,后面的成员使用扩展运算符来展开一个数组,从而实现了不定数量的成员。

扩展运算符用在元组的任意位置都可以,但是它后面只能是数组或元组。

type t1 = [string, number, ...boolean[]];
type t2 = [string, ...boolean[], number];
type t3 = [...boolean[], string, number];

上面示例中,扩展运算符分别在元组的尾部、中部和头部。

如果不确定元组成员的类型和数量,可以写成下面这样。

type Tuple = [...any[]];

上面示例中,元组Tuple可以放置任意数量和类型的成员。但是这样写,也就失去了使用元组和 TypeScript 的意义。

元组可以通过方括号,读取成员类型。

type Tuple = [string, number];
type Age = Tuple[1]; // number

相关文章

网友评论

      本文标题:TypeScript 详解之 TypeScript 的元组类型

      本文链接:https://www.haomeiwen.com/subject/kpsnpdtx.html