代码之家  ›  专栏  ›  技术社区  ›  Baboo

如何从typescript组件访问Vue原型属性

  •  0
  • Baboo  · 技术社区  · 6 年前

    我正在将我的VueJS应用程序迁移到typescript,以便更好地维护。我的问题是:

    我创造了一个 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 用typescript编写,我得到错误: 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编写的时候,我没有问题。

    如何告诉编译器组件中存在该属性?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Brian Lee    6 年前

    你需要 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
      }
    }