TypeScript中拼接两类数组后解构时如何保留原有类型信息

你需要的是让TypeScript将合并后的数组识别为固定位置对应固定类型的元组，而非长度可变、元素为联合类型的Array<A | B>，可以通过泛型工具函数实现，TS 4.0及以上版本可直接使用以下方案：

实现代码 #

// 示例类型定义
type A = { type: 'a'; value: number };
type B = { type: 'b'; text: string };

// 泛型元组合并工具，保留两个输入数组的位置类型
function concatTuple<T extends unknown[], U extends unknown[]>(arr1: [...T], arr2: [...U]): [...T, ...U] {
  return [...arr1, ...arr2];
}

// 测试用例，as const用来让TS识别为固定长度的元组而非普通数组
const arrA = [{type: 'a', value: 1}, {type: 'a', value: 2}] as const satisfies A[];
const arrB = [{type: 'b', text: '测试1'}, {type: 'b', text: '测试2'}] as const satisfies B[];

const concatenated = concatTuple(arrA, arrB);

类型效果验证 #

解构时会自动匹配对应位置的原有类型，不会出现联合类型：

const [a1, a2] = concatenated;
// a1、a2自动推导为A类型

const [,, b1, b2] = concatenated;
// b1、b2自动推导为B类型

注意事项 #

• 若你的TypeScript版本低于4.0，将泛型里的unknown[]替换为any[]即可正常使用
• 必须给原数组加as const断言，否则TS会将其推导为长度可变的普通数组，无法保留位置类型
• 如果数组是动态生成、编译阶段无法确定长度的场景，该方案不适用，只能手动给解构后的变量加类型断言

内容的提问来源于stack exchange，提问作者Diegor S Grung