After completing a project in Vue, I found myself getting a bit confused without static types. To address this, I decided to incorporate TypeScript into my project while still maintaining the traditional way of writing code, without classes and decorators.
Although I have successfully ported my store to TypeScript while sticking to the conventional approach, I am now faced with a new challenge. I would like to utilize mapGetters, mapMutations, and mapActions in my components using TypeScript, but without resorting to class-style components.
import Vue from 'vue';
import { mapGetters, mapActions } from 'vuex';
export default Vue.extend({
methods: {
...mapActions('pictures', ['toggleFavorite']),
anotherMethodExample: (pictureId: number): void {
this.toggleFavorite(pictureId); // Unfortunately, an error occurs at this line.
},
},
});
The error message reads as follows:
Property 'toggleFavorite' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { index: unknown; isSelected: unknown; getToggleFavorite: any; /* other methods */; }, Readonly<{ picture: any; }>>'.
I am struggling to find a solution on how to use mapGetters and mapActions without utilizing the @Component syntax. Personally, I prefer to stick to the "normal" coding style for better readability and ease of reference to official Vue documentation.
If anyone has advice or suggestions on how to overcome this hurdle, I would greatly appreciate it!
Thank you in advance! o/