在函数的类型注释中提取对象的属性及其泛型类型

Question

问题

如何在函数的类型注释中提取对象的属性及其泛型类型？

我需要能够推断出RequestData 的类型，以便该类型正确传播到request 回调。

目前在调用此函数时，我必须使用类型断言编写我的 request 回调。我希望我的 IDE 根据传入的 Form 对象推断 data 的类型。

此外，感谢任何关于如何在我的示例中摆脱 any 的建议。

谢谢！

示例

class Field<T> {
  value: T;

  constructor(value: T) {
    this.value = value;
  }
}

class Form {
  // Object containing all Field objects in this Form
  fields: Record<string, Field<any>>;

  constructor({ fields }: { fields: Record<string, Field<any>>; ) {
    this.fields = fields;
  }
}



const submit = async <Response extends unknown, RequestData extends Record<string, unknown>>(
  form: Form,
  request: (data: RequestData) => Promise<Response>,
): Promise<Response> => {
  const fieldsAsGenerics = {} as RequestData; // Extract value stored in every form.field

  return await request(fieldsAsGenerics);
};



const myForm = new Form({
   fields: {
    name: new Field<string>('Charlie'),
    age: new Field<number | null>(66),
  }
});

submit(myForm, async (data) => {
  // data should be of type { [K in keyof typeof myForm.fields]: typeof myForm.fields[K] }
  // which in this case is { name: string; age: number | null }
  // Actual type is unknown
});

Playground Link

另见

• TypeScript: how to extract the generic parameter from a type?
• Pass Object Key As Generic

Answer 1

这个问题的根源是您的Form 类型不是通用的，因此编译器不知道有关存在的字段类型的任何信息。一个Form 对象在编译时无法与任何其他Form 区分开来，因此它们不能根据它们所持有的字段类型而具有不同的行为。

所以，让我们将 Form 设为它所包含的包含 Record 的字段的类型。

class Form<T extends Record<string, Field<any>>> {
  // Object containing all Field objects in this Form
  fields: T

  constructor({ fields }: { fields: T}) {
    this.fields = fields;
  }
}

现在，我们使用实用程序类型从上述记录类型中提取 RequestData 类型（实际上是移除 Field 包装器）。

type ExtractFieldValues<T extends Record<string, Field<any>>> = {
    [K in keyof T]: T[K] extends Field<infer V> ? V : never;
};

我们可以调整submit 函数以使用新类型，但需要注意一点。当您从Field 的实例中拆箱值时，总是需要一个类型断言。编译器不够警觉，无法分析您可能使用的任何循环并保证已包含 Fields 类型的每个属性：

const submit = async <Response extends unknown, Fields extends Record<string, Field<any>>>(
  form: Form<Fields>,
  request: (data: ExtractFieldValues<Fields>) => Promise<Response>,
): Promise<Response> => {
  const fieldsAsGenerics = {
      // Extract value stored in every form.field
  } as ExtractFieldValues<Fields>;
  // A type assertion will ALWAYS be required here:
  // the compiler can't infer that you're looping over every
  // property of the form type and extracting T from Field<T>.
  
  return await request(fieldsAsGenerics);
};

为避免类型断言，将值直接存储在 fields 对象中而不使用 Field 包装器可能是明智之举，但根据您的代码的其余部分，这可能是不可能的或有用的。

现在可以在使用中正确推断类型（将鼠标悬停在 Playground 链接中进行确认）：

const myForm = new Form({
 fields: {
    name: new Field<string>(/*Field constructor argsargs*/),
    age: new Field<number | null>(/*Field constructor args*/)
  }
});

submit(myForm, async (data) => {
  // data should be of type { [K in keyof typeof myForm.fields]: typeof myForm.fields[K] }
  // which in this case is { name: string; age: number | null }
});

Playground link