TypeScript如何从数组接口响应中仅加载指定ID的单条数据？

初始运行正常的代码 #

定义了数组类型的results，以及加载所有数据的函数：

results: myArray[]

load() {
  this.myService.getData().subscribe((response) => {
    const searchModel = new SearchResultsModel(response);

    this.results = searchModel.results;
  });
}

尝试修改后报错的代码 #

为了根据ID获取特定条目，修改了results的赋值逻辑：

this.results = searchModel.results.find(x => x.id === 123456);

报错信息 #

类型“myArray”缺少“myArray[]”的以下属性：length、pop、push、concat 及其他28个属性。

问题原因 #

results的类型声明为myArray[]（数组），但原生Array.find()方法返回的是单个myArray对象（或undefined），类型不匹配导致TypeScript报错；同时数据网格要求数据源必须是数组格式。

解决方法 #

通过lodash的find方法配合数组包裹解决：

import { find } from 'lodash';

this.results = [find(searchModel.results, { id: 123456 })];

将find找到的单个对象包裹在数组中，确保赋值给results的类型为myArray[]，同时满足数据网格的输入要求。

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