Question

我正在将我的vuejs应用程序迁移到打字稿，以获得更好的可维护性。这是我的问题：

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

// 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

但是当我尝试从用打字稿编写的组件this.$tokenService中访问AdminWorkerPage时，出现错误： TS2339：类型'AdminWorkerPage'上不存在属性'$ tokenService'

// 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
  }
}

如何从打字稿组件访问Vue原型属性

1 个答案: