TypeScript中如何从const数组提取值并保留元组类型？

TypeScript 中默认的 Array.prototype.map 方法不会保留原数组的元组结构——哪怕你用 as const 断言了原数组为只读元组，map 返回的结果依然会被推断为联合类型的数组（('A' | 'B' | 'C')[]）。要实现预期的元组类型，有两种可行方案：

方案一：自定义保留元组结构的map函数 #

通过泛型约束和类型映射，写一个专门处理元组的map工具函数，让返回值自动继承原元组的结构：

const mapTuple = <T extends readonly any[]>(
  tuple: T,
  fn: (item: T[number], index: number) => any
): { [K in keyof T]: ReturnType<typeof fn> } => {
  return tuple.map(fn) as any;
};

const myArray = [
  { label: 'A title', value: 'A'},
  { label: 'B title', value: 'B'},
  { label: 'C title', value: 'C'},
] as const;

// myValues 类型为 readonly ["A", "B", "C"]
const myValues = mapTuple(myArray, v => v.value);

// 若需要可变元组，可添加类型转换
const mutableValues = mapTuple(myArray, v => v.value) as ["A", "B", "C"];

方案二：类型断言结合元组映射 #

如果你不想额外定义工具函数，可以直接通过类型映射提取元组的value类型，再对map结果做类型断言：

const myArray = [
  { label: 'A title', value: 'A'},
  { label: 'B title', value: 'B'},
  { label: 'C title', value: 'C'},
] as const;

// 定义元组值提取类型
type ExtractTupleValues<T extends readonly { value: any }[]> = { 
  [K in keyof T]: T[K]['value'] 
};

// myValues 类型为 ["A", "B", "C"]
const myValues = myArray.map(v => v.value) as ExtractTupleValues<typeof myArray>;

注意：方案二的类型断言需要确保map的逻辑确实是提取每个元素的value字段，如果后续修改map逻辑，需要同步调整类型，否则会出现类型不匹配的问题。

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