Javascript

vue2升级vue3: 全局变量挂载与类型声明

本文主要是介绍vue2升级vue3: 全局变量挂载与类型声明,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

全局变量挂载

vue2

Vue.prototype.$lm = {}

vue3

const app = Vue.createApp({})
app.config.globalProperties.$lm = {}

 

 

声明类型

使用 ts 的情况下,挂载完全局变量后,在 vue 文件中,通过 this 对象 . 出来不来提示的。

什么是声明文件?

声明文件就是给js代码补充类型标注. 这样在ts编译环境下就不会提示js文件"缺少类型".

声明变量使用关键字declare来表示声明其后面的全局变量的类型, 比如:

// yourAppPackages/global.d.ts
declare var __DEV__: boolean
declare var __TEST__: boolean

看过vue3源码的同学一定知道这些是vue中的变量, 上面代码表示__DEV__等变量是全局, 并且标注了他们的类型. 这样无论在项目中的哪个ts文件中使用__DEV__, 变量ts编译器都会知道他是boolean类型.

声明文件的文件名是有规范要求的, 必须以.d.ts结尾, 声明文件放在项目里的任意路径/文件名都可以被ts编译器识别, 但实际开发中发现, 为了规避一些奇怪的问题, 推荐放在根目录下.

一般比较大牌的第三方js插件在npm上都有对应的声明文件, 比如jquery的声明文件就可以在npm上下载,比如:@types/jquery

参考资料:为 Vue3

转载本站文章《vue2升级vue3: 全局变量挂载与类型声明》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8836.html

这篇关于vue2升级vue3: 全局变量挂载与类型声明的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!