arrays - 推断元组数组中的类型

Question

考虑一下，我有一个结构，例如:

type X = { args: readonly any[]; fn: (...args: any[]) => void }[]

我想推断 X[number]['args']在 X[number]['fn'] ， 例如:

[{ args: [1,2,3] as const, fn: (a, b, c) => {} }] // a should be 1, b=2, c=3

为了做到这一点，我创建了辅助函数，它应该保持约束

type Arguments<Args> = Args extends any[] ? Args : Args extends readonly any[] ? Args : [];

type InferProviders<Providers> = {
  // Providers[Property] is actually `unknown`. Why?
  [Property in keyof Providers]: Providers[Property] extends { args: infer Args } ? { args: Args, fn: (...args: Arguments<Args>) => any } : never
};

function fn<Providers>(providers: InferProviders<Providers>) {
  return providers;
}

但是当我使用这个函数时，我没有得到预期的结果:

const x = fn([
  { args: [1,2,3], fn: (a, b, c) => {} }, // expected `a` to be 1, b = 2, c = 3
  { args: ['foo', 'bar', 'baz'], fn: (a, b, c) => {} }, // a = 'foo', b = 'bar', c = 'baz'
  { args: ['x', 'y', 'z'], fn: (e, b, c) => {} }, // e = 'x', b ='y',  c = 'z'
] as const); 
// typeof x is [never, never, never]

Playground
谁能帮助如何正确推断类型？

Answer 1

TypeScript 编译器并不擅长推断 generic类型参数和 contextual type同时回调参数，如果一个依赖于另一个，尤其是在单个函数参数中。这是 TypeScript 的设计限制。见 microsoft/TypeScript#38872对于类似的问题，尤其是 this comment这解释了发生了什么。
我能想象为你做的最好的 fn()所写的将是这样重写打字:

type InferProviders<T> = { [K in keyof T]: 
  { args: T[K], fn: (...args: Extract<T[K], readonly any[]>) => any } 
};

function fn<P extends readonly (readonly any[])[]>(
  providers: InferProviders<P>) {
  return providers;
}

你会看到它编译没有错误，实际上产生了一个正确类型的值:

const x = fn([
  { args: [1, 2, 3], fn: (a, b, c) => { } }, 
  { args: ['foo', 'bar', 'baz'], fn: (a, b, c) => { } }, 
  { args: ['x', 'y', 'z'], fn: (e, b, c) => { } }, 
] as const); // okay


/* const x: readonly [{
    args: readonly [1, 2, 3];
    fn: (args_0: 1, args_1: 2, args_2: 3) => any;
}, {
    args: readonly ["foo", "bar", "baz"];
    fn: (args_0: "foo", args_1: "bar", args_2: "baz") => any;
}, {
    args: readonly ["x", "y", "z"];
    fn: (args_0: "x", args_1: "y", args_2: "z") => any;
}] */

但不幸的是，回调参数的上下文类型推断发生得太晚，以至于它们无法在回调实现本身中发挥作用:

const x = fn([
  { args: [1, 2, 3], fn: (a, b, c) => { a.oops } }, // a, b, c are any
  { args: ['foo', 'bar', 'baz'], fn: (a, b, c) => { b.oops } }, // a, b, c are any
  { args: ['x', 'y', 'z'], fn: (e, b, c) => { c.oops } }, // e, b, c are any
] as const);

如果您愿意注释回调参数的类型(从而消除对上下文类型推断的需要)，那很好:

const y = fn([
  { args: [1, 2, 3], 
    fn: (a: 1, b: 2, c: 3) => { a.oops } }, // error!
  { args: ['foo', 'bar', 'baz'], 
    fn: (a: "foo", b: "bar", c: "baz") => { b.toUpperCase() } }, // okay
  { args: ['x', 'y', 'z'], 
    fn: (e: "x", b: "y", c: "z") => { c.toLowerCase() } }, // okay
] as const); // okay

但是，如果您真的想要上下文类型推断，那么不幸的是，如果不重构您调用 fn() 的方式，我将无能为力。 .例如，您可以要求某人使用专用函数创建提供程序，其中您使用单独的参数来表示 args。对于 fn ，以便编译器可以更轻松地进行推理:

function provider<T extends readonly any[]>(args: T, fn: (...args: T) => any) {
  return { args, fn };
}

然后您调用 fn()将会:

const z = fn([
  provider([1, 2, 3] as const, (a, b, c) => a.toFixed()),
  provider(["foo", "bar", "baz"] as const, (a, b, c) => b.toLowerCase()),
  provider([1, 2, 3] as const, (a, b, c) => a.toFixed()),
] as const)

这有效，但有点不幸。
Playground link to code