时间戳

首页 > 解决方案 > 返回可变长度通用数组元组的函数

typescript - 返回可变长度通用数组元组的函数

问题描述

考虑以下：

function makeOutputArrayBasedOnInputArray<T>(arrayOfStuff: T[]) {
    return arrayOfStuff.map(item => ({ item }));
}

const x = makeOutputArrayBasedOnInputArray([1, 'two']);
const y = x[0] // { item: string | number; }
const z = x[1] // { item: string | number; }

我更喜欢的是要浮出水面的类型：

const y = x[0] // { item: number; }
const z = x[1] // { item: string; }

所以想象一下这个doIt函数正在返回一个完全通用且长度可变的元组类型；由函数的输入驱动。所以这也可以：

const x = makeOutputArrayBasedOnInputArray([7, 'nine', Date]);
const a = x[0] // { item: number; }
const b = x[1] // { item: string; }
const c = x[2] // { item: Date; }

这可能吗？还是我已经达到了infer和元组的极限？

另请参阅：TypeScript 中的可变长度数组元组？和Typescript，通用可变参数工厂函数返回元组

根据@A_blop 的回答更新：

您好，感谢您的回答！虽然它确实回答了这个问题，但它依赖于调用者使用as const. 没有as const，唉，它不起作用。

这可能是关键。一些上下文：问题背后的问题是我为改进 react-query 的类型定义而提出的 PR：https ://github.com/tannerlinsley/react-query/pull/1527/files

目前的变化是这样的：

export function useQueries<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData
>(
  queries: UseQueryOptions<TQueryFnData, TError, TData>[]
): UseQueryResult<TData, TError>[] {
// ...
}

这很好，但存在非特定类型推断问题。理想情况下，我们希望这种行为：

const result = useQueries([
    { queryKey: key1, queryFn: () => 1 },
    { queryKey: key2, queryFn: () => 'two' },
])
// result[0].data => number | undefined
// result[1].data => string | undefined

但不需要调用者指定as const- 这可能是不可能的？

标签： typescripttuplesinferred-type

解决方案

您可以添加由映射元组类型组成的显式函数返回类型：

function fn<T extends readonly any[]>(arr: T): {[K in keyof T]: {item: T[K]} } {
    return arr.map(item => ({ item })) as any;
}

const x = fn([1, 'two'] as const);
// x: readonly [{ item: 1; }, { item: "two"; }]
const y = x[0] // y: { item: 1; }
const z = x[1] // z: { item: "two"; }

更新：要从被调用方缩小类型，您可以使用可变元组类型（TS 4.0）：

function fn<T extends readonly any[]>(arr: [...T]): // <-- note [...T]
  {[K in keyof T]: {item: T[K]} } {...}

操场代码

推荐阅读