彻底搞懂 TypeScript 数组与元组

从开发痛点到实战：彻底搞懂 TypeScript 数组与元组

一、数组（Array）：同类数据

先思考一个场景：你需要存储一个班级所有学生的成绩，这些数据的特点是“类型相同（都是数字）、数量不固定（可能新增转学生）”。这时，数组就是最佳选择。

1. 核心定位：动态的同类型集合

数组的核心作用是存储相同类型的有序数据，长度可以动态调整（增删元素），就像一个可以无限扩容的收纳盒，专门用来装“同类物品”。TypeScript 通过类型标注强制数组内元素类型统一，避免混入其他类型导致错误。

2. 案例：解决同类数据存储问题

① 基础用法：明确类型的数组

最常用的两种类型标注方式：类型[]和Array<类型>，效果完全一致，前者更简洁。

// 方式1：类型[]（推荐）constscores:number[]=[90,85,95,88];// 支持动态增删scores.push(92);// 新增成绩scores.pop();// 删除最后一个成绩console.log(scores.length);// 输出：4// 方式2：Array<类型>（泛型写法）conststudentNames:Array<string>=["张三","李四","王五"];// 数组方法有完整类型提示constfilteredNames=studentNames.filter(name=>name.length>2);console.log(filteredNames);// 输出：["张三"]

② 慎用场景：混合类型的 any 数组

有些同学会用Array<any>存储不同类型的数据，但这会完全丧失 TypeScript 的类型校验能力，相当于“放弃治疗”，仅在兼容旧 JS 代码的特殊场景临时使用。

// 不推荐！失去类型安全，TS 无法校验元素类型constmixedData:any[]=[123,"hello",true,{id:1}];// 取值时无类型提示，容易出错constnum=mixedData[0]+10;// 没问题conststr=mixedData[1].toUpperCase();// 没问题consterr=mixedData[2].slice(0,1);// 运行时错误：boolean 没有 slice 方法

③ 进阶用法：多维数组（嵌套数组）

当需要存储“同类数据的集合的集合”时，就需要用到多维数组，比如矩阵、表格数据。

// 二维数字数组：表示一个 3x3 的矩阵constmatrix:number[][]=[[1,2,3],[4,5,6],[7,8,9]];// 访问二维数组元素：行索引 + 列索引console.log(matrix[1][2]);// 输出：6（第二行第三列）// 遍历二维数组matrix.forEach(row=>{constsum=row.reduce((acc,curr)=>acc+curr,0);console.log(`行总和：${sum}`);});

二、元组（Tuple）：异构数据的“固定结构包”

再看一个场景：你需要存储一个用户的核心信息——姓名（字符串）、年龄（数字）、是否VIP（布尔值）。这些数据的特点是“类型不同、数量固定”，用数组存储会丢失类型语义，用对象又略显繁琐。这时，元组就能完美解决。

1. 核心定位：固定长度的异构组合

元组是 TypeScript 对 JavaScript 数组的扩展，核心作用是存储不同类型的有序数据，且长度固定（定义时约定多少个元素，就必须有多少个元素）每个索引位置的类型都是明确约定的，顺序具有严格语义。

2.案例：解决异构数据结构化问题

① 基础用法：固定结构的元组

元组的类型标注格式为[类型1, 类型2, ...]，每个位置的类型可以不同，且必须严格匹配。

// 元组：[姓名（string）, 年龄（number）, 是否VIP（boolean）]constuser:[string,number,boolean]=["张三",25,true];console.log(user[0]);// 输出：张三console.log(user[1]);// 输出：25// 错误示例：类型不匹配或长度不符都会报错// user = ["李四", "30", true]; // 报错：第二个元素应为 number// user = ["王五", 30]; // 报错：长度应为 3

② 使用场景：函数返回多个不同类型值

JavaScript 函数默认只能返回一个值，要返回多个值通常需要用对象包裹。而元组可以更简洁地表达多返回值的类型，配合解构赋值。

// 函数返回元组：[是否成功（boolean）, 数据（string[]）, 错误信息（string）]functionfetchUserList():[boolean,string[],string]{try{// 模拟接口请求成功constdata=["张三","李四","王五"];return[true,data,""];}catch(error){// 模拟接口请求失败return[false,[],"请求失败：网络错误"];}}// 解构赋值：语义清晰，类型提示完整const[success,userList,errorMsg]=fetchUserList();if(success){console.log("用户列表：",userList);}else{console.error(errorMsg);}

③ 进阶用法：元组类型别名 + 元组数组

当需要批量处理多个相同结构的元组时，可以先定义元组类型别名，再创建元组数组，大幅提升代码可读性和可维护性。

// 定义用户接口interfaceUser{name:string;age:number;}// 模拟异步获取用户数据的函数functionfetchUsers():Promise<User[]>{returnnewPromise((resolve,reject)=>{constsuccess=true;// 假设请求成功if(success){constusers:User[]=[{name:"张三",age:18},{name:"李四",age:15},{name:"王五",age:25},];resolve(users);}else{reject("请求失败：网络错误");}});}// 函数返回用户信息和状态asyncfunctionloadAdultUsers():Promise<[boolean,User[],string]>{try{constusers=awaitfetchUsers();// 过滤出成年用户（年龄大于等于18）constadultUsers=users.filter(user=>user.age>=18);return[true,adultUsers,""];}catch(error){return[false,[],errorasstring];}}// 使用示例(async()=>{const[success,adultUsers,errorMsg]=awaitloadAdultUsers();if(success){console.log("成年用户列表：",adultUsers);}else{console.error(errorMsg);}})();

三、核心差异

混淆数组和元组，本质是没抓住核心差异。下面这张表从 6 个关键维度对比，一看就懂：

核心结论：数组的核心是“动态+同类”，元组的核心是“固定+异构”。记住这八个字，就能快速判断该用哪个。