Typescript

There are diffrent ways to write the classes and having typescript types. I want to show you here the diffrent approches.

The tsconfig
...
"useDefineForClassFields": true,  // Default true if target is "ES2022" or "ESNext"
"experimentalDecorators": true,
...

This is pretty new if you are a vuex-orm user. If you are a vuex-orm-next user than you are already used to it.

import { Model } from 'pinia-orm'
import { Attr, Cast, Uid } form 'pinia-orm/dist/decorators'
import { ArrayCast } from 'pinia-orm/dist/casts'
class User extends Model {
  static entity = 'users'
  @Uid() declare id: string
  @Cast(() => ArrayCast) @Attr('{}') declare meta: Record<string, any>
}

For more information about using declare read this ticket

Without declare

With decorators

import { Model } from 'pinia-orm'
import { Attr, Cast, Uid } form 'pinia-orm/dist/decorators'
import { ArrayCast } from 'pinia-orm/dist/casts'
class User extends Model {
  static entity = 'users'
  @Uid() id!: string
  @Cast(() => ArrayCast) @Attr('{}') meta!: Record<string, any>
}

Vite Integration

Make sure to disable useDefineForClassFields in tsconfig.json when using vite >= 2.5.0. See this issue for more details.
...
"useDefineForClassFields": false,
...

without decorators (used way from vuex-orm)

import { Model } from 'pinia-orm'
import { ArrayCast } from 'pinia-orm/dist/casts'
class User extends Model {
  static entity = 'users'
  static fields() {
    return {
      id: this.uid(),
      meta: this.attr('{}')
    }
  }
  static casts() {
    return {
      meta: ArrayCast,
    }
  }
  id!: number
  meta!: Record<string, any>
}
Table of Contents