How to access Vue prototype property from typescript component

Question

I'm migrating my vuejs app to typescript for better maintanability. Here is my problem:

I created a TokenService to retrieve the admin's token from the local storage :

// token.service.js

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

To have the service available in all the components without having to import it in each one of them, I added the service to the Vue.prototype :

// main.js

Vue.prototype.$tokenService = TokenService

But when I try to access the this.$tokenService from my component AdminWorkerPage written in typescript, I get the error: TS2339: Property '$tokenService' does not exist on type '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 !
    ...
  }
}

But when my file was written in javascript, I had no problem.

How can I tell the compiler that the property exists in the component?

tony19 · Accepted Answer · 2022-07-15 20:04:47Z

17

You need to 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
  }
}

edited Jul 15, 2022 at 20:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 16, 2018 at 1:56

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexander Kim Over a year ago

Does it matters where do i put this file in my project structure?

Brian Lee Over a year ago

I typically put type declaration files in a types directory in the project's root folder.

Collectives™ on Stack Overflow

How to access Vue prototype property from typescript component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related