在TypeScript中如何正确为canvas和绘图上下文定义类型？

关于你找到的文档是否适用 #

你找到的文档对应Node.js环境下的vm模块类型，和浏览器端Canvas场景完全不匹配，不是你需要的类型。

正确的类型定义方案 #

你需要用浏览器原生API对应的TypeScript内置类型：

• canvas变量的正确类型为 HTMLCanvasElement
• 2D绘图上下文的正确类型为 CanvasRenderingContext2D

代码示例 #

注意要处理canvasRef初始可能为null的边界情况，示例写法如下：

// 以React项目为例，首先要保证canvasRef的类型定义正确
import { useRef, useEffect } from 'react';

const canvasRef = useRef<HTMLCanvasElement>(null);

useEffect(() => {
  // 先做空值判断避免运行时报错
  if (!canvasRef.current) return;
  const canvas: HTMLCanvasElement = canvasRef.current;
  const context: CanvasRenderingContext2D | null = canvas.getContext("2d");
  if (!context) return;
  // 后续正常操作context即可
}, []);

如果你的业务逻辑可以保证canvasRef.current和getContext返回值一定存在，也可以用非空断言简化写法，这种情况下TypeScript可以自动推导出两个变量的正确类型，不需要手动标注：

const canvas = canvasRef.current!;
const context = canvas.getContext("2d")!;

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