本文旨在解决 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: ( ...args: T) => { -readonly [P in keyof T]: ReturnType } = (...args) => args.map((arg) => arg());const values = getValues( () => "a", () => 123);// values 的类型为 [string, number]
代码解释
readonly unknown[] | []: 我们将泛型 T 约束为 readonly unknown[] 或 []。readonly 确保传入的数组不会被修改，unknown 允许传入任何类型的函数。| [] 允许函数不传入任何参数。{ -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：推断数组类型并保留索引信息的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528487.html
微信扫一扫 
支付宝扫一扫 
