Mapping json out to typescript in spfx

Question

I have the following json output :

"ParentTerm":{  
      "Name":"Accounting",
      "ID":"e8c3c601-d3e0-4499-b0ad-3b520924af15",
      "Root":true,
      "ChildTerm":[  
         {  
            "Name":"P",
            "ID":"6f2c1ab7-68fe-4809-83c0-e2cd8f58210a",
            "Root":false
         },
         {  
            "Name":"Q",
            "ID":"cf76a27e-4626-46d4-93de-033e43b7cac9",
            "Root":false
         }
      ]
   },
   "userProperties":{  
      "BusinessUnit":"Accounting",
      "Countries":"India",
      "GeoLocation":"India",
      "CompetenceArea":"Addresses",
      "PictureURL":"https://my.sharepoint.com:443/User%20Photos/Profile%20Pictures/org_onmicrosoft_com_MThumb.jpg"
   }
}

I am trying to map this to typescript interface

export interface IUserProperties {
    ParentTerm: ParentTerm;
    userProperties: UserProperties;
  }
  export interface ParentTerm {
    Name: string;
    ID: string;
    Root: boolean;
    ChildTerm?: (ChildTermEntity)[] | null;
  }
  export interface ChildTermEntity {
    Name: string;
    ID: string;
    Root: boolean;
  }
  export interface UserProperties {
    BusinessUnit: string;
    Countries: string;
    GeoLocation: string;
    CompetenceArea: string;
    PictureURL: string;
  }

But it doesnt work any help

Answer 1

It'd help to have the line of code that gives you this output.
I'm guessing you're using the fetch API or something similar and you're getting a Promise carrying the payload. Let's assume response is this object in the sample then this sample should help you:

(await response.json()) as IUserProperties