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

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

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

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

以uniapp项目为例（vue2）：

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

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

   npm init -y

2. 安装uniapp语法提示：

   npm i @types/uni-app @types/html5plus @dcloudio/uni-helper-json -D

3. 在项目根目录创建文件main.d.ts：

   export interface MainJS {
   /**
   * 当前系统（测试的字段）
   */
    readonly envOS: "ios" | "android";
    /**
      * 测试的全局方法
      */
   tw(title: string):void;
   }

4. 打开文件: /node_modules/vue/types/vue.d.ts(大概在25行左右)

   export interface Vue {

   将上面一行代码替换为：

   import { MainJS } from "../../../main";
   export interface Vue extends MainJS {

5. 重启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导出的接口实现全局代码提示。

上面的envOS和tw()仅供参考，关于typescript声明文件的具体玩法可以参考：
声明文件 · TypeScript 入门教程

贴上一张我最近写的：