Typescript support

[derrabauke]

Hey there,

thanks for the great plugin. Is typescript support planned for the plugin? I have difficulties using the static methods on my model which are injected by the plugin.

51:25 Property '$create' does not exist on type 'typeof Clip'. Did you mean 'insert'?
   51 |               this.Clip.$create({
       |                         ^
    52 |                 data: {
    53 |                   meta: {
    54 |                     name: file.name,
Version: typescript 3.9.7

Is there a way I can define those methods on my model to satisfy my typechecker and they will be merged afterwards?

[derrabauke]

For everybody in the same situation: Temporarily solved the TypeScript Error for now by manually dispatching the actions like this.Clip.dispatch("$create", {data...}

[cto-leaps]

@derrabauke Thank you for the tip, I was going bunkers!

[cto-leaps]

@eldomagan Any plan for Typescript support in the future?

[eldomagan]

Hi all. Sorry for the late response. I'm very busy now with my daily job. I'm planning to make a full rewrite in typescript when I have little time. But contributions are welcome.

[derrabauke]

@eldomagan No worries! A lot of plugins for the Vue ecosystem have to do a rewrite with Vue 3 and/or Typescript. When you start out with a base I will try to contribute.

[Colorfulstan]

I use these shims to add TS support to my vuex-orm-localforage models:

methods got renamed to prevent confusion

import '@vuex-orm/core'
import Collection from '@vuex-orm/core/lib/data/Collection'
import InstanceOf from '@vuex-orm/core/lib/data/InstanceOf'
import * as Payloads from '@vuex-orm/core/lib/modules/payloads/Actions'

// https://github.com/eldomagan/vuex-orm-localforage
declare module '@vuex-orm/core' {
  import { Condition } from '@vuex-orm/core/lib/modules/payloads/Actions'

  class Model {

    /** Load data from the IndexedDB store associated to a model and persist
     *  them in the Vuex Store using insertOrUpdate
     *  returns insertOrUpdate result
     *  @deprecated NOTE: using this method will replace data in vuex with
     *  data from indexedDB! This means if changes are not persisted, they
     *  will be replaced. Also this creates a lot of inserts, as all items
     *  are replaced one by one (log spam).
     *  If feasible, use $get(id) to update specific items or making sure
     *  they are fetched from indexedDB when needed.
     *  */
    static $fetchPersisted<T extends typeof Model>(
      this: T,
    ): Promise<Collection<InstanceOf<T>>>

    /** Load data by id from the IndexedDB store associated and persist it
     *  to Vuex Store using insertOrUpdate
     *  returns insertOrUpdate result */
    static $getPersisted<T extends typeof Model>(
      this: T,
      params: { id: number | string } | string,
    ): Promise<{ [key: string]: InstanceOf<T>[] }>

    /** Like VuexORM insertOrUpdate, but also persist data to IndexedDB
     * returns array with created data!? (see localforage setItem)*/
    static $createPersisted<T extends typeof Model>(
      this: T,
      payload: Payloads.InsertOrUpdate,
    ): Promise<T[]>

    /** Update records using VuexORM update (if "where" is set) or
     *  insertOrUpdate then persist changes to IndexedDB
     * returns array with updated data!? (see localforage setItem)
     * @deprecated it seems that $create is the better alternative here.
     * with $update there is a bug when using it on the instance sometimes
     * (error like "$self is null/undefined"), and create
     * does the thing expected from update (insertOrUpdate)
     * This error even happens sometimes if called on the class
     * */
    static $updatePersisted<T extends Model = this>(
      this: typeof T,
      payloadLikeVuexOrm: Payloads.Update | Payloads.InsertOrUpdate,
    ): Promise<T[]>

    /** Like VuexORM create, but also replace all data from IndexedDB
     * returns array with updated data!? (see localforage setItem) */
    static $replacePersisted<T extends typeof Model>(
      this: T,
      payloadLikeVuexOrm: Payloads.Create,
    ): Promise<T[]>

    /** Like VuexORM delete, but also remove data from IndexedDB
     * returns ??? model.$localStore.removeItem(key)[]*/
    static $deletePersisted<M extends typeof Model>(
      this: M,
      id:
        | string
        | number
        | /* compound key, NOT array of ids */ (number | string)[]
        | Condition,
    ): Promise<InstanceOf<T> | InstanceOf<T>[]>

    /** Like VuexORM deleteAll, but also delete all data from IndexedDB */
    static $deleteAllPersisted<M extends typeof Model>(this: M): Promise<void>

    /**
     * Deletes the instance from indexedDB and vuex-orm
     * @see Model.$deletePersisted**/
    deletePersisted<M extends typeof Model>(this: M): Promise<void> // TODO: response typing

  }
}