让TypeScript相信Vue 3模板ref在onMounted中是可用的

Question

我正在尝试在TypeScript Vue 3组件(Composition API)中使用HTML画布。

我面临的问题是，在一个onMounted钩子回调中，TypeScript告诉我，我的模板ref的值可能是未定义的，即使我知道它不会在onMounted触发的时候。我能做些什么来说服TypeScript它不是未定义的，让我调用方法吗?

目前，我已经包装它在一个if语句类型的保护风格，但我正在寻找一个更好的方法。

<script setup lang="ts">
import { onMounted, ref } from "vue";
const canvasElem = ref<HTMLCanvasElement>();
let ctx: CanvasRenderingContext2D | null;
onMounted(() => {
if (canvasElem.value !== undefined) {
ctx = canvasElem.value.getContext("2d");
}
});
</script>
<template>
<canvas ref="canvasElem" height="700" width="900"></canvas>
</template>

Answer 1

使用非空断言操作符:

onMounted(() => {
ctx = canvasElem.value!.getContext("2d");
});

演示1

或可选链接结合null合并默认为null(以满足ctx的类型):

onMounted(() => {
ctx = canvasElem.value?.getContext("2d") ?? null;
});

演示2