为何我的Angular TypeScript代码出现类型冲突？

问题场景 #

在Angular TypeScript中定义了DeviceModel接口用于解析JSON数据并展示：

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
}

待解析的JSON文件内容：

[
  {
    "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
  }
]

在DevicesComponent中导入JSON并赋值：

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

devices: DeviceModel[] = data;

出现错误：

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)

原因分析 #

这个类型冲突的核心原因非常明确：

• 你在DeviceModel接口里将Reachable定义为布尔类型（boolean）
• 但JSON文件中的Reachable字段值是字符串类型（"true"/"false"）

TypeScript是强类型语言，会严格校验类型匹配，字符串与布尔属于完全不同的类型，因此直接赋值会触发类型不兼容的错误。

解决方法 #

有两种常用的修复方式：

方式一：修改JSON文件的类型 #

将JSON里的"true"/"false"改成布尔值true/false，去掉引号，即可直接匹配接口的类型定义：

"Reachable": false,
// 或者
"Reachable": true

方式二：转换数据类型后再赋值 #

如果无法修改JSON文件，可以在赋值时手动将字符串转成布尔值，比如使用map方法处理数组：

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

this.devices = rawData.map(item => ({
  ...item,
  Reachable: item.Reachable === 'true'
})) as DeviceModel[];

这段代码会遍历每个设备数据，把Reachable字段的字符串值转换成对应的布尔值，再赋值给devices变量，就能通过TypeScript的类型校验了。

内容的提问来源于stack exchange，提问作者MyNameIsJeff