Define ref variables in vue3+ts and set the variable type method

vue3+ts defines ref variables and sets variable types

Set the type of the value of the defined ref

<template>
	<el-input ref="input"></el-input>
</template>

//....
import {Ref, ref} from 'vue'
const input: Ref<HTMLElement> = ref(null)

After writing this, it will cause a compilation error (vuetur error)

Type 'Ref<null>' is not assignable to type 'Ref<HTMLElement>'.
Type 'null' is not assignable to type 'HTMLElement'.Vetur(2322)

Solution

Add null type

const input: Ref<HTMLElement | null> = ref(null)

Define a type declaration in the declaration file (*.)

// Definition statementdeclare type Nullable<T> = T | null

// Only use the placeconst input: Ref<Nullable<HTMLElement>> = ref(null)

vue3 ts syntax defines ref object

It is divided into two steps:

1.Introduce the type of Ref

import type { Ref } from 'vue';

2. Define Ref type object

let tableData:Ref = ref({});

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.