关于vue3:vue3tssetup支持全局变量提示

41次阅读

共计 1543 个字符,预计需要花费 4 分钟才能阅读完成。

  1. vue3 ts setup 写法,反对全局变量提醒。

vue3 ts 版本通过 app.config.globalProperties 挂载全局变量,一些插件也会在此装置全局可用的变量。参考官文:https://cn.vuejs.org/api/application.html#app-config-globalpr…,然而挂载的变量没有类型定义,被当作了 any 类型,无奈通过 ctrl 查看变量下的属性和办法。

上面是在 main.ts 里挂载全局变量,鼠标放到变量上发现是 any 类型:

在 component 里应用挂载的变量,无奈辨认挂载的变量类型:

全局挂载的变量无奈辨认类型,因而无奈提供代码提醒,也不利于代码重构,谬误查看等。须要给全局变量建设类型关联,上面是 vue 的解决形式:vue 通过利用 ts 的模块扩大个性,给挂载的变量指定类型,参考官文:https://cn.vuejs.org/guide/typescript/options-api.html#augmen…
globalProperties 是 ComponentCustomProperties 类型,原生是没有咱们挂载下来的变量的,因而用上面的形式扩大这个类型定义:

在 src 下写一个 d.ts 的类型定义文件,依照官网的文档扩大类型定义,至此 $bus $api 被扩大到了 ComponentCustomProperties 类型里,proxy 就是 ComponentCustomProperties 类型,有了关联关系,代码提醒就有了。

一些 vue 专用的插件或者库,个别会在本人的 d.ts 里定义 vue 的扩大类型,如 pinia.d.ts 定义了反对 vue2 及 vue3 的扩大类型:

  1. 上面解决下 setup 模式下 proxy 提醒问题:

setup 模式下须要通过 proxy 拜访全局变量,在 ts 里援用 proxy 须要解决代码提醒问题,这样写在 js 中没有问题:

在 ts 里会正告 proxy 不存在,这是 ts 的联结类型导致的,proxy 是 ComponentInternalInstance 下的属性,但 getCurrentInstance 返回的可能是 null。
这个正告能够疏忽,也能够强转为 any 类型,但这样就无奈利用 ts 的提醒能力了。要利用 ts 的提醒能力须要强转为类型 ComponentInternalInstance:

const {proxy} = getCurrentInstance() as ComponentInternalInstance ;

import 的正告打消了,不过代码里应用的中央还有正告:

proxy 可能存在也可能不存在,因而须要用可选链操作符改下代码:

至此用上了 ts 的类型提醒,打消了所有正告。不过每个 proxy 后须要跟个可选链操作符,这让人感觉不爽,上面的办法能够解决这种问题:

引入 proxy 时抉择上面两种写法之一即可,都是比拟举荐的写法:

import {onMounted, onUnmounted, ref, reactive, getCurrentInstance, ComponentInternalInstance, ComponentPublicInstance} from 'vue';

// 写法一:应用可选链操作符 + 强转类型
const proxy = getCurrentInstance()?.proxy as ComponentPublicInstance; 或者:// 写法二:2 次强转类型
const proxy = (getCurrentInstance() as ComponentInternalInstance).proxy as ComponentPublicInstance;

至此齐全反对了 ts,有了代码提醒,类型查看。ts 的类型查看,联结类型的确比拟麻烦,须要消耗不少精力解决类型问题。

正文完
 0