TypeScript 元组

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

元组

学习一个和数组类似概念的元组。

alex 中每一项都会被推论为 string 和 number 的联合类型。

// 记录一个人的姓名、性别和年龄
let alex = ['Alex', 'male', 20];
let lucy = ['Lucy', 'female', 18];

这样做有什么问题呢？我们在取用 alex 中的某一项的时候，只能够使用数字和string 中的共用的属性或者方法。

其次我们能够确定第 0 项，一定是 string，第二项，一定是 number。可是这里无法使用他们独有的属性和方法。

这个时候，我们就可以使用元组，来实现：

元组的定义很简单，使用方括号，然后将其中每一项的类型都定义出来。这样的话，我们就能确定第 0 项和第 2 项的类型了。

// 记录一个人的姓名、性别和年龄
let alex: [string, string, number] = ['Alex', 'male', 20];
let lucy: [string, string, number] = ['Lucy', 'female', 18];

alex[0].length;
alex[2].toFixed(2);

// 我们在给元组某一项赋值的时候，只能赋值这一项的类型。比如，第 0 项是 string，那么我们就无法赋值为 number
alex[0] = 'Alexa';

// 报错，不能将类型“20”分配给类型“string”
alex[0] = 20;

// 如果我们想赋值一个下标超出了元组范围的话，某一项的话，那么这一项就可以既赋值为 string，又可以赋值为 number，但是无法赋值为其他类型
alex[3] = 3;

// 另外，我们直接给 alex 赋值的时候，不能够只赋值其中某一项，必须把这三项全部赋值给他才行，下面这样的话，就会报错
alex = ['Alex', 'male'];

最后我们可以把元组定义成类型别名，定义出类型别名之后，这个类型别名可以直接应用到 alex 和 lucy。

type Person = [string, string, number];

// 记录一个人的姓名、性别和年龄
let alex: Person = ['Alex', 'male', 20];
let lucy: Person = ['Lucy', 'female', 18];

元组 VS 数组

元组	数组
每一项可以是不同的类型	每一项都是同一种类型
有预定义的长度	没有长度限制
用于表示一个结果	用于表示一个列表

习题-为变量 animal 声明合适的类型

const animal: ______ = [
    'panda',
    10,
    false
];

A. number | string | boolean

B. (number | string | boolean ) []

C. [string, number, boolean]

D. { number | string | boolean } []

答案：C

解析

数组各个元素必须相同，元组各个元素可以不相同。变量 animal 被赋值为元组，因此变量 animal 应该声明为元组类型最合适。

• A - 本选项的联合类型中均为基本数据类型。故错误。
• B - 本选项为数组类型，数组的元素是联合类型，且联合类型包含了元组各元素的类型。本选项是正确的，但不是最合适的。
• C - 本选项为元组类型。且元素结构类型顺序与赋值元组元素的结构类型顺序相符，故本选项最合适。
• D - 本选项是错误格式。

资料-越界的元素

在 TypeScript 的基础类型中，元组（ Tuple ）表示一个 已知数量 和 类型 的数组。我们来看如下代码：

let someList: [string, number];

// 初始化赋值
someList = ['Apple', 18]; // ok

someList = ['Apple', 'BlackBerry']; // error

看到上述代码会不会有疑问，那当我们需要扩展 someList 的值的时候会怎么样呢？

let someList: [string, number];

// 初始化赋值
someList = ['Apple', 18]; // ok

someList = ['Apple', 'BlackBerry']; // error Type 'string' is not assignable to type 'number'.

someList = [['Apple', 18], 'BlackBerry']; //error Type '(string | number)[]' is not assignable to type 'string'. Type 'string' is not assignable to type 'number'.

someList[3] = 'BlackBerry' // ok

someList[4] = 19 // ok

someList[5] = false // error Type 'false' is not assignable to type 'string | number'.

从上述代码我们可以得出以下结论：

• 元组初始化赋值时，值的类型和数量必须与声明的时候一一对应
• 元组允许手动给跨界的元素复制，此时值类型为元组声明时类型的联合类型