创建一个强类型的数组

数组可以包含混合类型的数据

在学习如何创建强类型数组之前，我们先来看一个未添加类型注解的数组。以下代码创建了一个包含三个不同值的数组，每个值的类型都不同。

TypeScript

1const items = [];
2items.push(1);
3items.push("two"),
4items.push(false);
5
6console.log(items);

为什么上面的代码没有引发类型错误？

因为数组元素的类型未被声明，因此它们的类型为 any。

使用 Array 泛型类型

我们可以使用类型注解来指定数组只能包含特定类型的元素。TypeScript 提供了一个 Array 泛型类型来实现这一点。我们可以在 Array 后面用尖括号传入期望的元素类型：

TypeScript

1const numbers: Array<number> = [];
2numbers.push(1);
3numbers.push("two"),
4numbers.push(false);
5
6console.log(numbers);

如果目前这种语法看起来有些奇怪，不必担心，本课程后续会详细介绍泛型类型。

如果我们像下面这样声明数组，是否仍会报类型错误？

1const items: Array<number> = [1, "two", false];

是的，仍然会！无论通过何种方式向数组中添加元素，这些元素都必须满足所指定的类型。

使用方括号语法

另一种更简洁的方法是使用方括号语法来创建强类型数组：在元素类型后加上 []：

1const items: number[] = [];

请使用方括号语法，在下方代码编辑器中创建一个名为 numbers 的变量，并将其赋值为包含 "one"、"two" 和 "three" 的字符串数组。

TypeScript

1// TODO - 创建一个包含 "one"、"two" 和 "three" 的字符串数组，并添加类型注解

1const numbers: string[] = ["one", "two", "three"];

使用类型推断

在下面的示例代码中，array 变量的类型是什么？

TypeScript

1const array = [1, 2, 3];

array 的类型是 number[]。

TypeScript 能够智能地推断出数组的类型。

请使用类型推断的方式，创建一个包含 "one"、"two" 和 "three" 的字符串数组。

TypeScript

1// TODO - 创建一个包含 "one"、"two" 和 "three" 的字符串数组，不使用类型注解

1const strings2 = ["one", "two", "three"];

强类型化剩余参数

我们可以使用数组类型注解来为函数的剩余参数设置强类型。

下面这个普通的 JavaScript 函数接收一个人的名字和多个分数，并将它们输出到控制台。

TypeScript

1function logScores(firstName, ...scores) {
2  console.log(firstName, scores);
3}
4 
5logScores("Ben", 50, 75, 85);  // 输出 Ben 和 [50, 75, 85]

我们可以为函数参数添加哪些类型注解，以使该函数具有强类型？尝试在代码中添加。

以下是强类型的版本：

1function logScores(firstName: string, ...scores: number[]) {
2  console.log(firstName, scores);
3}

使用强类型版本的函数时，如果我们用以下代码调用它：

1logScores("Mike", 90, 65, "65")

这会引发类型错误。问题出在哪里？

问题是，分数 "65" 应该是 number 类型（即 65），而不是 string 类型。

小结

在声明数组时如果同时赋值，TypeScript 可以自动推断数组元素的类型。使用类型推断时，务必通过鼠标悬停检查 TypeScript 是否推断出了预期的类型。

如果在声明数组时不立即赋值，可以使用方括号语法或 Array 泛型类型进行类型注解，明确告知 TypeScript 数组应包含的元素类型。

数组类型注解也可用于对函数的剩余参数进行强类型约束。

有关 TypeScript 中数组的更多信息，请参考 TypeScript 手册。

在下一课中，我们将学习元组（tuple）的概念以及如何在 TypeScript 中使用它们。