如何为可复用HTML元素配置TypeScript类型？解决useRef报错

核心原因 #

你用HTMLElement | HTMLImageElement联合类型后仍报错，是因为TypeScript的联合类型属性访问规则：只有所有类型共同拥有的属性才能直接访问。HTMLElement没有src属性，所以TypeScript不允许直接访问联合类型的src。

下面是几种保持Hook复用性的解决方案：

方案1：使用类型守卫缩小类型范围 #

在访问src前，先判断当前元素的具体类型，让TypeScript明确当前是HTMLImageElement：

// 方法A：用instanceof精准判断
if (imageRef.current instanceof HTMLImageElement) {
  imageRef.current.src = nextSrc;
}

// 方法B：通过tagName判断（适合DOM元素场景）
if (imageRef.current?.tagName === 'IMG') {
  imageRef.current.src = nextSrc;
}

这种方式安全无运行时风险，同时Hook依然能支持多种元素类型。

方案2：给Hook添加泛型，让调用方指定元素类型 #

这是最优雅的复用方案——把Hook改成泛型，允许调用时传入具体的元素类型：

// 定义泛型Hook
import { useRef, RefObject } from 'react';

function useElementRef<T extends HTMLElement = HTMLElement>(): RefObject<T> {
  return useRef<T>(null);
}

// 使用时指定具体类型
const imageRef = useElementRef<HTMLImageElement>();
const buttonRef = useElementRef<HTMLButtonElement>();
const divRef = useElementRef(); // 默认是HTMLElement类型

此时访问imageRef.current.src完全不会报错，因为TypeScript明确知道它是HTMLImageElement类型，同时Hook可以支持任何HTMLElement的子类，复用性拉满。

方案3：类型断言（谨慎使用） #

如果你100%确定当前ref指向的是图片元素，可以用类型断言直接指定类型：

(imageRef.current as HTMLImageElement).src = nextSrc;

注意：这种方式跳过了TypeScript的类型检查，如果实际元素不是图片，会导致运行时错误，仅适合你能完全保证元素类型的场景。

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