vue3+ts中定义ref变量,设置变量类型方式
作者：chendf_
这篇文章主要介绍了vue3+ts中定义ref变量,设置变量类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3+ts定义ref变量,设置变量类型
给定义的 ref 的值设置类型
<template>
<el-input ref="input"></el-input>
</template>
//....
import {Ref, ref} from 'vue'
const input: Ref<HTMLElement> = ref(null)
这样写之后会导致编译报错（vuetur报错）
Type 'Ref<null>' is not assignable to type 'Ref<HTMLElement>'.
Type 'null' is not assignable to type 'HTMLElement'.Vetur(2322)
解决办法
增加null类型
const input: Ref<HTMLElement | null> = ref(null)
在声明文件（*.d.ts）中定义一个类型声明
// 定义声明 declare type Nullable<T> = T | null // 使用的地方只需要 const input: Ref<Nullable<HTMLElement>> = ref(null)
vue3 ts语法定义ref对象
分为两步：
1.引入Ref 的 type
import type { Ref } from 'vue';2.定义Ref类型的对象
let tableData:Ref = ref({});总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。