TypeScript7(元组)

在 TypeScript 中,元组(Tuple)是一种特殊的数组类型,它允许你明确地定义数组中每个元素的类型和数量。与普通数组不同,元组的长度是固定的,并且每个位置的类型都是预先确定的。

当你需要一个固定长度、且元素类型不完全相同的数组时,元组是比普通数组更具表达力和类型安全的选择。

1.元组的写法

元组的写法非常直观,你只需要在类型注解中使用方括号 [],并在其中列出每个元素的类型。

ts 复制代码
let person: [string, number];

赋值时,必须遵守定义的类型和顺序。

ts 复制代码
person = ["Alice", 25];
// console.log(person);// ["Alice", 25]

2.为什么使用元组?

元组的核心优势在于它提供了比数组更强的类型安全和结构化 ,它将数组的索引与元素的含义关联起来,让代码的意图更加清晰。
可以使用?来定义元组中的可选元素,但必须放在元组类型定义中的末尾

ts 复制代码
let optionalTuple: [string, number, boolean?]
optionalTuple = ["Alice", 25];
optionalTuple = ["Alice", 25, true];
// console.log(optionalTuple);// ["Alice", 25, true]

可以使用...type[]来定义元组的剩余元素,也必须放在元组类型定义中的末尾

ts 复制代码
let restTuple: [string, ...number[]]
restTuple = ['Alice'];
restTuple = ['Alice', 25, 30, 35];
// console.log(restTuple);// ["Alice", 25, 30, 35]

3.使用场景

栗子1:函数返回多个值

当你需要从一个函数返回多个、不同类型的值时,元组是很好的选择。例如,一个函数可能需要返回一个状态码(数字)和一条描述信息(字符串)。

ts 复制代码
const getStatus = (): [number, string] => {
    return [200, "OK"];
}

const [statusCode, message] = getStatus();
// console.log(statusCode, message);// 200 OK

栗子2:定义键值对

元组非常适合用来表示简单的键值对,例如 [key, value]。当你从一个 Map 或其他数据结构中迭代出键值对时,元组的结构非常清晰。

ts 复制代码
const userMap = new Map<string, number>();
userMap.set("Alice", 25);
userMap.set("Bob", 30);

for (const [name, age] of userMap.entries()) {
    console.log(`${name} is ${age} years old`);
}
// Alice is 25 years old
// Bob is 30 years old

栗子3:表示固定格式的数组

当你需要存储一组固定长度、固定类型的数据时,元组比对象更轻量。

ts 复制代码
let point: [number, number] = [10, 20];
let date: [number, number, number] = [2025, 8, 26]

4.元组与普通数组的区别

特性 元组(tuple) 普通数组(Array)
长度 固定长度 可变长度
类型 每个位置的类型可不同但固定 所有元素的类型都相同
用途 结构化数据,返回多个值 存储相同类型元素的集合
示例 [string,number] number[]或Array<number>
相关推荐
EndingCoder9 小时前
索引类型和 keyof 操作符
linux·运维·前端·javascript·ubuntu·typescript
重铸码农荣光14 小时前
TypeScript:JavaScript 的“防坑装甲”,写代码不再靠玄学!
前端·react.js·typescript
南山安14 小时前
TypeScript:更加安全规范的JavaScript
react.js·typescript·代码规范
白兰地空瓶15 小时前
Zustand:若 React 组件是公民,谁来当“中央银行”?—— 打造轻量级企业级状态管理
react.js·typescript
白兰地空瓶19 小时前
拒绝 "AnyScript":从 Todo List 实战看 TypeScript 的真香定律
typescript
UIUV19 小时前
React+Zustand实战学习笔记:从基础状态管理到项目实战
前端·react.js·typescript
用户120391129472619 小时前
从零起步,用TypeScript写一个Todo App:踩坑与收获分享
前端·react.js·typescript
南村群童欺我老无力.20 小时前
Flutter 框架跨平台鸿蒙开发-鸿蒙计算器开发教程
vscode·flutter·华为·typescript·harmonyos
qiqiliuwu20 小时前
VUE3+TS+ElementUI项目中监测页面滚动scroll事件以及滚动高度不生效问题的解决方案(window.addEventListener)
前端·javascript·elementui·typescript·vue
南村群童欺我老无力.20 小时前
Flutter 框架跨平台鸿蒙开发 - 从零开发经典推箱子游戏
flutter·游戏·华为·typescript·harmonyos