How to use ...mapGetters with class components? Typescript errors

[wahidrahim]

When I use mapGetters for computed properties in a class component, I get errors such that "Property '_____' does not exist` for all computed properties using mapGetters. Not sure if this is a typescript/ts-loader issue.

[ktsn]

You can declare the properties in the class or use a mapper like vuex-class.

@Component({
  computed: mapGetters(['foo'])
})
class App extends Vue {
  foo: string
}

[lemmycaution]

Hi, given solution also generates error for me. Any tips most appreciated, thanks.

below are the deps from package json if it makes any sense,

...
  "dependencies": {
    "d3": "^5.7.0",
    "lodash": "^4.17.11",
    "register-service-worker": "^1.5.2",
    "vue": "^2.5.17",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@types/d3": "^5.0.1",
    "@types/jest": "^23.1.4",
    "@types/lodash": "^4.14.118",
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-pwa": "^3.1.1",
    "@vue/cli-plugin-typescript": "^3.1.1",
    "@vue/cli-plugin-unit-jest": "^3.1.1",
    "@vue/cli-service": "^3.1.1",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "ts-jest": "^23.0.0",
    "typescript": "2.9.2",
    "vue-template-compiler": "^2.5.17"
  }
}

[CFourPO]

I also have been trying to figure out a way to remove that error, but have been unsuccessful. The only way that I have been able to suppress the error is by casting this to type any. This just feels wrong and removes a lot of the benefits of using Typescript in the first place.

@Component({
  computed: {
    ...mapGetters('ChartModule', {
      charts: 'getCharts'
    })
  }
})
export default class ChartCompoment extends Vue {
   created() {
     console.log((this as any).charts)
   }
}

The other option that I have considered is using @State, @Mutation, etc. decorators in the component, but that requires one decorator for each mapped function. This looks clunky and is far less readable when you start to have many of these decorators in one component.

Conclusion:
I just want to be able to reference map[Getters/Mutations/State] in a class component using this.

[kaorun343]

The key point is that when using TypeScript, you need to define properties not only for JS, runtime environment, but also for TS, static typing environment.

Such mapXxx helpers works only in runtime, so, in order to achieve this issue, please write each properties’ or methods’ type definitions.

@Component({
  computed: {
    ...mapGetters('ChartModule', {
      charts: 'getChars' // <- for runtime
    })
  }
})
class ChartComponent extends Vue {
  charts!: any[] // <- for static type checking

  created() {
    console.log(this.charts)
  }
}

[rostgoat]

I tried both what @ktsn and @kaorun343 suggested but I am still kinda confused

getters.ts

export const GET_POSTS = 'GET_POSTS'

posts.module

import {GET_POSTS} from '../types/getters'
...
  get [GET_POSTS]() {
    return this.posts || [];
  }

PostsList.vue

@Component({
  components: { PostListItem },
  computed: mapGetters(["GET_POSTS"]) // what local prop does this map to or how do I access it?
})
export default class PostsList extends Vue {
  name = "PostsList";
  posts = [];

  /**
   * Get posts
   */
  async mounted() {
   console.log(this.GET_POSTS); // ERROR: Property 'GET_POSTS' does not exist on type 'PostsList'.
  }

essentially, I'm trying to do:

...mapGetters({
   posts: GET_POSTS
})

console.log(this.posts)

[yuicer]

any new progress here?

it seems mapGetters doesnot match class vue with well ts surport

[n1ywb]

I think a MapGetter class property decorator would be just the thing here; something like

@MapGetter('Module/something') something: sometype;

[drasch]

You can also convince Typescript by adding a object to extend:

const ChartComponentProps = Vue.extend({
  computed: {
    ...mapGetters('ChartModule', {
      charts: 'getChars' // <- for runtime
    })
  }
});

@Component
class ChartComponent extends ChartComponentProps {
  charts!: any[] // <- for static type checking

  created() {
    console.log(this.charts)
  }
}

[tryforceful]

You can also convince Typescript by adding a object to extend:

const ChartComponentProps = Vue.extend({
  computed: {
    ...mapGetters('ChartModule', {
      charts: 'getChars' // <- for runtime
    })
  }
});

@Component
class ChartComponent extends ChartComponentProps {
  charts!: any[] // <- for static type checking

  created() {
    console.log(this.charts)
  }
}

This is nice to make things work, but of course it includes no type safety for these mapped getters, as they are all implicitly of type any when imported this way.

[drasch]

Thanks. Didn't realize it was coming in as any

[strom-und-spiele]

You can simply type it instead of using any.

@Component({ computed: { ...mapGetters(["fooThing"]) } })
export default class FooComponent extends Vue {
  public fooThing!: Foo; // <- note the `!` which tells ts we care for this value being set.
  created() { console.log(this.fooThing) }
}