TypeScript error when using this.$router in actions.ts

[tempted2use]

Hi, great framework!

I have created a Quasar CLI project (1.9.5) using TypeScript. It all works great, but I’m getting a Typescript error when using

this.$router

outside a *.vue file

e.g.

this.$router.push(’/myPage’);

in ./store/module-example/actions.ts file.

The ERROR is: Property ‘$router’ does not exist on type ‘Store<StoreInterface>’.ts(2339)

Is it considered an anti-pattern to use router in actions.ts file or how can TypeScript be told about this.$router ?

Reason for usage in actions.ts file: I am using Firebase onAuthStateChanged. this.$router actually does work, but shows the error in VScode.

///actions.ts
const actions: ActionTree<ExampleStateInterface, StoreInterface> = {

  handleAuthStateChanged({ commit }: { commit: any }) {
    
    firebaseAuth.onAuthStateChanged(user => {
      // Is triggered every time user state changes
      if (user) {
        // User is logged in
    
        this.$router.push('myPage');
      } else {
        // User is logged out
        
        this.$route.push('/login');
      }
    });
  }
};

[eleina]

Hi! We have solved this in our project with using a shims.d.ts file. It looks like this:

import {VueRouter} from 'vue-router/types/router'

declare module 'vue/types/vue/' {
    interface Vue {
        $router: VueRouter
    }
}

Maybe this will help you.

[IvanGV]

Hey! Im having the same problem, but I would like to know why I cannot just import Router inside actions.ts and use it as I usually did on Javascript files.

I know that it is something related to the router Quasar wrapper and I am getting really stuck on understanding why is this happening.

Thank you.