如何为指定TransitReport数据结构编写正确的TypeScript对象类型接口？

看起来你是把数据结构的层级搞混啦！咱们一步步来修正这个TypeScript接口问题：

首先得明确你给出的原始数据结构：这是一个数组，数组里的每个元素包含title、client，以及一个嵌套的data对象——而你之前的接口错误地把data内部的字段直接放到了顶层，同时用Record<string, unknown>模糊了data的类型，这就是导致测试报错的根本原因。

正确的接口拆分方案 #

我们可以把嵌套的data结构单独抽成一个子接口，再组合成顶层的TransitReport接口，这样类型定义清晰且完全匹配你的数据结构：

// 先定义嵌套的data结构接口
export interface TransitReportData {
  overdueReviews: number;
  outstandingCovenantBreaches: number;
  outstandingMarginingBreaches: number;
  periodStartDate: string;
  periodEndDate: string;
}

// 再定义顶层的TransitReport接口
export interface TransitReport {
  title: string;
  client?: string; // 保留你原来的可选标记，如果client确实是可选的话
  data: TransitReportData; // 这里用明确的子接口类型，而不是模糊的Record
}

// 你的原始数据结构是这个接口的数组
type TransitReportList = TransitReport[];

为什么你的原接口会报错？ #

你原来的接口里，把overdueReviews、periodStartDate等字段直接放在了TransitReport的顶层，但实际数据里这些字段是嵌套在data对象中的。TypeScript会严格检查类型结构，所以当你传入符合原始数据结构的对象时，TypeScript会提示你“缺失顶层的这些属性”——因为它找不到这些字段在顶层，只在data里找到了。

使用示例 #

现在你模拟API返回的数据就可以完美匹配这个类型了，比如：

// 模拟API返回的单条报告数据
const sampleReport: TransitReport = {
  title: "Q3 Transit Review",
  client: "ABC Corp",
  data: {
    overdueReviews: 2,
    outstandingCovenantBreaches: 0,
    outstandingMarginingBreaches: 1,
    periodStartDate: "2024-07-01",
    periodEndDate: "2024-09-30"
  }
};

// 模拟数组形式的报告列表
const reportList: TransitReportList = [sampleReport];

这样编写测试用例时，TypeScript就不会再报缺失属性的错误啦！

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