React+TypeScript日期转换时的类型兼容问题排查

错误原因拆解 #

1. 未满足FormattedResult的字段要求 #

FormattedResult继承了Result接口，还额外定义了formattedScannedAt和formattedDateOfBirth两个必填字段，但你在map处理数据时完全没有返回这两个字段，TypeScript因此判定返回的对象不符合FormattedResult类型。

2. 非法修改了原Result接口的字段类型 #

你的代码直接覆盖了Result中多个字段的类型，违反了继承约定：

• scannedAt原类型是Date，你通过toLocaleString将其改为字符串类型；
• score原类型是number，toFixed(2)返回的是字符串，与原类型不匹配；
• sampleQuality原类型是Quality枚举，经过formatQuality处理后变成了QualityValue，与原枚举类型不兼容；
• 虽然dateOfBirth原类型是string，但你修改了它的格式，违背了FormattedResult继承Result时需保留原字段语义的原则。

修正后的代码 #

推荐方案：保留原数据字段，新增格式化字段 #

这种方式既符合类型要求，也能保留原数据用于后续业务场景：

// 假设formatQuality用于转换枚举为显示文本，新增字段存储结果而非覆盖原字段
export const formattedData: FormattedResult[] = data.map((item) => ({
  // 保留原Result的所有字段及类型
  ...item,
  // 新增FormattedResult要求的格式化字段
  formattedScannedAt: item.scannedAt.toLocaleString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }),
  formattedDateOfBirth: new Date(item.dateOfBirth).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }),
  // 新增格式化后的质量显示字段，不修改原sampleQuality
  displaySampleQuality: formatQuality(item.sampleQuality),
  // 新增格式化后的分数字段，保留原score的number类型
  formattedScore: item.score.toFixed(2)
}));

若必须修改原字段类型：调整接口定义 #

如果业务确实需要修改原字段类型，不要直接继承Result，而是显式定义FormattedResult的字段：

export interface FormattedResult {
  patientId: string;
  scannedAt: string; // 显式定义为字符串类型
  score: string; // 显式定义为字符串类型
  event: Event;
  sampleQuality: QualityValue; // 显式定义为QualityValue类型
  dateOfBirth: string;
  // 若不需要原格式化字段，可删除或标记为可选
}

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