让 TypeScript 相信 Vue 3 模板引用在 onMounted 中可用

Question

我正在尝试在 TypeScript Vue 3 组件（组合 API）中使用 HTML canvas。

我面临的问题是，在 onMounted 挂钩回调中，TypeScript 告诉我模板引用的值可能未定义，即使我知道 onMounted 火灾。我能做些什么来让 TypeScript 相信它不是未定义的并让我调用它的方法吗？

目前，我已经用if-statement type guard style 包装了它，但我正在寻找更好的方法。

<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

使用non-null assertion operator:

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

demo 1

或optional chaining combined with nullish coalescing默认为null（满足ctx的类型）：

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

demo 2

让 TypeScript 相信 Vue 3 模板引用在 onMounted 中可用

Convince TypeScript that Vue 3 template ref is available in onMounted

typescript

vue.js

vuejs3

vue-composition-api