vue挂载在this上的自定义方法的注释

先看效果

创建自定义方法

首先，将自己的方法挂载到实例上

Vue.prorotype.$xconfirm=...

这一步，代码实际上已经可以用了。蛋似，没有任何代码提示，除了写代码的你，谁也不知道这玩意是啥意思，咋用。（或许一个月之后你也不知道啥意思了）

element代码提示

我们用element-ui的时候，有几个挂载在全局的方法其实是有代码提示的，比如这个

八一八代码

element-ui.d.ts引用

然后再export出去

然后再index.d.ts里面把定义的全部export出去

然后package.json文件定位下类型文件位置

自定义代码提示

抄就完了
穿件types文件夹
新建index.d.ts,x-ui.d.ts,dialog.d.ts
名字随意，能对上就行
大概是这么个结构

dialog.d.ts

export interface XConfirmOptions {
  message: string
  title: string
  confirmBtnText: string
  cancelBtnText: string
  confirmBtn: boolean,
  cancelBtn: boolean,
}


declare module 'vue/types/vue' {
  interface Vue {
    /**
     * @description: 全局弹窗
     * @param { XConfirmOptions } options 配置信息
     * @param { string } options.message 弹窗内容
     * @param { string } options.title 弹窗标题
     * @param { string } options.confirmBtnText 确认按钮文字
     * @param { string } options.cancelBtnText 取消按钮文案
     * @param { boolean } options.confirmBtn 是否需要确认按钮
     * @param { boolean } options.cancelBtn 是否需要取消按钮
     * @return {Promise<string>}
     */    
    $xconfirm: {
      (options: XConfirmOptions): Promise<string>
    }
  }
}

dialog.d.ts

import { XConfirmOptions } from './dialog'
export const XConfirmOptions: XConfirmOptions

index.d.ts

import * as XUI from './x-ui'
export default XUI

这种结构组织代码的扩展性很好，有其他的类型定义直接加dialog.d.ts这种类型的就行

最后看效果

补
jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}