如何在 Angular 8 和类型脚本中为对象和对象数组创建接口？

Question

I'm trying to create an interface for Object, objects, and array of objects.

Sample interface

export interface ErateColumn {
  categories:{
    [key:string]:column[]
  }
}

interface column {
  label:string
  value:string
}

Sample API response like this

{
"categories": {
    "Basic Information": [
        { label: "Applicant Type", value: "ApplicantType" },
        { label: "Organization Name", value: "OrganizationName" },
    ],
    "FRN Lineitem": [
        { label: "Monthly_Cost", value: "Monthly_Cost" },
        ],
    "FRN status": [
        { label: "Purpose Type", value: "PurposeType" },

    ]
}
}

Answer 1

what you have provided in this._erateColumn.next(columnList) method is columnList . And somehow columnList seems to be a single object of the interface ErateColumn, While your BehaviorSubject has type array of ErateColumn. Change that to ErateColumn or provide array in this._erateColumn.next(columnList) method for your code to work.

EDIT

According to the new screenshot of yours, it says property categories is missing so either make it optional like this

export interface ErateColumn {
  categories?:{
    [key:string]:column[]
  }
}

interface column {
  label:string
  value:string
}

or provide categories.

Answer 2

May be this approach can help someone

You can convert JSON to typescript's class or interface , Using online tool json2ts or if you are using vs code (Visual Studio) use this extension QuickType - Paste JSON as Code

Note: Your JSON should be a valid JSON otherwise you will get errors

Answer 3

Hope this helps...

interface User {
   name: string;
   phone: string;
}

const user: User ==> Object

const usersList: User[] ===> Array of Objects