动态键值键入 Typescript

Question

I need a little help here.

My API response is as below:

Week At A Glance: { objA: [{}], objB: [{}] },
records: { Employee Records: [{}], Email Records: [{}], message: "" },
history: { [{}] }

When i am trying to create a model for it as below, i am not able to proceed. I created as below

interface DesiredResponse {
    [key: string] : {
        objA: ObjA[],
        objB: ObjB[]
    },
    records: Records[],
    history: History[]
}

interface Records {
    [key: string]: EmpRecords | EmailRecords;
    message: string
}

Typescript error: Property 'records' of type 'Records[]' is not assignable to string index type '{ objA: BbjA[]; objB: ObjB[] }'

Property 'message' of type 'string' is not assignable to string index type 'EmpRecords | EmailRecords'

How can i efficiently type it so that i get auto suggestion while accessing this model.

Answer 1

EDIT:

This is actually caused by a single issue in your code where you've defined your interface to use a list version of the Records interface for your records property as compared to what your API response is actually returning (not an array - an object):

interface DesiredResponse {
  // ...
  records: Records; // Originally Records[]
}

---

Original answer:

This is because defining separate properties in a TypeScript interface usually requires you to use semicolons instead of commas, unlike that of JSON where you could do the opposite (aka use commas instead of semicolons):

export interface MyInterface {
  property1: string;
  property2: boolean;
  // etc
}

vs:

export interface MyInterface {
  property1: string,
  property2: boolean // Would not compile
}