如果实际数据体与定义的类型不同，有没有办法修改TypeScript（React）中的响应数据？

Question

我目前正在为我的公司构建一个电子商务应用程序。正如标题所示，我面临着这样的问题： 通常，我的 API 调用的产品类型类似于：

content: [
    isAvailable: boolean;
    isSoldOut: boolean;
    product: {
      id: string;
      productName: string;
    }
    seller: string;
  ]

但在少数情况下，实际响应会是这样的：

content: {
    id: string;
    productName: string;
    ...
  } []

基本上只有产品主体，没有像上面这样的额外信息

简而言之，我只想修改 API 的响应（小情况或相反），而不必触及已经定义的product.type.ts。

我确实为此添加了一个额外的接口，但这使应用程序变得非常复杂，因为我试图有条件地将数据传递给使用该数据的任何子组件。任何帮助，将不胜感激。谢谢！

Answer 1

这不是您可以使用 TypeScript 接口/类型执行的操作，因为 TypeScript 在运行时不会执行任何操作。 TypeScript 提供静态类型检查，这在开发过程中很有帮助。但是，如果您希望更改响应正文（如果它与所需的格式不匹配），则必须在代码中添加一些逻辑来更改正文中存在的属性。

Answer 2

我建议创建 typeguard 来检查哪些数据到来，然后使用这些类型（将不常见的类型修改为常见的类型，或者在每个组件中对两种类型进行计数）

const isMajorType(data: Major | Minor): data is Major {
return "isAvailable" in data
}

const transformData = (data: Major | Minor): Major =>{
if(isMajorType(data)){
return data
}
return // some transform magic
}