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

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

以下是修改后的代码：

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

30

查看详情

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]

代码解释

1. readonly unknown[] | []: T 现在被约束为 readonly unknown[] 或者空数组 []。 readonly 关键字确保我们不会意外修改数组，unknown 允许数组包含任何类型的元素。 | [] 允许函数不传参数。
2. { -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 代码至关重要。

以上就是类型推断：如何在 TypeScript 中保留数组索引信息的详细内容，更多请关注php中文网其它相关文章！