如何为API返回的Array<object>指定自定义Interface类型？

我是TypeScript和React新手，开发的React应用通过第三方库调用REST API获取数据，该库定义了一个无法修改的Response接口：

interface Response {
    results: Array<object>
}

因为返回结果依赖用户自定义表结构，库作者没法提前定义具体类型。现在我已知表结构，想把results转成自己定义的接口：

interface MyResults {
    name: string
    age: number
}

我想在JSX里这样用：

return (
  {results.map((item: MyResults) => (
    <>
      <div>{item.name}</div>
      <div>{item.age}</div>
    </>
  ))}
)

但报错：

Argument of type '(item: MyResults) => React.JSX.Element' is not assignable to parameter of type '(value: object, index: number, array: object[]) => Element'

解决方案1：直接对数组做类型断言 #

最简单的方式是在使用results时，直接断言成MyResults[]，这样map里的item会自动推导为MyResults类型：

return (
  {(results as MyResults[]).map(item => (
    <>
      <div>{item.name}</div>
      <div>{item.age}</div>
    </>
  ))}
)

适合你已经明确API返回结构和预期一致的场景，相当于告诉TypeScript“我确认这个数组里的元素都是MyResults类型”。

解决方案2：封装带校验的类型转换函数 #

如果想避免运行时因数据结构不符导致的错误，可以写个转换函数做简单校验：

function toMyResultsArray(data: object[]): MyResults[] {
  return data.map(item => {
    // 校验必要字段和类型
    if (!('name' in item) || typeof item.name !== 'string' || !('age' in item) || typeof item.age !== 'number') {
      throw new Error('返回数据不符合MyResults结构');
    }
    return item as MyResults;
  });
}

// 使用示例
const myResults = toMyResultsArray(results);
return (
  {myResults.map(item => (
    <>
      <div>{item.name}</div>
      <div>{item.age}</div>
    </>
  ))}
)

这种方式兼顾类型安全和运行时可靠性，适合对数据准确性要求高的场景。

解决方案3：扩充第三方库的泛型接口 #

如果知道第三方库的模块名称，可以通过类型扩充给Response接口添加泛型支持：

// 替换成实际的第三方库名称
declare module 'third-party-lib' {
  export interface Response<T = object> {
    results: Array<T>;
  }
}

// 调用API时指定泛型
const response: Response<MyResults> = await fetchData();
const results = response.results; // 此时results自动为MyResults[]类型

// JSX中直接使用
return (
  {results.map(item => (
    <>
      <div>{item.name}</div>
      <div>{item.age}</div>
    </>
  ))}
)

这是最优雅的长期解决方案，从类型层面彻底解决类型不匹配问题。

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