当前位置：首页 > news >正文

vue3在使用ts为模板引用标注类型时，vue3.5+版本有了全新写法

news 来源：原创 2025/6/8 4:38:53

文章目录

Vue 3.5 模板引用类型标注：让 TypeScript 更懂你的 DOM 和组件
- 一、自动类型推断：像魔法一样的智能感知
- 二、显式类型标注：当自动推断不够用时
- 三、组件引用的类型处理：获取组件实例的艺术
- 四、泛型组件的特殊处理：当类型遇上动态
- 五、版本注意与最佳实践
- 总结

Vue 3.5 模板引用类型标注：让 TypeScript 更懂你的 DOM 和组件

Vue 3.5 带来了一个让 TypeScript 开发者欢呼的改进——模板引用类型自动推断！这意味着我们终于可以告别繁琐的 ref<HTMLElement | null>(null) 写法，享受更智能的类型体验。今天我们就来聊聊这个新特性，以及如何在不同场景下优雅地为模板引用标注类型。
在这里插入图片描述

一、自动类型推断：像魔法一样的智能感知

在 Vue 3.5 的单文件组件中，当你使用 useTemplateRef() 创建引用时，TypeScript 会像开了天眼一样，自动根据模板中的元素推断出类型：

// 无需泛型参数，自动推断为 HTMLInputElement
const el = useTemplateRef('el')

<template>
  <!-- 这个 input 元素类型会被自动识别 -->
  <input ref="el">
</template>

就像 IDE 的智能提示能猜中你的心思一样，这个特性特别适合处理静态模板中的原生元素。再也不用翻 MDN 查接口类型，写代码时 TypeScript 会直接告诉你：“我懂你想要的是 input 元素”。

二、显式类型标注：当自动推断不够用时

虽然自动推断很智能，但遇到这些情况还是需要手动标注类型：

动态组件：当使用 <component :is="..."> 时
跨组件引用：非单文件组件场景
特殊元素类型：比如自定义元素或第三方库组件

这时候就需要祭出泛型参数大法：

// 显式指定为 HTMLInputElement 类型
const el = useTemplateRef<HTMLInputElement>('el')

这种写法就像给 TypeScript 一个温馨提示：“这个 ref 对应的应该是输入框元素哦”。

三、组件引用的类型处理：获取组件实例的艺术

当需要引用子组件时，类型标注需要一点小技巧：

import Foo from './Foo.vue'

// 通过 InstanceType 提取组件实例类型
type FooInstance = InstanceType<typeof Foo>

const compRef = useTemplateRef<FooInstance>('comp')

这里的关键是使用 TypeScript 的 InstanceType 工具类型，它就像一个组件类型的解码器，能帮我们从组件构造函数中提取出实例类型。对于动态组件，可以组合多个类型：

type FooOrBar = InstanceType<typeof Foo> | InstanceType<typeof Bar>
const compRef = useTemplateRef<FooOrBar>('comp')

如果对组件具体类型不感兴趣，可以使用通用类型 ComponentPublicInstance，它包含了所有组件都有的基础属性（比如 $el）。

四、泛型组件的特殊处理：当类型遇上动态

遇到泛型组件时，常规的 InstanceType 会失效。这时候需要请出 vue-component-type-helpers 这个神器：

import { ComponentExposed } from 'vue-component-type-helpers'

// 正确获取泛型组件暴露的类型
const modal = useTemplateRef<ComponentExposed<typeof MyGenericModal>>('modal')