How come that I've got this conflict in Typescript?

Question

I have created this model in Angular Typescript in order to parse data with it and display the results in a table:

export interface DeviceModel {
  id?: string,
  Name?: string,
  HexId?: string,
  Power?: number,
  Device?: string,
  Hue?: number,
  Sat?: number,
  CT?: number,
  Dimmer?: number,
  ModelId?: string,
  Manufacturer?: string,
  Reachable?: boolean,
  LastSeen?: number,
  LastSeenEpoch?: number,
  LinkQuality?: number,
  Endpoints?: number[],
  ZoneStatus?: number
}

The file data is extracted from is the following JSON file:

[
  {
    "id": "15",
    "Name": "Max",
    "HexId": "F",
    "Power": 1,
    "Device": "ZTE-Greta",
    "Hue": 17,
    "Sat": 57,
    "CT": 23,
    "Dimmer": 3,
    "ModelId": "2022 X-3",
    "Manufacturer": "ZTE Hong Kong",
    "Reachable": "false",
    "LastSeen": 1276,
    "LastSeenEpoch": 543,
    "LinkQuality": 7,
    "Endpoints": [
      2,10
    ],        
    "ZoneStatus": 78
  },
  {
    "id": "33",
    "Name": "Jeff",
    "HexId": "21",
    "Power": 1,
    "Device": "Oppo Reno 7",
    "Hue": 8,
    "Sat": 88,
    "CT": 13,
    "Dimmer": 5,
    "ModelId": "5G 2023",
    "Manufacturer": "Oppo Shanghai",
    "Reachable": "true",
    "LastSeen": 333,
    "LastSeenEpoch": 123,
    "LinkQuality": 10,
    "Endpoints": [
      1,3
    ],        
    "ZoneStatus": 55
  },
  {
    "id": "13",
    "Name": "Levent",
    "HexId": "D",
    "Power": 0,
    "Device": "Samsung Smart TV nr.5",
    "Hue": 11,
    "Sat": 44,
    "CT": 22,
    "Dimmer": 5,
    "ModelId": "2019 Q3",
    "Manufacturer": "Samsung International",
    "Reachable": "false",
    "LastSeen": 1111,
    "LastSeenEpoch": 777,
    "LinkQuality": 7,
    "Endpoints": [
      4,11,13
    ],        
    "ZoneStatus": 2
  }
]

I imported the JSON file as such in my DevicesComponent:

import * as data from '../rooms/room/device/deviceList.json';

And declared a variable which I could use to further display the data, either in the console, or in the HTML, as a table:

devices: DeviceModel[] = data;

But it gives me the following error:

Type '{ id: string; Name: string; HexId: string; Power: number; Device: string; Hue: number; Sat: number; CT: number; Dimmer: number; ModelId: string; Manufacturer: string; Reachable: string; LastSeen: number; LastSeenEpoch: number; LinkQuality: number; Endpoints: number[]; ZoneStatus: number; }[]' is not assignable to type 'DeviceModel[]'.
  Type '{ id: string; Name: string; HexId: string; Power: number; Device: string; Hue: number; Sat: number; CT: number; Dimmer: number; ModelId: string; Manufacturer: string; Reachable: string; LastSeen: number; LastSeenEpoch: number; LinkQuality: number; Endpoints: number[]; ZoneStatus: number; }' is not assignable to type 'DeviceModel'.
    Types of property 'Reachable' are incompatible.
      Type 'string' is not assignable to type 'boolean'.ts(2322)

Answer 1

in your interface, change Reachable to string. you are currently defining as Boolean but it is of type string in your JSON response.

do this instead

export interface DeviceModel {
  ...
  Reachable?: string,
  
  }