TypeScript中如何传入const数组并返回映射后的const数组

刚好之前我也纠结过这个问题！你原来的代码里，虽然用了const T extends ReadonlyArray<string>，但默认的Array.map返回的类型是普通数组（比如string[]），TypeScript没法知道它和输入数组的长度完全一致，所以解构的时候多写个变量也不会报错，这显然不是你想要的效果。

要解决这个问题，我们需要让函数的返回类型和输入的元组完全对齐长度和元素类型，具体可以这么改：

function upper<const T extends ReadonlyArray<string>>(items: T): { [K in keyof T]: Uppercase<T[K]> } {
  // 加个类型断言，帮TypeScript识别出对应的大写字面量类型
  return items.map((item) => item.toUpperCase() as Uppercase<T[K]>);
}

现在来测试一下效果：

// 传入const数组后，result会被推断为 readonly ["FOO", "BAR"] 类型
const result = upper(['foo', 'bar'] as const);

// 这里解构三个变量会直接触发TypeScript错误，完美符合你的需求！
const [a, b, c] = result; // 类型错误：源具有 2 个元素，但目标需要 3 个。

我来拆解一下关键的改动：

• 泛型const T extends ReadonlyArray<string>：让TypeScript把输入的数组推断成只读的元组字面量类型，而不是宽泛的string[]，这样能保留每个元素的具体值和数组长度。
• 返回类型{ [K in keyof T]: Uppercase<T[K]> }：这是TypeScript的映射类型，它会遍历输入元组的每个索引，把每个元素类型转换成对应的大写字面量类型，同时严格保留元组的长度。
• 里面的as Uppercase<T[K]>：因为JavaScript的toUpperCase()返回的是普通string类型，TypeScript没法自动关联到原元素的字面量大写，所以需要这个断言来帮它对齐类型。

这样改完之后，函数不仅能返回和输入同长度的const数组类型，连每个元素的具体字面量类型也能精准保留，解构时长度不匹配的话TypeScript会立刻报错，完全满足你的需求~

内容来源于stack exchange