Typescript 如何为对象数组中的每个条目推断不同的泛型

你可以写a mapped type over an array/tuple type，就像这样:

function RenderDataChart<T extends any[]>(
  series: [...{ [I in keyof T]: DataSeries<T[I]> }]
) {
  series.forEach(<TI,>(s: DataSeries<TI>) => {
    s.data.forEach((d) => {
      const x = s.getX(d);
      const y = s.getY(d);
      const color = s.getColor(d);
      render(x, y, color, d) // render logic
    });
  })
}

映射类型{[I in keyof T]: DataSeries<T[I]>}实质上取tuple type个T，并用DataSeries<>"包装"每个元素T[I].因此，如果T是[X, Y, Z]，则映射的类型是[DataSeries<X>, DataSeries<Y>, DataSeries<Z>].并且幸运的是，编译器能够从映射类型{[I in keyof T]: DataSeries<T[I]>}中提取infer T.

请注意，我将映射类型包装在variadic tuple type、[...+]中.这只是给了编译器一个提示，它应该将数组文字的类型推断为元组类型，而不是规则array.也就是说，您希望它将您的series输入看作像[DataSeries<X>, DataSeries<Y>, DataSeries<Z>]这样的类型，而不是像(DataSeries<X> | DataSeries<Y> | DataSeries<Z>)[]这样可能表现不佳的类型.

这是基本的方法，但不幸的是，在从映射类型进行推断时，TypeScrip不能contextually infer个d个回调参数的类型.microsoft/TypeScript#53018有一个开放的功能请求:

RenderDataChart([
  {
    data: [{ val: 1, seq: 12346 }, { val: 2, seq: 12347 }],
    getX: (d) => d.val, // err
    getY: (d) => d.seq, // err
    getColor: (d) => d.val === 0 ? "red" : "blue", // err
  },
  {
    data: [{ amount: 6, type: 5 }, { amount: 20, type: 4 }],
    getX: (d) => d.amount, // err
    getY: (d) => d.type, // err
    getColor: () => "green", 
  },
]);
// T inferred as [{ val: number; seq: number;}, { amount: number; type: number;}]>

除非有解决方法，否则您将需要一个generic帮助函数来帮助进行回调参数推断.像这样的东西

const h = <T,>(x: DataSeries<T>) => x;

应该可以工作，如下所示:

RenderDataChart([
  h({
    data: [{ val: 1, seq: 12346 }, { val: 2, seq: 12347 }],
    getX: (d) => d.val,
    getY: (d) => d.seq,
    getColor: (d) => d.val === 0 ? "red" : "blue",
  }),
  h({
    data: [{ amount: 6, type: 5 }, { amount: 20, type: 4 }],
    getX: (d) => d.amount,
    getY: (d) => d.type,
    getColor: () => "green",
  }),
]);
// T inferred as [{ val: number; seq: number;}, { amount: number; type: number;}]>

现在一切都按预期进行了.类型自变量T被推断为元组类型，其中每个元素对应于series的每个元素，并且回调参数d被上下文类型化为该元素类型.

Playground link to code个