本文主要是介绍TypeScript与vue，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、为组件的props标注类型
- 在没有使用TS之前，是这样接受props：
- 在TS环境中，是这样接受props：
- 对于props的可选项如何限制呢？
1、类型限制
类型限制在接收的时候就已经定义好了
2、可选属性（必填限制）
必填限制其实就是在接口中定义可选属性即可
3、默认值限制
使用 withDefaults 完成默认值的配置
二、为组件的emits标注类型
- 在没有使用TS之前，是这样接收自定义事件：
- 在TS环境中，是这样接收emits：
接收的自定义函数的返回值一般结束void
- 不过在 vue3.3+版本中，事件的定义可以写成：
三、为ref（）标注类型
- 没有显示定制类型约束时，TS对根据初始值推导ref类型：
- 但是，如果想显示的约束ref的类型，那么需要使用vue提供的一个 Ref 接口完成
- 除了定制Ref约束以外，还可以直接在ref方法中使用泛型来 约束ref的类型
其实最终的结果也是使用了Ref接口约束
四、为reactive（）标注类型
- 没有显示定制类型约束时，TS会根据初始值推导reactive（）类型：
- 当然，也可以显示的约束衣一个reactive（）的类型
五、为computed（）标注类型
- computed（）会自动根据返回值推导出类型
- 当然，也可以通过泛型显示的约束一个computed（）的类型
六、为时间处理程序标注类型
在处理业务时，可能需要用到DOM对象，这时，可能会有错误报出：
TS会将事件对象的类型默认赋值成any
为了解决这个问题，可以将事件对象的类型进行指定
并且，通过类型断言解决DOM对象类型不正确的问题：
七、为provide/inject标注类型
provide和inject通常会在不同的组件中运行，要正确地为注入的值标记类型，vue提供了一个InjectionKey 接口，它是一个继承自Symbol 的泛型类型，可以用来在提供者和消费者之间同步注入值的类型
- 先做准备工作
因为key的类型的symbol，所以建议把key独立到单独的TS文件中
- 提供方
- 接收方
接受的数据有类型约束，但是同时多了一个undefined类型，原因就是inject接受的数据不一定被提供了，所以，赋值一个默认值就可以解决
当不使用symbol类型做为key时，InjectionKey 接口也就没用了，那么现在是无法约束提供方的数据类型，只能在接收方约束一下类型而已
- 提供方
- 接收方
在没有做约束之前，inject值为unknow，值需要通过泛型约束一下inject值即可
同样的道理，undefined可以通过设置默认值抵掉
八、为模版引用标注类型
所谓的为模版引用标注类型其实就是当使用ref属性来获取一个DOM对象时，如何约束DOM对象的类型
看一个需求，比如你的组件中有一个img标签，你想修改img标签的src属性：
？.的目的是解决logo.value可能为空的问题，但是它还是会报“nerver上不存在src” 错误，原因就是TS不知道你当前获取到的DOM对象时什么类型！
解决办法：
通过泛型确定ref值的类型，这样就可以使用src属性了
九、为组件引用标注类型
- 定制一个子组件
- 在父组件中使用子组件
- 尝试使用子组件的属性或者方法
会发现，使用子组件实例，不会有任何提示
- 解决使用组件实例没有提示的问题
为了获取 MyModal 的类型，我们首先需要通过 typeof 得到其类型，再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型
十、补充一个小知识点
?.运算符，表示如果有则继续，没有就返回 undefined
在TS中还有一个运算符 ！
！是非空断言，就是当你访问一个对象的属性时，这个对象有可能是空（null），但是你加上！之后就算是空的也不报错，但是，程序改是错就还是错的。
- ref = ‘logo’ 的img标签已经删除，所以logo.value为空，访问src属性就会报错
- 但是当使用非空断言之后
这篇关于TypeScript与vue的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
