如何在TypeScript中同时使用函数重载和forwardRef？

完整实现代码 #

import React, { forwardRef } from 'react';

interface IInputElementStringProps {
  value: string;
}
interface IInputElementNumberProps {
  value: number;
}

// 保留函数重载，给每个重载的Props追加ref类型支持
function InputElement(props: IInputElementStringProps & React.RefAttributes<HTMLInputElement>): JSX.Element;
function InputElement(props: IInputElementNumberProps & React.RefAttributes<HTMLInputElement>): JSX.Element;

// 用forwardRef实现组件逻辑，最后通过类型断言绑定重载规则
const InputElement = forwardRef<HTMLInputElement, IInputElementStringProps | IInputElementNumberProps>(
  (props, ref) => {
    // 原有组件实现逻辑，直接使用传入的ref即可
    return <input ref={ref} value={props.value} type="text" />;
  }
) as unknown as typeof InputElement;

关键说明 #

• 每个重载签名的Props要和React.RefAttributes<HTMLInputElement>做交叉类型，这个类型内置了可选的ref属性定义，确保调用组件时传递ref不会触发类型报错
• 由于forwardRef返回的组件默认不携带重载信息，最后需要通过as unknown as typeof InputElement把实现后的组件类型和前面声明的重载类型做绑定，TypeScript就能正常识别原来的参数匹配规则
• 实际调用时和普通重载组件用法完全一致，ref可以正常传递给内部的input元素：

// 类型正常匹配第一个重载
<InputElement value="字符串" ref={yourRef} />
// 类型正常匹配第二个重载
<InputElement value={123} ref={yourRef} />

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