React中如何从父组件直接推断子组件的泛型类型参数？

当然可以实现这种需求，核心思路是让父组件的泛型参数自动传递给子组件，无需单独给子组件显式指定类型。下面是具体的实现方案：

实现步骤 #

1. 定义带泛型的父组件
   先创建一个接收泛型参数的父组件，以表单场景的Form组件为例，泛型T代表我们要约束的数据类型：

   import React from 'react';
   
   type FormProps<T> = {
     children: React.ReactNode;
     // 可添加其他父组件属性，比如initialValues、onSubmit等
   };
   
   export function Form<T extends object>(props: FormProps<T>) {
     return <form>{props.children}</form>;
   }
   

2. 将子组件作为父组件的命名空间成员
   把需要推断类型的子组件（比如Field）挂载到父组件的命名空间下，让子组件的泛型参数和父组件的泛型参数关联：

   type FormFieldProps<T> = {
     name: keyof T; // 约束name必须是T的合法属性名
     label: string;
   };
   
   export namespace Form {
     export function Field<T extends object>(props: FormFieldProps<T>) {
       return (
         <div className="form-field">
           <label htmlFor={String(props.name)}>{props.label}</label>
           <input id={String(props.name)} name={String(props.name)} />
         </div>
       );
     }
   }
   

3. 使用时仅给父组件指定泛型
   当你使用组件时，只需要给父组件Form传入目标类型MyType，子组件Form.Field会自动推断出name的合法取值：

   // 定义你的目标类型
   type MyType = {
     firstname: string;
     lastname: string;
     age: number;
   };
   
   function App() {
     return (
       <Form<MyType>>
         <Form.Field name="firstname" label="First Name" /> {/* 合法，无类型错误 */}
         <Form.Field name="lastname" label="Last Name" /> {/* 合法 */}
         <Form.Field name="test" label="Test" /> {/* 报错："test"不属于MyType的属性 */}
       </Form>
     );
   }
   

原理说明 #

通过将子组件作为父组件的命名空间成员，TypeScript会根据父组件的泛型参数自动推导子组件的泛型参数，从而实现子组件对属性的类型约束。这种方式不需要额外传递类型参数，完全由父组件的泛型驱动子组件的类型检查。

内容的提问来源于stack exchange，提问作者happypeepo