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

22次阅读

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

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 的扩大类型：

上面解决下 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 的类型查看，联结类型的确比拟麻烦，须要消耗不少精力解决类型问题。

正文完