跳转到主要内容
模块 1 · 第 2 课(共 2)课程中的2/14~10 min
模块课程(2/2)

数组和元组

在 JavaScript 中,数组可以包含任何类型的元素,并且可以动态增长或收缩。 TypeScript 添加了静态类型检查,以确保集合保持同质或遵循固定的类型结构。


数组(同质集合)

在 TypeScript 中,有两种等效的方法来定义包含相同类型元素的数组的类型:

  1. 使用元素类型后跟方括号 ([]):

    TS
    const numbers: number[] = [1, 2, 3];
    const strings: string[] = ['a', 'b', 'c'];
  2. 使用通用 Array<T> 类型:

    TS
    const numbers: Array<number> = [1, 2, 3];

两种语法都完全有效,但第一种 (type[]) 是传统且最常见的样式。如果您尝试插入无效值(例如 number[] 数组上的 numbers.push("hello")),TypeScript 将生成编译时错误。


元组(固定长度数组)

元组是一种特殊类型的数组,它具有固定数量的元素,其中每个元素都有一个基于其位置的预定义的特定类型。

例如,要存储由状态代码(数字)和消息(字符串)组成的 HTTP 响应:

TS
const response: [number, string] = [200, 'OK'];

在这种情况下:

  • 第一个元素 (response[0]) 必须是 number。
  • 第二个元素 (response[1]) 必须是 string。
  • 数组必须用恰好 2 个元素进行初始化。

只读元组 (readonly)

TypeScript 中元组的一个重要细节是,在运行时它们是普通的 JavaScript 数组。这意味着像 .push() 或 .pop() 这样的变异方法在技术上是可用的,并且可以改变元组长度,部分绕过类型检查。

为了防止这种行为并强制执行真正的不变性,我们可以使用 readonly 修饰符:

TS
const point: readonly [number, number] = [10, 20];
// point.push(30); // Compile-time error!

自己尝试一下

练习 1:数字数组

锻炼#ts.m1.l2.e1
尝试:0加载中...

声明一个名为 Scores 的数组,该数组仅包含数字,并使用值 90、85 和 95 进行初始化。对该数组使用显式类型注释。不要使用any 类型。

正在加载编辑器...
显示提示

使用语法 const Scores:number[] = ... 或 Array<number>。

3 次尝试后可用的解决方案

练习 2:3D 坐标元组

锻炼#ts.m1.l2.e2
尝试:0加载中...

声明一个名为 point 的元组,它表示 3D 坐标(X、Y、Z 的三个数字)并使用值 10、20、30 进行初始化。使用显式类型注释。

正在加载编辑器...
显示提示

元组类型必须是[数字,数字,数字]。

3 次尝试后可用的解决方案

练习 3:位置信息元组

锻炼#ts.m1.l2.e3
尝试:0加载中...

声明一个名为 locationInfo 的元组,它表示地理坐标及其名称。它必须包含:纬度(数字)、经度(数字)和城市名称(字符串)。使用值 41.9028、12.4964 和“Rome”对其进行初始化。

正在加载编辑器...
显示提示

使用语法定义一个包含三个元素的元组:[number, number, string]。

3 次尝试后可用的解决方案

练习 4:日志条目元组

锻炼#ts.m1.l2.e4
尝试:0加载中...

声明一个名为 logEntry 的元组,表示日志行。它必须按顺序包含:时间戳(数字)、严重性级别(字符串)和错误消息(字符串)。使用时间戳 1716300000、级别“INFO”和消息“应用程序已启动”对其进行初始化。

正在加载编辑器...
显示提示

使用语法定义一个三元素元组:[number, string, string] 并分配指定的值。

3 次尝试后可用的解决方案