众所周知，在 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.js
/** * @desc 全局事件总栈 * @author 赵建军 */ /** * 事件信息接口 */ 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')
果然还是实践出真知，网上的大部分答案都不靠谱 (⊙﹏⊙)
请发表评论