大家好，我是半虹，这篇文章来讲 TypeScript 中的数组以及元组类型
1、概述
在 JavaScript 中的数组，在 TypeScript 里，可具体分为数组以及元组两种类型
先来简单对比一下区别：
JavaScript中的数组，可以用于存放类型不同、数量不定的元素TypeScript中的数组，通常用于存放类型相同、数量不定的元素TypeScript中的元组，通常用于存放类型不同、数量确定的元素
下面我们再来详细介绍 TypeScript 中数组以及元组的相关概念和使用
2、数组
（1）特征
TypeScript 中的数组本质上也是特殊的对象，这与 JavaScript 中的数组是一样的
除此之外，TypeScript 中的数组有两个关键的特征：
- 元素类型必须相同【重要】
- 元素数量可以改变【重要】
这些特征决定着 TypeScript 数组的使用场景
（2）声明
显式声明数组类型写法有二：
- 类型后加方括号
[] - 泛型，这里只介绍写法，关于泛型的详细说明，后面会写一篇文章单独介绍
// 写法一：类型后加方括号
// 情况一：普通类型
let arr1:number[] = [1, 2, 3];// 写法一：类型后加方括号
// 情况二：复杂类型
let arr2:(number|string)[] = [1, '2', 3];// 写法一：类型后加方括号
// 情况三：多维数组
let arr3:(number|string)[][] = [[1], ['2', 3]];// 写法二：泛型
// 情况一：普通类型
let arr4:Array<number> = [1, 2, 3];// 写法二：泛型
// 情况二：复杂类型
let arr5:Array<number|string> = [1, '2', 3];// 写法三：泛型
// 情况三：多维数组
let arr6:Array<Array<number|string>> = [[1], ['2', 3]];// 验证二：元素数量可以改变arr1.pop(); // 编译正常
arr1.push(4); // 编译正常// 验证一：元素类型必须相同arr1.push('56'); // 编译报错
arr1.push(true); // 编译报错
如果没有显式声明就会进行隐式推导
let arr0 = []; // 此时推断为：never[]
let arr1 = [1, 2, 3]; // 此时推断为：number[]
let arr2 = [1, '2', 3]; // 此时推断为：(number|string)[]
let arr3 = [[1], ['2', 3]]; // 此时推断为：(number|string)[][]arr1.push('1'); // 编译报错
arr0.push('1'); // 只是语法提示错误，但是编译没有报错？
（3）只读数组
如果想要声明一个只读数组，你可能会第一时间想到使用 const 关键字
但是就和对象一样，使用 const 只是不能重新赋值，但仍可以修改元素，不是真正意义上的只读
const arr0:number[] = [1, 2, 3];// 删、增、改，都可执行
// 但重新赋值，不被允许arr0.pop(); // 编译正常
arr0.push(4); // 编译正常
arr0[0] = 0; // 编译正常arr0 = [1, 3, 5]; // 编译报错
想要实现真正意义上的只读，可以使用 readonly 关键字或特殊泛型 Readonly / ReadonlyArray
// 声明只读数组：使用 readonly 关键字，注意 readonly 关键字不能和泛型一起使用const arr1:readonly number[] = [1, 2, 3];arr1.pop(); // 编译报错
arr1.push(4); // 编译报错
arr1[0] = 0; // 编译报错// 声明只读数组：使用 Readonly 或 ReadonlyArray 泛型const arr2:Readonly<number[]> = [1, 2, 3];
const arr3:Readonly<Array<number>> = [1, 2, 3];const arr4:ReadonlyArray<number> = [1, 2, 3];
实际上，只读数组没有 pop、push 等修改元素的方法，因此可进行的操作是普通数组操作的子集
【引理】由于子类型会在继承父类型的基础上增加自己的方法
【推论】也就是说，普通数组是只读数组的子类型，只读数组是普通数组的父类型
【引理】由于任何能使用父类型的地方都可以使用子类型代替，但反之不行
【推论】所以只读数组无法代替普通数组直接使用
想要解决这一问题，可以用类型断言，告诉编译器某个值确实就是某种类型
function sumArr(arr: number[]) {return arr.reduce((prev, curr) => prev + curr);
}// 普通数组
const arr1:number[] = [1, 2, 3];
sumArr(arr1); // 编译正常// 只读数组
const arr2:readonly number[] = [1, 2, 3];
sumArr(arr2); // 编译报错
sumArr(arr2 as number[]); // 类型断言，编译正常
3、元组
（1）特征
元组本质上就是特殊的数组，可以看作是数组的子类型
元组关键的特征也是有两个，正好与数组相反：
- 元素类型可以不同，但在声明时需要指定【重要】
- 元素数量无法改变，也在声明时就要指定【重要】
这些不同的特征决定着二者有不同的应用场景
（2）声明
元组类型必须显式声明，因为元组的赋值语法和数组赋值一模一样
并且就像上面说的那样，声明元组时需要单独为每个元素指定类型
// 显式声明时：
// 若是成员的类型写在方括号之外，则说明是数组类型
// 若是成员的类型写在方括号之内，则说明是元组类型【重要，注意区别】// 声明元组
// 单一类型，数量为三
let tuple1:[number, number, number] = [1, 2, 3]; // 赋值的语法，数组和元组一样// 声明元组
// 不同类型，数量为三
let tuple2:[number, string, number] = [1, '2', 3]; // 赋值的语法，数组和元组一样
如果没有进行显式声明，那么就会被默认推导为数组
let arr1 = [1, 2, 3]; // 这个语句在介绍数组时已经出现过
（3）可选元素
就和对象类型一样，元组类型同样支持可选元素，这样赋值时该元素就可以被忽略不算
只需声明元组类型时在该元素后面加上问号即可，但要注意可选元素要在必选元素之后
// 声明时
let tuple1:[number?, string]; // 编译报错，可选元素要在必选元素之后
let tuple2:[number, string?]; // 编译正常// 赋值时
tuple2 = [1, '2']; // 可选元素既能赋值
tuple2 = [1]; // 也能省略
元组中的元素数量通常在声明时就能确定具体值，但是使用可选元素之后就没这么简单了
编译器在进行访问检查时会认为：所有可能的元素数量都是合法的
// 声明时
let tuple2:[number, string?] = [1];// 访问时
tuple2[0]; // 编译正常（元素数量有可能是 1，当可选元素被赋值时），运行时访问结果也符合预期，为 1
tuple2[1]; // 编译正常（元素数量有可能是 2，当可选元素被忽略时），运行时访问结果不符合预期，为 undefined
tuple2[2]; // 编译报错（元素数量不可能是 3）
（4）剩余元素
元组类型支持剩余元素，表示可以接收任意多个指定类型的元素
声明时可以在任意位置，使用拓展运算符来展开一个数组或元组
// 剩余元素放在最后，拓展运算符 (...) 后面是布尔类型数组
let tuple1:[number, string, ...boolean[]];// 剩余元素放在中间，拓展运算符 (...) 后面是布尔类型数组
let tuple2:[number, ...boolean[], string];// 剩余元素放在最前，拓展运算符 (...) 后面是布尔类型数组
let tuple3:[...boolean[], number, string];// 赋值
tuple1 = [1, '2']; // 剩余元素赋予零个值也行
tuple1 = [1, '2', true]; // 剩余元素赋予一个值也行
tuple1 = [1, '2', true, false]; // 剩余元素赋予两个值也行// 使用场景，如：
// 指定一个至少接收一个字符串的元组
let tuple4:[string, ...string[]];
（5）只读元组
最后再来介绍只读元组，就和数组一样，const 关键字无法做到真正意义上的只读
正确的做法是使用 readonly 关键字或特殊泛型 Readonly
// 声明只读元组：使用 readonly 关键字
let tuple1:readonly [number, string];// 声明只读元组：使用 Readonly 泛型
let tuple2:Readonly<[number, string]>;
好啦，本文到此结束，感谢您的阅读！
如果你觉得这篇文章有需要修改完善的地方，欢迎在评论区留下你宝贵的意见或者建议
如果你觉得这篇文章还不错的话，欢迎点赞、收藏、关注，你的支持是对我最大的鼓励 (/ω＼)
 — 生产环境)
