React+TypeScript中useRef调用focus报属性不存在于never类型错误

这个类型错误是TypeScript自动类型推导失效导致的：

• useRef是泛型函数，调用时既没有传入指定ref承载内容类型的泛型参数，也没有传入有效初始值，TypeScript会将textInputRef.current的类型推导为never
• never类型代表不存在有效值的类型，该类型上不存在任何属性或方法，因此调用focus()时会抛出property 'focus' does not exist on type 'never'的错误
• 补充说明：useRef返回的ref对象本身在组件整个生命周期内是固定引用，永远不会是假值，原代码中判断textInputRef是否存在属于冗余逻辑。

调用useRef时显式指定泛型类型为对应DOM元素的TS类型，同时传入null作为初始值（匹配组件挂载前ref未绑定DOM的实际状态）即可。
针对input元素的修正代码如下：

// 显式指定ref绑定的是HTMLInputElement类型的DOM，初始值为null
const textInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
  // 可选链会自动判断current是否存在，无需额外冗余判断
  textInputRef.current?.focus();
}, []);

return (
  <input ref={textInputRef} />
)

常见DOM元素对应TS类型参考 #

• 普通输入框input：HTMLInputElement
• 多行输入框textarea：HTMLTextAreaElement
• 按钮button：HTMLButtonElement
• div/section等通用块级元素：HTMLDivElement

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