typescript - 如何从 typescript 组件访问 Vue 原型(prototype)属性

Question

我正在将我的 vuejs 应用程序迁移到 typescript 以获得更好的可维护性。这是我的问题:

我创建了一个 TokenService 来从本地存储中检索管理员的 token :

// token.service.js

/*
  Get the admin's token from localstorage.
  @return {object} The token
*/
getToken() {
  return localStorage.getItem("token")
}

为了让服务在所有组件中可用而不必在每个组件中导入它，我将服务添加到 Vue.prototype :

// main.js

Vue.prototype.$tokenService = TokenService

但是，当我尝试从用 typescript 编写的组件 AdminWorkerPage 访问 this.$tokenService 时，出现错误:TS2339: Property '$tokenService ' 在类型 'AdminWorkerPage' 上不存在。

// AdminWorkerPage.ts

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({})
export default class AdminWorkerPage extends Vue {

  broadcast(): Promise<void> {
    token: this.$tokenService.getToken() // <-- $tokenService used here !
    ...
  }
}

但是当我的文件是用 javascript 编写时，我没有问题。

我如何告诉编译器该属性存在于组件中？

Answer 1

您需要augment the Vue type :

// token-service.d.ts

import Vue from 'vue'
import TokenService from '../path/to/token-service'

declare module 'vue/types/vue' {
  interface Vue {
    $tokenService: TokenService
  }
}