TypeScript：推断数组类型并保留索引信息

本文旨在解决 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]

代码解释

纳米搜索

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

30

查看详情

1. readonly unknown[] | []: 我们将泛型 T 约束为 readonly unknown[] 或 []。readonly 确保传入的数组不会被修改，unknown 允许传入任何类型的函数。| [] 允许函数不传入任何参数。
2. { -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 代码，避免类型丢失和潜在的运行时错误。在处理函数参数数组时，请务必考虑使用这种方法来确保类型推断的准确性。

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