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

时间:2020-05-21 站住，别跑人气:1

众所周知，在 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;

View Code

声明文件：

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')

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

加载全部内容