本文旨在解决 TypeScript 中函数参数类型推断时丢失数组索引信息的问题。通过使用 readonly unknown[] 和映射类型，我们能够精确地推断出函数参数的返回类型，从而获得具有正确索引类型的数组。文章将提供详细的代码示例和解释，帮助开发者更好地理解和应用这一技巧。
在 TypeScript 中，我们经常需要编写接受函数作为参数的函数，并根据这些函数的返回值来推断类型。当这些函数参数被组织成数组时，一个常见的问题是 TypeScript 可能会将数组的类型推断为联合类型的数组，而不是具有特定索引类型的元组。这意味着我们可能会丢失数组中每个元素的类型信息。
问题描述
考虑以下场景：
const getValues: <T extends Array<() => any>>( ...args: T ) => T extends Array<() => infer R> ? R[] : null = (...args) => args.map((arg) => arg()); const values = getValues( () => "a", () => 123 );
我们希望 values 的类型是 [string, number]，但实际上 TypeScript 推断出的类型是 (string | number)[]。 这是因为 T extends Array<() => any> 这种写法，导致了类型推断的泛化，从而丢失了索引信息。
解决方案
为了解决这个问题，我们可以使用 readonly unknown[] 和映射类型。 readonly unknown[] 保证了数组的只读性，并且能够更精确地推断数组元素的类型。映射类型允许我们遍历数组的键，并根据每个键对应的元素的类型进行转换。
以下是修改后的代码：
const getValues: <T extends readonly unknown[] | []>(
...args: T
) => { -readonly [P in keyof T]: ReturnType<T[P]> } = (...args) =>
args.map((arg) => arg());
const values = getValues(
() => "a",
() => 123
);
// values 的类型现在是: [string, number]代码解释
- readonly unknown[] | []: T 现在被约束为 readonly unknown[] 或者空数组 []。 readonly 关键字确保我们不会意外修改数组，unknown 允许数组包含任何类型的元素。 | [] 允许函数不传参数。
- { -readonly [P in keyof T]: ReturnType<T[P]> }: 这是一个映射类型，它遍历 T 的所有键（keyof T），并为每个键 P 应用 ReturnType<T[P]>。 ReturnType<T[P]> 获取键 P 对应的元素的返回类型。 -readonly 移除了属性的 readonly 修饰符，因为我们想要返回一个可变数组。
示例
假设我们有以下函数：
const fn1 = () => "hello"; const fn2 = () => 123; const fn3 = () => true;
使用 getValues 函数：
const result = getValues(fn1, fn2, fn3); // result 的类型是: [string, number, boolean]
注意事项
- 使用 readonly 可以提高代码的安全性，防止意外修改数组。
- 映射类型是 TypeScript 中强大的类型操作工具，可以用来转换和操作类型。
- unknown 类型表示我们不知道变量的具体类型，但仍然可以安全地使用它。
总结
通过使用 readonly unknown[] 和映射类型，我们可以有效地解决 TypeScript 中函数参数类型推断时丢失数组索引信息的问题。这种方法可以确保我们获得具有正确索引类型的数组，从而提高代码的类型安全性和可维护性。理解并掌握这些技巧对于编写高质量的 TypeScript 代码至关重要。
