如何为互斥显示的多元素定义共用Ref并适配TypeScript类型？

我需要为同一时间仅显示一个的input和textarea元素定义共用Ref。当前用forwardRef封装了支持单行、多行的Input组件，内部使用useRef<HTMLElement>获取元素引用，但HTMLElement类型不包含value属性，导致类型报错。希望定义一个包含focus()方法和value属性的Ref类型，适配input和textarea这类具备该特性的元素，期望的类型定义如下：

interface InputRef {
  focus: () => void;
  value: string;
}
let ref = useRef<InputRef>(null);

现有代码问题 #

现有代码中，内部Ref使用HTMLElement类型，无法访问value属性；同时暴露给父组件的InputApi接口只包含focus方法，和期望的Ref类型不匹配，导致useImperativeHandle返回值类型报错。

interface InputProps {
  value: string;
  multiline: boolean;
  onchange?: (value: string) => void;
}

interface InputApi {
  focus: () => void;
}    

const Input = forwardRef<InputApi, InputProps>(function(props){
  let ref = useRef<HTMLElement>(null);

  useImperativeHandle(ref, () => {
    return {
      focus: () => ref.current?.focus(),
      value: ref.current?.value // 类型报错：HTMLElement不存在value属性
    };
  });

  if(props.multiline){
    return <textarea ref={ref} value={props.value} onChange={e => props.onchange?.(e.target.value)} />;
  }
  return <input ref={ref} value={props.value} onChange={e => props.onchange?.(e.target.value)} />;
});

修正方案 #

1. 调整内部Ref类型：将HTMLElement改为HTMLInputElement | HTMLTextAreaElement，这两个类型原生包含focus()方法和value属性，完美适配需求。
2. 统一暴露的Ref接口：使用期望的InputRef接口替换原有的InputApi，确保暴露给父组件的Ref类型符合预期。
3. 修正forwardRef泛型参数：将泛型参数更新为InputRef和InputProps，保证类型一致性。
4. 完善useImperativeHandle返回值：确保返回的对象严格符合InputRef类型，同时处理ref.current为null的边界情况。

修正后的完整代码 #

interface InputProps {
  value: string;
  multiline: boolean;
  onchange?: (value: string) => void;
}

// 定义符合需求的Ref接口
interface InputRef {
  focus: () => void;
  value: string;
}    

const Input = forwardRef<InputRef, InputProps>((props, ref) => {
  // 内部Ref使用input和textarea的联合类型
  const internalRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);

  useImperativeHandle(ref, () => ({
    focus: () => internalRef.current?.focus(),
    // 可选链+空值合并，避免null时返回undefined
    value: internalRef.current?.value ?? ''
  }));

  if (props.multiline) {
    return (
      <textarea
        ref={internalRef}
        value={props.value}
        onChange={e => props.onchange?.(e.target.value)}
      />
    );
  }
  return (
    <input
      ref={internalRef}
      value={props.value}
      onChange={e => props.onchange?.(e.target.value)}
    />
  );
});

// 父组件使用示例
const Parent = () => {
  const inputRef = useRef<InputRef>(null);
  
  const handleFocus = () => {
    inputRef.current?.focus();
    console.log(inputRef.current?.value);
  };

  return (
    <div>
      <Input ref={inputRef} value="test" multiline={false} />
      <button onClick={handleFocus}>聚焦并获取值</button>
    </div>
  );
};

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