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>
}