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属性就会报错

                

        - 但是当使用非空断言之后