这是我的代码:

export interface PatientFormInputs {
  patientId: string;
  firstName: string;
  lastName: string;
  email: string;
  day: string;
  month: string;
  year: string;
}

In react component: 

const {
    control,
    register,
    handleSubmit,
    watch,
    reset,
    // formState: { isValid },
  } = useForm<PatientFormInputs>({
    defaultValues: {
      month: '',
    },
  });

 return (
   <PatientInfo
        register={register}
        initialData={initialData}
        selectedMonth={selectedMonth}
        setSelectedMonth={setSelectedMonth}
      />
 )

通过这种方式,我在PatientInfo中添加了接口:

interface PatientInfoProps {
  register: UseFormRegister<PatientFormInputs>;
  initialData?: PatientBE;
  selectedMonth: string | null;
  setSelectedMonth: Dispatch<SetStateAction<string | null>>;
}

export const PatientInfo: FC<PatientInfoProps> = ({
  register,
  initialData,
  selectedMonth,
  setSelectedMonth,
}) => {...}

但是我想使用泛型进行注册,比如:register: UseFormRegister<T>在某些地方,我需要很少的不同数据,所以我想灵活地使用泛型.

如何做到这一点(我try 了一些方法,但总是面临的问题和错误)?

我试过这样的方法:

interface PatientInfoProps<T> {
  register: UseFormRegister<T>;
...
}

也try 了类似的东西,但都不是很好.

我希望能够将泛型用于寄存器类型,而不会出现问题.

推荐答案

如果要在PatientInfoProps接口中使用UseFormRegister类型的泛型,可以为PatientInfoProps定义泛型类型,然后在register属性中使用该泛型类型.

import { FC, Dispatch, SetStateAction } from 'react';
import { UseFormRegister } from 'react-hook-form';

// Define a generic type for PatientInfoProps
interface PatientInfoProps<T> {
  register: UseFormRegister<T>;
  initialData?: PatientBE; // Assuming PatientBE is defined elsewhere
  selectedMonth: string | null;
  setSelectedMonth: Dispatch<SetStateAction<string | null>>;
}

Use the generic type in the PatientInfo component
export const PatientInfo: FC<PatientInfoProps<PatientFormInputs>> = ({
  register,
  initialData,
  selectedMonth,
  setSelectedMonth,
}) => {
  // Your component logic here
};

在上面的示例中,PatientInfoProps是一个接受类型参数T的泛型接口.然后,register属性的类型化为UseFormRegister<T>.使用PatientInfo组件时,您可以为T指定所需的类型,例如,在您的示例中为PatientFormInputs.

确保在PatientInfoProps中使用之前定义了PatientFormInputs.如果它是在同一文件中定义的,请确保它出现在PatientInfoProps接口之前.

这种方法应该为您的Reaction组件中的register类型泛型提供所需的灵活性.

Typescript相关问答推荐

如何在单击停止录制按钮后停用摄像机?(使用React.js和Reaction-Media-Recorder)

如何使用函数填充对象?

如何在LucideAngular 添加自定义图标以及如何使用它们

如何在Type脚本中动态扩展函数的参数类型?

ANGLING v17 CLI默认设置为独立:延迟加载是否仍需要@NgModule进行路由?

声明文件中的类型继承

保护函数调用,以便深度嵌套的对象具有必须与同级属性函数cargument的类型匹配的键

API文件夹内的工作员getAuth()帮助器返回:{UserID:空}

我怎样才能正确地输入这个函数,使它在没有提供正确的参数时出错

17个Angular 的延迟观察.如何在模板中转义@符号?

S,为什么我的T扩展未定义的条件在属性的上下文中不起作用?

作为函数参数的联合类型的键

带有';的类型脚本嵌套对象可选属性错误满足';

如何在Vuetify 3中导入TypeScript类型?

TS 排除带点符号的键

具有枚举泛型类型的 Typescript 对象数组

为什么 Typescript 无法正确推断数组元素的类型?

递归地排除/省略两种类型之间的公共属性

错误:仅允许在‘使用服务器’文件中导出异步函数

如何在故事书的Typescript 中编写decorator ?