typescriptvue.jsmiragejs

TypeScript, Vue, and MirageJS: Problems with TS compile errors


The problem: I am required to use Vue and MirageJS in a TypeScript web app, and in that web app, I get TS compile errors.

The code:

import { Server, Model } from 'miragejs'
export function makeServer({ environment = "development" } = {}) {
let server = new Server({
  environment,
  models: {
    meeting: Model,
  },
  seeds(server) {
  server.create("meeting", {
    PK_Meeting: 1,
    FamilyId: 1,
    FamilyName: 'Smith',
    MeetingDate: '6/22/21',
    Facilitator: 'Jane Doe',
    MeetingTime: '10:00 AM',
    MeetingNotes: 'Got to know all participants.',
    TotalNumberAttending: 3,
    TotalNumberRemote: 1,
  })
  routes() {
    this.namespace = "api"
    this.get("/meetings/get", schema => {
      return schema.meetings.all()
      })
    },
  })
  return server
}

The errors:

Argument of type '{ PK_Meeting: number; FamilyId: number; FamilyName: string; MeetingDate: string; Facilitator: string; MeetingTime: string; MeetingNotes: string; TotalNumberAttending: number; TotalNumberRemote: number; }' is not assignable to parameter of type 'Partial<ModelInitializer<Instantiate<Registry<AnyModels, AnyFactories>, "meeting">>>'.
  Object literal may only specify known properties, and 'PK_Meeting' does not exist in type 'Partial<ModelInitializer<Instantiate<Registry<AnyModels, AnyFactories>, "meeting">>>'.ts(2345)

Property 'meetings' does not exist on type 'Schema<Registry<AnyModels, AnyFactories>>'.ts(2339)

My guess is that there is a sort of namespace conflict, such that the Model object in Mirage is being overshadowed my a Model definition somewhere else. How do I resolve this? In the C# world where I have spent most of my career, it's easy enough to fix. But I can't find an answer for the TS world. Any ideas?

Update 0: Some test code I ran in a JS project was just fine. So I tried changing the file to a JS file, but it still wouldn't run. I excluded the JS from the tsconfig.json--still no joy. As of this writing, I'm still looking for an answer.


Solution

  • You can simulate the same behaviour by writing:

    return schema.all('meetings')