TypeScript中如何正确解构包含不同类型元素的数组？

问题根源 #

TypeScript默认不会把函数返回的数组字面量推断为固定长度、固定位置类型的元组，而是会推断为(string | number | boolean)[]这类可变长度的联合类型数组，所以解构时没法和你指定的元组类型匹配。

方案1：给函数显式声明返回元组类型（最推荐） #

从函数定义源头固定返回值结构，后续所有调用都不需要额外做类型处理，类型安全性最高：

// 函数签名处直接声明返回的元组结构
const f = (): [boolean, string, number] => { 
  return [true, "text", 11]; 
}

// 解构时不需要额外加类型，TS会自动推断每个变量的类型
const [active, status, numberEleven] = f();
const twelve = numberEleven + 1; // 不会报错，numberEleven已被正确识别为number类型

如果你之前给函数内部的res变量声明类型没生效，先检查数组内每个元素的类型是否和元组对应位置的要求匹配：比如你代码里的warning是否为string类型、score是否为number类型，只要类型一一对应，返回res时TS也会正确识别返回值为元组类型。

方案2：解构时添加类型断言 #

如果不方便修改原函数的定义，可以在解构时直接对返回值做类型断言：

const f = ()=> { return [true,"text",11]; }
// 直接断言返回值为对应元组结构
const [active, status, numberEleven] = f() as [boolean, string, number];
const twelve = numberEleven + 1;

方案3：用const断言强制识别为元组 #

定义返回值时添加as const，TS会把数组字面量识别为只读元组：

const f = ()=> { return [true,"text",11] as const; }
const [active, status, numberEleven] = f();
// 此时numberEleven会被推断为字面量类型11，同样可以正常做数值运算
const twelve = numberEleven + 1;

内容的提问来源于stack exchange，提问作者chipimix