TypeScript 报错 TS18048: 使用可选链操作符解决 canvas.value 为 undefined 问题

TypeScript 报错 TS18048: 使用可选链操作符解决 canvas.value 为 undefined 问题

在 TypeScript 开发中，使用 ref 对象获取 canvas 元素时，可能会遇到 TS18048 错误，提示 canvas.value 可能为 undefined。

例如：

const canvas: Ref<HTMLCanvasElement | undefined> = ref();
config.ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)

解决方法：

可以使用可选链操作符 (?.) 来避免报错：

config.ctx.clearRect(0, 0, canvas.value?.width, canvas.value?.height)

这样即使 canvas.value 为 undefined，也不会报错。

解释：

可选链操作符 (?.) 允许您安全地访问可能为 undefined 或 null 的属性。如果 canvas.value 为 undefined，那么 canvas.value?.width 和 canvas.value?.height 将返回 undefined，而不会抛出错误。

总结：

在处理可能为 undefined 或 null 的属性时，使用可选链操作符 (?.) 是一个安全且优雅的解决方案。它可以避免错误，并使代码更易于阅读和维护。