如何在Vue3中优雅使用Typescript？我总结出8个点~
模拟面试、简历指导可私信找我，最低的价格收获最高的指导~
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。
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 lang="ts">function handleChange(event: Event) { console.log((event.target as HTMLInputElement).value)}</script>结语
我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜欢前端，想学习前端，那咱们可以交朋友，一起摸鱼哈哈，摸鱼群，关注我，拉你进群，有5000多名前端小伙伴在等着一起学习哦 -->
关注公众号「前端之神」，回复 666666 即可参与抽奖，免费送三本书！
本书并非简单地介绍两种语言和框架API相关的图书，而是以Django与Vue.js为载体，诠释前、后端技术生态中最新的优化方案和思路。
本书主要内容包括网络编程与异步并发的基础，软件工程的设计模式在前端技术中的演进，从Vue.js的核心开发指南到Webpack编译打包的优化经验分享，Web/Service Workers与WebSocket为Vue.js实现多线程离线加速，揭秘Vue.js全方位异步惰性加载优化，Django、PyPy、WSGI和Gevent的全套异步方案实战，Asyncio、gRPC、Channels与Django的分布式应用实战，Python Agent技术分享。