Use mapState with typescript

Question

I am using typescript in Vue 2 project, and now I need use Vuex for first time with typescript. I wrote this based on answers which I found on SOF or blogs, but it gives me error and I have no idea how to fix it.

This is my code:

@Component({
  computed: {
    ...mapState('auth', {
      isUserAuthenticated: (state: AuthState) => state.auth.isUserAuthenticated
    })
  }
})
export default class App extends Vue {
  isUserAuthenticated!: boolean;
  drawer?: boolean = undefined;
  navItems: Array<object> = [
    { title: 'Home', icon: 'mdi-home' },
  ];
}

and this is received error:

41:8 No overload matches this call.
  Overload 1 of 6, '(namespace: string, map: string[]): { [x: string]: Computed; }', gave the following error.
    Argument of type '{ isUserAuthenticated: (state: AuthState) => any; }' is not assignable to parameter of type 'string[]'.
      Object literal may only specify known properties, and 'isUserAuthenticated' does not exist in type 'string[]'.
  Overload 2 of 6, '(namespace: string, map: Record<string, string>): { [x: string]: Computed; }', gave the following error.
    Type '(state: AuthState) => any' is not assignable to type 'string'.
  Overload 3 of 6, '(namespace: string, map: Record<string, (this: CustomVue, state: unknown, getters: any) => any>): { [x: string]: () => any; }', gave the following error.
    Type '(state: AuthState) => any' is not assignable to type '(this: CustomVue, state: unknown, getters: any) => any'.
      Types of parameters 'state' and 'state' are incompatible.
        Type 'unknown' is not assignable to type 'AuthState'.
    39 | @Component({
    40 |   computed: {
  > 41 |     ...mapState('auth', {
       |        ^
    42 |       isUserAuthenticated: (state: AuthState) => state.auth.isUserAuthenticated
    43 |     })
    44 |   }

auth is my vuex module defined like this (I'll add actions and mutations later, now I'm trying to read state), this is modules/auth/store/index.ts:

import state from './state';

export default new Vuex.Store({
  state
});

and state.ts file:

export interface AuthState {
  isUserAuthenticated: boolean;
}

export const state: AuthState = {
  isUserAuthenticated: true
};

export default state;

and this is root file which will be register all modules in /store/index.ts

import auth from '@/modules/auth/store';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: { auth }
});

Did you find any solution? – Alan Rezende Feb 09 '21 at 17:37 — Alan Rezende, Feb 09 '21 at 17:37

score 3 · Answer 1 · answered Mar 22 '21 at 19:42

There are two ways:

// src > store > user.ts

const userInfo: IAuthUserInfo = {
  id: 0,
  firstName: '',
  lastName: '',
};

const state = {
  token: '',
  refreshToken: '',
  userInfo,
};

type TMapState<T> = Partial<Record<keyof T, (state: T) => T[keyof T]>>

{

  computed: {
    ...mapState<any, TMapState<UserState>>('auth', {
      // will be suggestion with 'userInfo' | 'refreshToken' | 'token'
      userInfo: state => state.userInfo,
    }),
  },

  created() {
    // this.userInfo can be IAuthUserInfo | string
    console.warn((this.userInfo as IAuthUserInfo).id)
  }

}


type TMapState = Partial<{
  userInfo: (state: UserState) => IAuthUserInfo
}>

{

  computed: {
    ...mapState<any, TMapState>('auth', {
      // suggestion inside mapState will not shown without Partial in TMapState 
      userInfo: state => state.userInfo,
    }),
  },

  created() {
    console.warn(this.userInfo.id)
  }

}

This is not a best solution but it works :)

Use mapState with typescript

1 Answers1