类型推断：如何在 TypeScript 中保留数组索引信息

本文旨在解决 TypeScript 中函数参数类型推断时丢失数组索引信息的问题。通过使用 readonly unknown[] 和映射类型，我们能够精确地推断出函数参数的返回类型，从而获得具有正确索引类型的数组。文章将提供详细的代码示例和解释，帮助开发者更好地理解和应用这一技巧。

在 TypeScript 中，我们经常需要编写接受函数作为参数的函数，并根据这些函数的返回值来推断类型。当这些函数参数被组织成数组时，一个常见的问题是 TypeScript 可能会将数组的类型推断为联合类型的数组，而不是具有特定索引类型的元组。这意味着我们可能会丢失数组中每个元素的类型信息。

问题描述

考虑以下场景：

const getValues:  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[] 保证了数组的只读性，并且能够更精确地推断数组元素的类型。映射类型允许我们遍历数组的键，并根据每个键对应的元素的类型进行转换。

以下是修改后的代码：

薏米AI

YMI.AI-快捷、高效的人工智能创作平台

下载

const getValues: (
  ...args: T
) => { -readonly [P in keyof T]: ReturnType } = (...args) =>
  args.map((arg) => arg());

const values = getValues(
  () => "a",
  () => 123
);

// values 的类型现在是: [string, number]

代码解释

1. readonly unknown[] | []: T 现在被约束为 readonly unknown[] 或者空数组 []。 readonly 关键字确保我们不会意外修改数组，unknown 允许数组包含任何类型的元素。 | [] 允许函数不传参数。
2. { -readonly [P in keyof T]: ReturnType }: 这是一个映射类型，它遍历 T 的所有键（keyof T），并为每个键 P 应用 ReturnType。 ReturnType 获取键 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 代码至关重要。