TypeScript中服务调用无返回时如何手动赋值值对象属性

报错原因 #

你代码的执行逻辑存在顺序错误：在判断data === null之前，你已经执行了this.houseData = data，当接口返回null时，this.houseData本身就是null值，直接给null设置dataList属性必然触发该类型错误。
另外你手动赋值的代码中还有一处隐性错误：settings数组内的id: number是TypeScript的类型声明写法，不能直接用作属性值，需要替换为实际的数值。

正确实现方式 #

你需要在接口返回null时，手动构造完整的AllHouseData对象实例，再赋值给this.houseData，参考代码如下：

export class HouseComponent implements OnInit {
    houseData: AllHouseData;

    callHouseService(houseList) {
        this.houseService.getHouseData(houseList).subscribe((data) => {
            // 先判断data是否为有效值
            if (data) {
                this.houseData = data;
            } else {
                // 手动构造完整的AllHouseData对象
                this.houseData = {
                    dataList: [
                        {
                            id: 0,
                            name: "",
                            settings: [{ id: 0, houseCode: "", parking: false }],
                        },
                    ],
                    numberOfHouses: 1 // 匹配dataList的长度赋值，符合类型定义要求
                };
            }
        });
    }
}

额外优化建议 #

如果想进一步避免空值报错，可以给houseData设置初始默认值，同时配合可选链操作符?.访问属性，降低空指针风险。

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