Keeping TS types when wrapping mapState function

[agualis]

We are incrementally migrating a big Vue 2 JS project from Vuex to Pinia where we had many usages of mapGetters/mapState.

Instead of directly using, for instance:

// Vue SFC component 
import {mapState} from 'pinia';
import {useUserStore} from 'user-store';

// Options API 
...mapState(useUserStore,  {loggedIn: 'loggedIn'});

We would like to wrap all/some user state functions into something like:

// User pinia store (user-store.js)
import {mapState} from 'pinia';
import {useUserStore} from 'user-store';

export const mapUserState = (args) => mapState(useUserStore, args);

// Vue SFC component 
import {mapUserState} from 'user-store';

// Options API 
...mapUserState({loggedIn: 'loggedIn'});

The wrapper works but we are losing TS type inference.

Here is a super simple project showing the issue:

https://github.com/agualis/pinia-wrappers

Using plain mapState in VSCODE resolves this.loggedIn (boolean):

Using custom mapUserState in VSCODE does not resolve this.loggedIn (any):

This is the type hint that I see in the wrapped version. It seems correct but not 100% sure:

Does anyone has any clue on why this is happening and how to make it work? Could it be just an unrelated Vetur issue? 🙏🏽

The same happens when passing array params instead of object ones to mapState:

javascript

   ...mapState(useUserStore,  ['loggedIn']),

Is it a known drawback of pinia types?

[posva]

for the array, you need to pass ['loggedIn'] as const so TS infer it as a tuple instead of string[]

About you helper, you likely need to add a generic to it, something in the lines of

function mapHelper<T>(mapper: T) {
  return mapState(useUserStore, mapper)
}

[agualis]

The problem is that we are not using TS but JS + JSDOC types. I'll try to get the same thing by using JSDOC generics.

Thanks for your answer 🙌

[posva]

Ah yeah, then

/**
 * @function
 * @template T
 * @param {T} mapper
 */

const mapHelper = (mapper) => useState(useStore, mapper)

You can also create a d.ts where you create the type in TS and then import it:

/** @type {import('./types.d.ts').ExportedType} */
const mapHelper = (mapper) => useState(useStore, mapper)

[agualis]

Thanks a lot for your answers, very appreciated 🙌

for the array, you need to pass ['loggedIn'] as const so TS infer it as a tuple instead of string[]

In JSDoc there is no as const but I used a workaround that infers tuple as ['loggedIn'] but it is not working 😓

I had also tried your suggested @template solution without success.

Very happy with the amazing pinia DX anyways. Keep on rocking!

[posva]

Try creating the type in a d.ts file then so you don't have type restrictions. T probably needs to extends a type though 🤔 Take a look at the types on the mapHelpers.ts file, you should be able to import some of them