TypeScript推断数组类型与索引保留方法

本文深入探讨了TypeScript中推断数组类型并保留索引的关键技术，旨在解决函数参数数组类型推断时类型信息丢失的问题。针对简单泛型推断导致索引信息丢失，类型合并为联合类型的情况，提出了使用`readonly unknown[]`和映射类型的解决方案。通过约束泛型类型和遍历数组索引，精准推断每个位置元素的类型，有效避免类型信息的丢失，确保类型定义的精确性。本文提供了详细的代码示例和解释，并强调了`keyof`和`ReturnType`在映射类型中的重要作用，帮助开发者编写更精确、更安全的TypeScript代码，提升代码质量和可维护性。掌握这些技巧，可以有效避免潜在的运行时错误，提高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]

代码解释

1. readonly unknown[] | []: 我们将泛型 T 约束为 readonly unknown[] 或 []。readonly 确保传入的数组不会被修改，unknown 允许传入任何类型的函数。| [] 允许函数不传入任何参数。
2. { -readonly [P in keyof T]: ReturnType }: 这是一个映射类型，它遍历 T 的所有键（索引）。
   • keyof T 获取 T 的所有键。
   • P in keyof T 遍历 T 的每个键。
   • T[P] 获取 T 中索引为 P 的元素类型，即函数类型。
   • ReturnType 获取函数类型的返回值类型。
   • -readonly 移除属性的 readonly 修饰符，确保返回的是可变数组。

通过这种方式，我们可以准确地推断出数组中每个位置元素的类型，并保留索引信息。

示例说明

在上面的例子中，getValues 函数接收两个函数 () => "a" 和 () => 123 作为参数。

• T 被推断为 [() => "a", () => 123]。
• 映射类型遍历 T 的键，即 0 和 1。
• ReturnType 返回 "a" 的类型，即 string。
• ReturnType 返回 123 的类型，即 number。

因此，最终 values 的类型被推断为 [string, number]，这正是我们期望的结果。

注意事项

• 使用 readonly 可以确保传入的数组不会被意外修改。
• 映射类型是一种强大的 TypeScript 特性，可以用于创建基于现有类型的新类型。
• 理解 keyof 和 ReturnType 的用法对于理解映射类型至关重要。

总结

通过使用 readonly unknown[] 和映射类型，我们可以有效地推断 TypeScript 数组类型，并保留数组的索引信息。这种方法可以帮助我们编写更精确、更安全的 TypeScript 代码，避免类型丢失和潜在的运行时错误。在处理函数参数数组时，请务必考虑使用这种方法来确保类型推断的准确性。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《TypeScript推断数组类型与索引保留方法》文章吧，也可关注golang学习网公众号了解相关技术文章。