本文旨在解决 TypeScript 中推断函数参数数组类型时，如何保留数组元素的索引信息，避免类型丢失的问题。通过使用 readonly unknown[] 和映射类型，可以确保推断出的数组类型能够准确反映每个位置元素的具体类型，从而实现更精确的类型定义。
在 TypeScript 中，有时我们需要编写一个函数，该函数接收一个函数数组作为参数，并根据这些函数返回值的类型推断出一个新的数组类型。然而，简单地使用泛型和 infer 可能会导致类型信息丢失，特别是数组的索引信息。本文将介绍如何正确地推断 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)[]，但我们期望的是 [string, number]
我们期望 values 的类型是 [string, number]，即一个包含 string 和 number 类型的元组。但实际上，TypeScript 推断出的类型是 (string | number)[]，这是一个包含 string 或 number 类型的数组。这意味着我们丢失了数组元素的索引信息，导致类型变得不够精确。
解决方案
为了解决这个问题，我们可以使用 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 获取 T 的所有键。
- P in keyof T 遍历 T 的每个键。
- T[P] 获取 T 中索引为 P 的元素类型，即函数类型。
- ReturnType<T[P]> 获取函数类型的返回值类型。
- -readonly 移除属性的 readonly 修饰符，确保返回的是可变数组。
通过这种方式，我们可以准确地推断出数组中每个位置元素的类型，并保留索引信息。
示例说明
在上面的例子中，getValues 函数接收两个函数 () => "a" 和 () => 123 作为参数。
- T 被推断为 [() => "a", () => 123]。
- 映射类型遍历 T 的键，即 0 和 1。
- ReturnType<T[0]> 返回 "a" 的类型，即 string。
- ReturnType<T[1]> 返回 123 的类型，即 number。
因此，最终 values 的类型被推断为 [string, number]，这正是我们期望的结果。
注意事项
- 使用 readonly 可以确保传入的数组不会被意外修改。
- 映射类型是一种强大的 TypeScript 特性，可以用于创建基于现有类型的新类型。
- 理解 keyof 和 ReturnType 的用法对于理解映射类型至关重要。
总结
通过使用 readonly unknown[] 和映射类型，我们可以有效地推断 TypeScript 数组类型，并保留数组的索引信息。这种方法可以帮助我们编写更精确、更安全的 TypeScript 代码，避免类型丢失和潜在的运行时错误。在处理函数参数数组时，请务必考虑使用这种方法来确保类型推断的准确性。
