如何无需类型断言解决useRef的HTMLElement子类类型兼容问题？

可以通过以下几种无需类型断言的方案解决：

1. 泛型化自定义Hook #

让Hook支持泛型参数，允许组件指定具体的HTML元素类型，返回对应的RefObject，这样绑定到具体元素时类型完全匹配。

import { useRef, RefObject } from 'react';

// 定义泛型Hook，T继承HTMLElement
function useElementRef<T extends HTMLElement>(): RefObject<T | null> {
  return useRef<T | null>(null);
}

// 组件中使用时指定具体元素类型
function MyComponent() {
  const divRef = useElementRef<HTMLDivElement>();
  const linkRef = useElementRef<HTMLAnchorElement>();

  return (
    <div>
      <div ref={divRef}>这是一个Div元素</div>
      <a ref={linkRef} href="/">这是一个链接元素</a>
    </div>
  );
}

这种方式既保留了useRef的原始特性，又让组件可以按需指定元素类型，没有额外的类型断言操作，类型安全且灵活。

2. 使用RefCallback替代RefObject #

如果你的场景需要监听元素的挂载/卸载状态，可以改用useCallback创建一个ref回调函数，它的类型天然兼容所有HTMLElement子类：

import { useCallback, useState } from 'react';

function useElementRef() {
  const [element, setElement] = useState<HTMLElement | null>(null);
  
  // 回调式ref，接受任意HTMLElement子类或null
  const ref = useCallback((el: HTMLElement | null) => {
    setElement(el);
  }, []);

  // 返回元素实例和ref回调
  return [element, ref] as const;
}

// 组件中直接使用
function MyComponent() {
  const [divElement, divRef] = useElementRef();

  return <div ref={divRef}>测试Div</div>;
}

这个方案不仅解决了类型问题，还能实时获取元素的状态变化，适合需要在元素挂载后执行操作的场景。

3. 放宽Ref类型为Ref<HTMLElement | null> #

React的Ref类型包含了RefObject和RefCallback，而具体元素的ref属性接受的Ref<HTMLDivElement | null>与Ref<HTMLElement | null>是兼容的（因为HTMLDivElement是HTMLElement的子类），可以直接返回这种类型的ref：

import { useRef, Ref } from 'react';

function useElementRef(): Ref<HTMLElement | null> {
  return useRef<HTMLElement | null>(null);
}

// 组件中无需额外操作直接绑定
function MyComponent() {
  const divRef = useElementRef();

  return <div ref={divRef}>测试Div</div>;
}

注意：如果需要在Hook或组件中调用元素的特定方法（比如HTMLDivElement的scrollTop），需要先通过类型守卫判断元素类型：

if (divRef.current instanceof HTMLDivElement) {
  divRef.current.scrollTop = 0;
}

推荐方案 #

优先选择泛型化Hook的方案，它兼顾了类型安全和使用便捷性，组件只需要一行代码指定类型，没有额外负担。

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