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

本文旨在解决 TypeScript 中函数参数类型推断时，如何保留数组索引信息的问题。通过使用 readonly unknown[] 和映射类型，我们可以确保函数返回的数组类型能够准确地反映输入参数的类型和顺序，避免类型信息丢失，从而获得更精确的类型提示和类型安全。

在 TypeScript 中，我们经常需要编写接受函数作为参数，并根据这些函数的返回值来推断数组类型的函数。一个常见的挑战是如何在推断数组类型的同时，保留数组的索引信息，即确保返回的数组类型能够准确地反映输入参数的类型和顺序。

考虑以下场景：我们需要一个函数 getValues，它接受任意数量的函数作为参数，每个函数返回不同的类型。我们希望 getValues 返回一个数组，其元素的类型与输入函数的返回值类型一一对应。例如，如果 getValues 接受一个返回字符串的函数和一个返回数字的函数，我们希望返回的数组类型是 [string, number]，而不是 (string | number)[]。

以下代码展示了如何实现这一目标：

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

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

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

代码解析：

稿定AI

拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能

下载

1. T extends readonly unknown[] | []: 这部分定义了泛型类型 T 的约束。readonly unknown[] 表示只读的未知类型数组。| [] 允许函数在不传递参数时也能正常工作。使用 readonly 确保了传入的参数不会被修改。
2. { -readonly [P in keyof T]: ReturnType }: 这部分是关键所在，它使用了映射类型。
   • keyof T 获取 T 中所有键的联合类型。
   • [P in keyof T] 遍历 T 中的每一个键 P。
   • ReturnType 获取 T 中键 P 对应元素的返回类型。T[P] 相当于访问数组 T 中索引为 P 的元素，由于元素是函数，所以使用 ReturnType 获取函数的返回值类型。
   • -readonly 移除只读修饰符，因为我们希望返回的数组不是只读的。

注意事项：

• readonly 的重要性： 使用 readonly 可以确保传入 getValues 的参数不会被修改，这是一种良好的编程实践，尤其是在处理函数参数时。
• 映射类型的强大之处： 映射类型是 TypeScript 中一个非常强大的特性，它可以帮助我们根据已有的类型创建新的类型，从而实现更灵活的类型操作。
• 类型推断的局限性： TypeScript 的类型推断有时可能无法达到我们的预期。在这种情况下，我们需要手动指定类型或使用更高级的类型技巧来帮助 TypeScript 进行正确的类型推断。

总结：

通过使用 readonly unknown[] 和映射类型，我们可以有效地推断 TypeScript 数组类型，并保留索引信息。这种方法可以帮助我们编写更类型安全、更易于维护的代码。在实际开发中，根据具体的需求选择合适的类型定义方式，可以有效地提高代码的可读性和可维护性。理解 TypeScript 的高级类型特性，例如映射类型和条件类型，对于编写高质量的 TypeScript 代码至关重要。