欢迎光临
专注前后端开发技术与经验分享

解决vue2中main.js引入的全局方法无提示的痛点

我们在写vue2项目时,通常会将全局方法挂载在main.js内的vue原型链上,例如:
file

但vscode无法识别main.js挂载的全局方法,开发时经常会出现下面这种情况:

file

这个问题困扰了我整整两年,话不多说,直接看我的解决方法:


以uniapp项目为例(vue2):

  1. vscode安装插件Vetur(开发vue2项目必备)

  2. 初始化项目:(已存在node_modules目录可忽略)

    npm init -y
  3. 安装uniapp语法提示:

    npm i @types/uni-app @types/html5plus @dcloudio/uni-helper-json -D
  4. 在项目根目录创建文件main.d.ts

    export interface MainJS {
    /**
    * 当前系统(测试的字段)
    */
     readonly envOS: "ios" | "android";
     /**
       * 测试的全局方法
       */
    tw(title: string):void;
    }
  5. 打开文件: /node_modules/vue/types/vue.d.ts(大概在25行左右)

    export interface Vue {

    将上面一行代码替换为:

    import { MainJS } from "../../../main";
    export interface Vue extends MainJS {
  6. 重启vscode,打开任意vue文件,在任意vue方法内输入this.envOS感受强大的代码提示吧!(注意:后续每次更改完main.d.ts文件都需要重启vscode才会生效)


大致原理:

“xx.d.ts”文件用于为 TypeScript 提供有关用 JavaScript 编写的 API 的类型信息。简单讲,就是你可以在 ts 中调用的 js 的声明文件。 __百度

在vscode中,vue的语法提示依赖ts,所以利用第3步创建的main.d.ts文件为main.js引入的全局方法编写类型信息,然后再让vue继承main.d.ts导出的接口实现全局代码提示。

上面的envOStw()仅供参考,关于typescript声明文件的具体玩法可以参考:
声明文件 · TypeScript 入门教程

贴上一张我最近写的:
file

赞(3) 打赏
未经允许不得转载:杰哥博客 » 解决vue2中main.js引入的全局方法无提示的痛点

觉得文章有用就打赏杰哥一杯可乐吧~

支付宝扫一扫打赏

微信扫一扫打赏