Typescript
There are diffrent ways to write the classes and having typescript types. I want to show you here the diffrent approches.
Decorators with declare (recommanded)
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 disableuseDefineForClassFields 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>}