Question: How to use vuex-map-fields with typescript?

[nowrap]

Hello, i am trying to use vuex-map-fields with typescript. The custom definition file here in the issues section i found.

But i am not getting the computed / ...mapFields expression to work in typescript. With javascript it works like a charm.

Thank for any advises! .nowrap

[lhy666]

you can do like this: @Component({ computed: mapFields(['wordDetailsTemp.word']) })

[yannick-milanetto]

In addition to what @lhy666 said, if you need to access mapped fields within your script part (in section), you will have to tell Typescript how to infer the types. The solution I've found is to extend Vue class with your fields definition.

Example in your Vue component :

class VueWithMapFields extends Vue {
    public fieldOne!: boolean;
    public fieldTwo!: string[];
}

@Component({
    computed: mapFields(['fieldOne', 'fieldTwo']),
})
export default class MyComponent extends VueWithMapFields {
    // now I can access this.fieldOne or this.fieldTwo in lifecycle hooks, computed properties or methods
    // and I will have Typescript doing properly its typechecking job :)
}

[geoidesic]

@nowrap have the comments here solved your problem?

[ziaadini]

if you don't want build a class for each map you can do some thing like this :

...(mapFields({
      loginUsername: 'login.username',
      loginPassword: 'login.password',
      registerUsername: 'register.username',
      registerPassword: 'register.password',
      registerEmail: 'register.email',
    }) as { [key: string]: { get(): void; set(value: any): void } })

or even better define an interface

interface VuexMapFields {
  [key: string]: { get(): void; set(value: any): void }
}

...(mapFields({
      loginUsername: 'login.username',
      loginPassword: 'login.password',
      registerUsername: 'register.username',
      registerPassword: 'register.password',
      registerEmail: 'register.email',
    }) as VuexMapFields

[azarashill]

like?

declare module 'vuex-map-fields' {
  export function mapFields<V extends { [P in U]: any }, U extends keyof V>(
    fields: V
  ): { [P in U]: () => any }
}

[tohagan]

And can you use this with vuex-module-decorators Vuex classes?

[lynx-r]

As said @azarashill I created a file vuex-map-fields.d.ts with the type definition. Notice declare module must be single in a typings file.

declare module 'vuex-map-fields' {
  export function mapFields<V extends { [P in U]: any }, U extends keyof V>(
    fields: V
  ): { [P in U]: () => any }
}

[LorensDomins]

In order to use mapFields like mapGetters from vuex with namespaces, I've written according definitions; vuex-map-fields.d.ts

declare module 'vuex-map-fields' {
  interface Mapper<R> {
    <Key extends string>(map: Key[]): { [K in Key]: R }
    <Map extends Record<string, string>>(map: Map): { [K in keyof Map]: R }
  }

  interface MapperWithNamespace<R> {
    <Key extends string>(namespace: string, map: Key[]): { [K in Key]: R }
    <Map extends Record<string, string>>(namespace: string, map: Map): { [K in keyof Map]: R }
  }

  type Computed = () => any

  export const mapFields: Mapper<Computed>
    & MapperWithNamespace<Computed>
}

If you have highlighted eslint errors just add /* eslint-disable */ rule at the beginning of the file.