React中使用forwardRef时能否实现类型推断？

常规组件能正常实现类型推断，但使用forwardRef时会丢失该能力，这里提供可行的解决办法：

核心思路 #

React的forwardRef默认无法保留泛型参数的自动推断能力，需要手动为组件添加泛型类型签名，让TypeScript能够识别并推断泛型参数。

修改方案 #

先定义泛型组件类型，再将forwardRef创建的组件断言为该类型，具体代码调整如下：

import { forwardRef, type RefAttributes } from 'react';
import type { Control, FieldValues } from 'react-hook-form';

import { FormError } from '@/components/form-error';
import {
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from '@/components/ui/form';
import type { InputProps } from '@/components/ui/input';
import { Input } from '@/components/ui/input';

interface AppInputProps<
    TFieldValues extends FieldValues = FieldValues,
    TContext = unknown,
> extends InputProps {
    control: Control<TFieldValues, TContext>;
    label?: string;
}

// 定义泛型组件类型
type AppInputComponent = <TFieldValues extends FieldValues = FieldValues, TContext = unknown>(
    props: AppInputProps<TFieldValues, TContext> & RefAttributes<HTMLInputElement>
) => JSX.Element;

const AppInput = forwardRef<HTMLInputElement, AppInputProps<any>>(
    ({ control, label, name, ...props }, ref) => {
        if (!name)
            return (
                <FormError message="Can't render input without 'name' attribute" />
            );
        return (
            <FormField
                control={control}
                name={name}
                render={({ field }) => (
                    <FormItem>
                        <FormLabel>{label}</FormLabel>
                        <FormControl>
                            <Input {...props} {...field} ref={ref} />
                        </FormControl>
                        <FormMessage />
                    </FormItem>
                )}
            />
        );
    }
) as AppInputComponent;

AppInput.displayName = 'AppInput';

export { AppInput };

效果说明 #

通过上述调整，AppInput组件就能像普通泛型组件一样，自动推断TFieldValues和TContext的类型，实现你期望的类型推断效果（如图所示）：

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