TypeScript + useRef<X|Y>：类型 X 不可分配给类型 Y

Question

这个简单的组件：

const Editable = ({multiline}: { multiline: boolean }) => {
    const ref = useRef<HTMLInputElement|HTMLTextAreaElement>(null);
    return <div>
        {multiline ? <textarea ref={ref}/> : <input ref={ref}/>}
    </div>
}

有以下打字稿错误：

Error:(7, 32) TS2322: Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type 'string | ((instance: HTMLTextAreaElement | null) => void) | RefObject<HTMLTextAreaElement> | null | undefined'.
  Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type 'RefObject<HTMLTextAreaElement>'.
    Type 'HTMLInputElement | HTMLTextAreaElement' is not assignable to type 'HTMLTextAreaElement'.
      Type 'HTMLInputElement' is missing the following properties from type 'HTMLTextAreaElement': cols, rows, textLength, wrap
Error:(7, 53) TS2322: Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.
  Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type 'RefObject<HTMLInputElement>'.
    Type 'HTMLInputElement | HTMLTextAreaElement' is not assignable to type 'HTMLInputElement'.
      Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, checked, and 23 more.

使用以下行可以忽略错误：

const ref = useRef<any>(null);

如何useRef使用正确的类型并且没有错误？

Answer 1

解决方案 1：类型断言

const ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
return (
    <div>
        {multiline ? <textarea ref={ref as React.RefObject<HTMLTextAreaElement>}/>:
            <input ref={ref as React.RefObject<HTMLInputElement>} />}
    </div>
)

<textarea ... />期望ref需要HTMLTextAreaElement. HTMLTextAreaElement包含与不同的属性 ，因此不能将超类型分配给节点之一。类型断言在这里完全没问题。优点：我们被迫以类型安全的方式缩小范围。缺点：类型断言有点冗长。 HTMLInputElement HTMLTextAreaElement | HTMLInputElementref

解决方案 2：参考的交集类型

const ref = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
return (
    <div>
        {multiline ? <textarea ref={ref } /> :
            <input ref={ref} />}
    </div>
)

这是有效的，因为HTMLInputElement和HTMLTextAreaElement没有冲突的属性类型（否则会导致never）。优点：代码更紧凑。缺点：确保之前缩小元素范围。例如，您可能可以调用以下代码来HTMLInputElement导致运行时错误：

ref.current && ref.current.cols // input does not have cols

操场