Vue3 + TypeScript
如果你已经上手了Vue3，那我真的强烈推荐你要配合TypeScript去使用，好处多多：
1、typescript有类型提示，提高开发效率
2、有类型错误提早报错，防止把错误带到线上
3、一处修改类型，多处报错，可以马上知道修改哪些地方，而不用自己去找
那么今天我就说说我在Vue3中是如何使用Typescript的吧!

ref
我们可以使用泛型来给ref定义ts类型
简单类型
简单类型可以直接写在泛型中

const variant = ref<string | number>(0)

复杂类型
复杂类型可以定义interface等，然后再写进泛型中

interface IUser {  name: string;  age: number;}const user = ref<IUser>({  name: '林三心',  age: 20})

这样会有类型提示，真的非常方便，不用自己去想有哪些属性

reactive
reactive一般用来定义引用类型，比如对象、数组，我们照样可以使用泛型去定义他们的类型，也是会有提示的

const user = reactive<IUser>({  name: '林三心',  age: 20})const users = reactive<IUser[]>([  { name: '堆代码', age: 20 }])

computed
同样使用泛型

const text = computed<string>(() => '哈哈哈')const users = computed<IUser[]>(() => ([  { name: '林三心', age: 20}]))

defineProps
泛型搞起，照样有提示

interface IProps {  name: string;  age?: number}const { name, age } = defineProps<IProps>()

defineEmits

interface IEmits {  handleChange: (val: string) => void;  handleSwitch: (val: string) => void}const emits = defineEmits<IEmits>()

模板ref
普通节点
当使用ref来获取dom节点时，要获取设定对应的dom节点类型，这样才有类型提示，比如我要操作一个img标签，我只有定义了正确的dom类型，他才会有一些dom节点对应的提示,记得，初始节点可能是null，所以要补全bull类型

const el = ref<HTMLImageElement | null>(null)<img ref="el" />

自定义组件
当你的ref是放在自定义组件上时，你想要通过它去获取到子组件的内部数据，那只能在子组件中先使用defineExpose暴露出去

// 子组件Dialog.vueimport { ref, defineExpose } from 'vue'const childMsg = ref('childMsg')const handleChangeMsg = () => {  childMsg.value = '被修改了'}// 暴露出去defineExpose({ childMsg, handleChangeMsg })

这个时候在父组件中，想要获取这些暴露出来的东西，又要有类型提示，咋办呢？这时候就可以用到typescript内置的InstanceType + typeof

const dialogRef = ref<InstanceType<typeof Dialog> | null>(null)

这样你在获取的时候就有类型提示了！是不是很方便！！

原生事件
有时候ts的类型腿断并不能达到你想要的预期，那你可以适当使用as来实现你想要的类型效果

<template>  <input type="text" @change="handleChange" /></template><script setup