Typescript - Tuple 元祖类型语法 / 使用 / 不可变元组 / 合并多个元组详细入门教程

前言

在 JavaScript 中是没有元组的，元组是 TypeScript 中特有的类型，其工作方式类似于数组。

uple Type（元组类型）是一种特殊的数据结构，其实元祖就是一个 明确元素数量以及每个元素类型的一个数组，各个元素的类型，不必要完全的相同。您可以认为是一个有顺序的数组类型，有以下特点：

1. 明确知道包含了多少元素（这里的元素指的是类型）
2. 明确知道每个类型所在的位置
3. 长度固定，元组类型的变量需要为每一个位置定义对应类型的值

基本语法

正常情况下，数组一般由同种类型的值组成，但有时我们需要在单个变量中存储不同类型的值，这时候我们就可以使用元组。

下面类型 TuleDemo 定义了一个元组类型，包含了 string 和 number 两种类型元素，元祖长度为 2，其中第一个元素类型是 string，第二个元素类型是 number。

type TuleDemo = [string, number];

简单使用

元组可用于定义具有有限数量的未命名属性的类型，每个属性都有一个关联的类型。

使用元组时，必须提供每个属性的值，如下代码所示：

let tupleType: [string, boolean];
tupleType = ["王佳斌", true];

在上面代码中，我们定义了一个名为 tupleType 的变量，它的类型是一个类型数组 [string, boolean]，

然后我们按照正确的类型依次初始化 tupleType 变量。与数组一样，我们可以通过下标来访问元组中的元素：

console.log(tupleType[0]); // 王佳斌
console.log(tupleType[1]); // true

在元组初始化的时候，如果出现 类型不匹配 的话，例如下面的代码：

tupleType = [true, "王佳斌"];

此时，TypeScript 编译器会提示以下错误信息：

[0]: Type 'true' is not assignable to type 'string'.
[1]: Type 'string' is not assignable to type 'boolean'.

很明显是因为类型不匹配导致的。在元组初始化的时候，我们还必须提供每个属性的值，不然也会出现错误，比如：

tupleType = ["就我一个字符串干啥啊？？"];

此时，TypeScript 编译器会提示以下错误信息：

Property '1' is missing in type '[string]' but required in type '[string, boolean]'.

关于错误，基本上就出现在 元素个数不符与元素类型不符 这两种情况。

Immutable Tuple Type (不可变元组)

不可变元组的意思是元组类型的变量内的元素值是不可变的，也就是不可再增加元素、删除元素、修改元素值。

想要让其拥有这个特性，可在 Tuple Type 字面量前加 readonly 关键字（注意不能加在类型变量名前）：

type tupleTypeDemmo = readonly [string, number];

也可以给数组类型的变量（注意：不是类型）后加 const 断言，改为 “常量”：

let demo = [{
    item: {
        name: '我是不变的，改我就会报错'
    }
}, 2] as const;

// error: Cannot assign to 'name' because it is a read-only property
demo[0].item.name = 1;

// error: Property 'push' does not exist on type 'readonly [{ readonly item: { readonly name: "guoshi"; }; }, 2]'
demo.push(2);

// error: Property 'splice' does not exist on type 'readonly [{ readonly item: { readonly name: "guoshi"; }; }, 2]'
demo.splice(0, 1);

// error: Property 'pop' does not exist on type 'readonly [{ readonly item: { readonly name: "guoshi"; }; }, 2]'
demo.pop();

// error: Property 'unshift' does not exist on type 'readonly [{ readonly item: { readonly name: "guoshi"; }; }, 2]'
demo.unshift();

当类型是不可变元组时，元素不可变更，即使元素是多层次的引用类型，同样有效。

推荐第一种（在 Tuple Type 字面量前加 readonly 关键字）方法，这对 需要保持复杂数据不可变的场景 很有效。

合并多个元组

如果你想把多个元组进行合并，也是非常简单的。

Typescript 支持数组结构语法，如下代码所示：

type tupleFirst = [number];
type typleSecond = [string];
type intersectionTuple = [...tupleFirst, ...typleSecond]; // [number, string]

可以看到，tupleFirst / typleSecond 进行了合并，产生了 intersectionTuple 新元组。

这篇好文章是转载于：学新通技术网