TypeScript 元组

普通数组要求所有元素是同一类型,而元组(Tuple)允许在固定长度内放置不同类型的元素。它在"需要把几个不同类型的值捆在一起、又不想为此新建对象"时非常顺手,例如函数一次返回多个值、描述表格的一行数据。

为什么需要元组

先看数组写法的问题:坐标点要存"数字 + 标签"两种数据,用联合类型数组约束不住顺序与数量:

// number | string 意味着每一位都可能是任一类型
let point: (number | string)[] = [1, "起点"];
point = ["起点", 1]; // 顺序乱了也能通过,不够严谨

元组按位置规定类型:第一个必须是 number,第二个必须是 string,编译器把错位挡在门外。

元组的基本写法

let point: [number, string] = [1, "起点"]; // 2 元组
console.log(point[0], point[1]); // 输出:1 起点

point = [2, "终点"]; // 类型与顺序都正确,合法
// point = ["终点", 2]; // 报错:string 不能赋给 number
// point = [3, "x", 4]; // 报错:元组长度超出 2

访问、赋值与解构

const user: [string, number] = ["张三", 30];
console.log(user[0]); // 输出:张三
console.log(user.length); // 输出:2

// 解构按位置取值
const [name, age] = user;
console.log(name, age); // 输出:张三 30

可选元素与只读元组

// 第三位可省:表示 [起点, 终点, 步长]
type Range = [number, number, number?];
const r1: Range = [0, 10];
const r2: Range = [0, 10, 2];
console.log(r1, r2); // 输出:[0, 10] [0, 10, 2]

// readonly 元组:创建后不可再改
const fixed: readonly [number, string] = [1, "只读"];
// fixed[0] = 2; // 报错:只读元组不允许赋值
console.log(fixed); // 输出:[1, '只读']

常见应用场景

// 场景一:函数返回多个不同类型的值
function splitName(full: string): [string, string] {
  const parts = full.split(" ");
  return [parts[0], parts[1]];
}
const [first, last] = splitName("Zhang San");
console.log(first, last); // 输出:Zhang San

// 场景二:剩余元素——前两项固定,后面任意个字符串
type Line = [number, number, ...string[]];
const line: Line = [1, 2, "甲", "乙", "丙"];
console.log(line); // 输出:[1, 2, '甲', '乙', '丙']

小结

元组是按位置固定类型的"有限长数组",常用于函数返回多值、坐标点、表格行等场景。访问越界在编译期就报错,比数组更安全;配合解构、可选元素与 readonly 用起来更顺手。

笔记加载中…