Can't access $route.params in TS class about typescript-template HOT 12 CLOSED

To anyone coming across this thread, a much better solution is:

import { Vue } from 'vue-property-decorator'
import 'vue-router/types/vue'

@Component
export default class MyComp extends Vue {
	click() {console.log(this.$route)}
}

No need to import any runtime classes or declare your own types, you just need to manually import the default vue-router typings.
I had the same issue for the $store property injected by Vuex, and it can be solved in the same way

from typescript-template.

You can define a class that includes everything you usually inject.

import {Route} from 'vue-router'

class VueWithRoute extends Vue {
	$route: Route
}

@Component
export default class MyComp extends VueWithRoute {
	click() {console.log(this.$route)}
}

You can define an interface and also reuse it between components.

import {Route} from 'vue-router'

interface WithRoute /* can also extend Vue to make sure nothing is colliding */ {
	$route: Route
}

@Component
export default class MyComp extends Vue implements WithRoute {
	click() {console.log(this.$route)}
}

You can define in the specific component.

import {Route} from 'vue-router'

@Component
export default class MyComp extends Vue {
	$route: Route
	click() {console.log(this.$route)}
}

I basically never end up using the last one because inline definitions are usually less specific than classes and interfaces. eg:

type VueRefs = Vue['$refs']
interface MyRefs extends VueRefs {
	input: HTMLInputElement
}

but inline I could only do

@Component
export default class MyComp extends Vue {
	$refs: Vue['$refs'] & {
		input: HTMLInputElement
	}
}

from typescript-template.

@qm3ster thanks for such a broad set of examples, but I have one additional use case I can't figure out. I want to filter values from my store based on id param I'm getting inside $route.params.
So basically it looks like this:
@State(state => state.houses.filter(h => h._id === this.$route.params.id)) house
but this.$route isn't defined although available in mounted hook for example. So my question is how can I get it when I define a property in my class?
Full example

import Vue from "vue"
  import Component from "nuxt-class-component"
  import {Route} from "vue-router"
  import {State, Action, Getter, namespace} from "vuex-class"

  interface WithRoute{
    $route: Route
  }

  @Component
  export default class extends Vue implements WithRoute{
    @State(state => state.houses.filter(h => h._id === this.$route.params.id)) house // Not working here
    mounted(){
      console.log("params:", this.$route.params.id) // Works here
    }
  }

from typescript-template.

this in decorator?
Maybe try to do the filtering via a computed property based on the unfiltered @State houses ?

from typescript-template.

@hartmut-co-uk you mean smth. like this?

get house(){
      return this.houses.filter(h => h._id === this.$route.params.id)[0];
    }

from typescript-template.

yes, looks good to me - is it working?

from typescript-template.

yes, it is :) That's the solution I've stopped on after I've logged this issue)

from typescript-template.

To anyone coming across this thread, a much better solution is:

import { Vue } from 'vue-property-decorator'
import 'vue-router/types/vue'

@Component
export default class MyComp extends Vue {
	click() {console.log(this.$route)}
}

No need to import any runtime classes or declare your own types, you just need to manually import the default vue-router typings.
I had the same issue for the $store property injected by Vuex, and it can be solved in the same way

@andysham I got the error: Module not found: Error: Can't resolve 'vue-router/types/vue'

from typescript-template.

I'm using npm, vue-router is installed, and it can be resolved.

from typescript-template.

Using a default nuxt project I couldn't import vue-router/types/vue at all in my component.
I'll have to try a clean install again - maybe I have something that's out of date...

from typescript-template.

This does not work
import 'vue-router/types/vue';

all others like

import {Route} from 'vue-router'

interface WithRoute /* can also extend Vue to make sure nothing is colliding */ {
	$route: Route
}

@Component
export default class MyComp extends Vue implements WithRoute {
	click() {console.log(this.$route)}
}

also do not work, $route is undefined everywhere

    import {Component, Vue} from "vue-property-decorator";
    import WithRoute from '@/interface/WithRoute';
    import {Route} from 'vue-router';

    interface WithRoute 
    {
        $route: Route
    }

    @Component({
        components: {
            basic1,
        },
    })
    export default class App extends Vue implements WithRoute {

        constructor() {
            super();
            console.log(this);
            console.log(this.$route);
        }

        /**
         * Choose which HTML DOM layout to use for specific route
         */
        get layout(): string {

            console.log(this);
            console.log(this.$route);
            return 'default_layout';
        }
        mounted() {
            console.log(this);
            console.log(this.$route);
        }

from typescript-template.

Forgot to add

Vue.use(VueRouter); // <--- this, but what for interface then? 
export default new VueRouter({

but what for interface nad DI then if we tell Vue directly to use it? DI does not work still.

from typescript-template.