众所周知，在 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')
果然还是实践出真知，网上的大部分答案都不靠谱 (⊙﹏⊙)
