How to get typescript to behave when using piniaOptions

[garma83]

hi,
I have a large amount of models, and all of them can be selected (or 'made current'). To help with this, I am using a class that extends Model like this, which then serves as a base class for all my models

export default class MyModel extends Model {

    static piniaOptions = {
        state: () => ({
            data: {},
            currentId: <number|string|null>null,
        }),
    }
    static current<T extends typeof VellumModel>(this: T): InstanceType<T> | null {
        let repo = useRepo(this);
        let currentId: number | string | null = repo.piniaStore().currentId
        return currentId ? repo.find(currentId) as InstanceType<T> : null;
    }
}

This works, but typescript doesnt recognise the '.currentId' type in the current function. Would you have any idea how to resolve this?

[CodeDredd]

Hi,

that's a hard one. I think you are more advanced in typescript than me ^^.
I tried now for some time making a solution.
I don't know if there is a way to do it better, but for now i found this solution which i can implement. What do you think about it?

composables/useDataStore.ts

import type { DefineStoreOptionsBase } from 'pinia'
import { defineStore } from 'pinia'
import { useStoreActions } from './useStoreActions'

export function useDataStore<S extends DataStoreState, T extends DataStore = DataStore>(
  id: string,
  options: DefineStoreOptionsBase<S, T>,
) {
  return defineStore(id, {
    state: () => ({ data: {} } as S),
    actions: useStoreActions(),
    ...options,
  })
}

export interface DataStoreState {
  data: Record<string, any>
  [s: string]: any
}

export type DataStore = ReturnType<typeof import('@/composables')['useDataStore']>

and changing repository/Repository.ts

...
  piniaStore<S extends DataStoreState = DataStoreState>() {
    return useDataStore<S>(this.model.$entity(), this.model.$piniaOptions())(this.pinia)
  }
...

Then you can use it like that:

interface CurrentState<T extends MyModel = MyModel> {
  data: Record<string, Record<string, T>>
  currentId: number | string | null
}

export default class MyModel extends Model {

    static piniaOptions = {
        state: () => ({
            data: {},
            currentId: null,
        }),
    }
    static current<T extends typeof VellumModel>(this: T): InstanceType<T> | null {
        let repo = useRepo(this);
        let currentId: number | string | null = repo.piniaStore<CurrentState<InstanceType<T>>>().currentId
        return currentId ? repo.find(currentId) as InstanceType<T> : null;
    }
}

[garma83]

that works I think :)
My typescript is also not amazing but im used to typing in other languages, and this looks logical. Thanks, would be great if this would be added.

[CodeDredd]

ok...added with a8628c8.
I am still not happy with this solution yet... 🤔