Vue3+TypeScript中如何将Ref转换为元素类型并通过instanceof校验

问题场景 #

原本的Options API代码：

<script lang="ts">
import * as THREE from 'three';

export default {
    mounted() {
        console.assert(this.$refs.container instanceof HTMLCanvasElement, this.$refs.container);
        const renderer = new THREE.WebGLRenderer({
            canvas: this.$refs.container as HTMLCanvasElement,
            antialias: true,
            alpha: true
        });
        
    }
};
</script>

<template>
    <canvas ref="container" id="earthCanvas"></canvas>
</template>

迁移到Composition API后，改用ref获取DOM元素，但出现TypeScript报错：The left-hand side of an 'instanceof' expression must be of type 'any', an object type or a type parameter，代码如下：

<script lang="ts">
import * as THREE from 'three';
import { onMounted, ref } from 'vue';

let container = ref(null)
onMounted(() => {
    console.assert(container.value instanceof HTMLCanvasElement, container.value);
    const renderer = new THREE.WebGLRenderer({
        canvas: container.value as HTMLCanvasElement,
        antialias: true,
        alpha: true
    });

});
</script>

<template>
    <canvas ref="container" id="earthCanvas"></canvas>
</template>

解决方法 #

报错原因是ref(null)默认的类型是Ref<null>，TypeScript无法识别它可能指向一个HTMLCanvasElement。需要显式给ref指定类型，明确它的值是HTMLCanvasElement或null（组件挂载前ref值为null）。

修正后的代码：

<script lang="ts">
import * as THREE from 'three';
import { onMounted, ref } from 'vue';

// 显式标注ref的类型为HTMLCanvasElement | null
let container = ref<HTMLCanvasElement | null>(null)
onMounted(() => {
    // 此时container.value的类型是HTMLCanvasElement | null，instanceof检查合法
    if (container.value instanceof HTMLCanvasElement) {
        const renderer = new THREE.WebGLRenderer({
            canvas: container.value,
            antialias: true,
            alpha: true
        });
    } else {
        console.error('容器不是合法的Canvas元素', container.value);
    }
});
</script>

<template>
    <canvas ref="container" id="earthCanvas"></canvas>
</template>

额外说明 #

• 显式类型标注后，TypeScript能正确推断container.value的类型，instanceof检查不再报错。
• 用if判断替代console.assert，可以更安全地处理元素不存在的情况，同时避免类型断言（as HTMLCanvasElement），让代码更符合TypeScript的类型安全规范。

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