TypeScript中使用React.useRef绑定canvas报类型错误如何解决？

报错的核心是useRef的泛型类型声明错误：你为ref绑定的是<canvas>元素，却指定的类型是HTMLInputElement（输入框DOM类型），和canvas对应的标准类型HTMLCanvasElement不匹配，因此TypeScript检测到HTMLInputElement不存在getContext等canvas特有的属性和方法，抛出类型错误。

• 首先确定绑定的DOM元素对应的TS原生类型，常见对应关系可参考：
  • <div> → HTMLDivElement
  • <canvas> → HTMLCanvasElement
  • <input> → HTMLInputElement
  • <video> → HTMLVideoElement
    不确定类型时可在TS文件中输入HTML前缀，IDE会自动联想匹配的DOM类型
• 给useRef传入对应的泛型参数，初始值设为null
• 访问ref.current前必须做非空判断，避免空值报错
• 不要将ref对象加入useEffect的依赖数组：useRef返回的ref对象引用永久稳定，即使current值变化也不会触发依赖更新，加入属于无效依赖

const CanvasMap = () => {
  // 将泛型替换为HTMLCanvasElement即可解决类型报错
  const canvasRef = React.useRef<HTMLCanvasElement>(null)
  useEffect(() => {
    if (canvasRef.current) {
      // 此处可安全调用canvas原生API
      const ctx = canvasRef.current.getContext('2d')
      cities.forEach(function (item) {
           // logic here
      })
    }
  }, []);
  return (
      <canvas id="canvas"
              ref={canvasRef}
      ></canvas>
  )
};

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