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.
You can simulate the same behaviour by writing:
return schema.all('meetings')