vue + typescript，定义全局变量或者方法

众所周知，在 vue中，如果想定义一个全局变量的方法很简单，直接在 vue的原型上挂载属性或者方法即可。

但是，加上了typescript之后, Vue.prototype.$xxx = xxx  这种挂载方式就不行了。无论在哪里都访问不了挂载的内容。Vue原型上也没有。那怎么办呢？

第一种方式（推荐）：插件

官方文档在 TypeScript 支持 这一项中的  增强类型以配合插件使用  表示了可以用插件的方式来定义全局变量，然后用 xxx.d.ts 这种文件来声明类型。

那就开始开发插件：官方开发插件说明

插件最重要的就是 install 方法。举个最简单的例子：

testInstall.ts

const protoInstall = {
    install: (Vue:any,options:any) => {
        Vue.prototype.$install = function(){
            console.log('install')
        };
        Vue.prototype.$testData = 'testData';
    }
}

export default protoInstall;

（1）不要说我Vue:any,options:any 这种写法，因为我不知道这两个的类型到底是什么ヾ(。￣□￣)ﾂ゜゜゜

main.ts

import hhInstall from './assets/js/testInstall';

Vue.use(hhInstall);

使用的时候：

 

结果：

  

（1）可以看到，虽然报未找到该属性，或者该方法的错误，但是不影响结果。

（2）那怎么解决这个问题呢？这时就需要添加 声明文件了。 

解决：

（1）在src 下新建一个 xxx.d.ts 文件  。我是在src下再新建一个type文件夹，然后再把刚才的声明文件放到 这文件夹中，方便管理。

（2）xxx 名称可以随便写，反正我写的 vue-prototype.d.ts  更清晰一点。

vue-prototype.d.ts

declare module "vue/types/vue" {
    interface Vue {
        $testData:string;
        $install:Function;
    }
}

保存后，如果未生效，再重新启动一下项目就行。然后就有类型提示了。以后如果还需要添加全局属性或者方法，在插件里面挂载之后，声明文件里面再添加类型说明。

不过我有不明白的地方：

（1） 官方文档说，确保在声明补充的类型之前导入 'vue'。我的声明文件 vue.prototype.d.ts 并未导入vue，但是没问题。为什么呢？难道是我用vue-cli3 脚手架搭建的项目，shims-vue.d.ts 这个文件已经导入就不用了吗？

（2） 这种 xxx.d.ts 文件，vue内部是怎么识别的？又是怎么处理的呢？

第二种方法：mixin混入

由于是想全局定义属性和方法，那么mixin也能实现。比如：

main.ts

const vueMixins = {
    data(){
        return {
            $testData:'mixin testData',
        }
    },
    methods:{
        $install:function(){
            console.log('mixin install')
        }
    }
}
Vue.mixin(vueMixins)

使用：

 

 结果：

 

 可以看到，定义的属性 $testData 是undefined。而去看vue实例，发现挂载到 $data 里面的。但是为什么访问不了，而只有 通过  this.$data.$testData  来访问？这个我也不太清楚

 

 

 相同的，出现属性不存在的问题，还是要添加 声明文件来说明一下。

用这种方式，如果定义一个构造函数在data里面，后面的方法都没提示。不太方便。

最后贴上我自己的全局事件总线代码，就是为了不想用的时候还要引入，才知道了 typescript 不能直接定义全局变量的问题

ヾ(ﾟ∀ﾟゞ)

如果不想全局引入，那就不搞成插件的方式就行了，直接export default class xxx。

代码比较垃圾，轻喷。

assets/js/eventBus.ts

/**
 * @desc 全局事件总线
 */

/**
 * 事件信息接口
 */
interface EventItem {
    name:string;
    fun:Function;
}

/**
 * 判断是否存在已经绑定的事件接口
 */
interface JudgeStatus{
    status:boolean;
    index:number
}

export class EventBusHandler{

    private EventArr:EventItem[] = [];

    private static _instance: EventBusHandler;

    public static get instance(): EventBusHandler {
        if (!EventBusHandler._instance) {
            EventBusHandler._instance = new EventBusHandler();
        }
        return EventBusHandler._instance;
    }
    
    /**
     * 判断是否已经存在注册的事件
     * @param eventName 事件名
     */
    private judgeHadEventAlready(eventName: string):JudgeStatus{
        let status = false;
        let pos = -1;
        this.EventArr.forEach((val,index) => {
            if(val.name === eventName){
                status = true;
                pos = index;
            }
        })
        return {
            status:status,
            index: pos
        }
    }

    /**
     * 事件监听
     * @param eventName 事件名
     * @param func 回调函数
     */
    public on(eventName: string, func: Function) {
        const statusTarget = this.judgeHadEventAlready(eventName);
        // 如果未监听过则添加进去
        if (!statusTarget.status) {
            this.EventArr.push({
                name:eventName,
                fun:func
            })
        }
    }

    /**
     * 事件触发
     * @param eventName 事件名
     * @param arg 传入的参数。如果想传多个参数，可把 arg:any  换成 ...arg:any[]
     */
    public emit(eventName: string, arg:any) {
        const statusTarget = this.judgeHadEventAlready(eventName);
        if(statusTarget.status){
            const func = this.EventArr[statusTarget.index].fun;
            this.EventArr[statusTarget.index].fun = func;
            func(arg);
        }else{
            console.warn('暂未监听：'+eventName+ '事件');
        }
    }

    /**
     * 事件移除
     * @param eventName 
     * @param func 
     */
    public remove(eventName: string) {
        const statusTarget = this.judgeHadEventAlready(eventName);
        if(statusTarget.status){
            this.EventArr.splice(statusTarget.index,1);
        }else{
            console.warn('未监听：'+eventName+ '事件');
        }
    }

}

const EventBusFunc = {
    install: (Vue:any,options:object) => {
        Vue.prototype.$eventBus = EventBusHandler.instance;
    }
}

export default EventBusFunc;

声明文件：

import {EventBusHandler} from '@/assets/js/eventBus';

declare module "vue/types/vue" {
    interface Vue {
        $eventBus:EventBusHandler;
    }
}

main.ts 引入： 

import EventBus from './assets/js/eventBus';

Vue.use(EventBus);

使用：

this.$eventBus.on('func',() => {})
this.$eventBus.emit('func','1111')
this.$eventBus.remove('func')

果然还是实践出真知，网上的大部分答案都不靠谱 (⊙﹏⊙)