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