嵌套Typescript接口中的Override属性

Question

我有一个打字稿界面，如下所示：

interface DataSku {
  fields: {
    sku: string;
  }
}

interface PostProduct {
  fields: {
    title: string;
    skus: DataSku[];
  }
}

现在，我想扩展Product接口，以便skus数组中的每个对象都有一个额外的字段。 所以我尝试了这个：

interface Sku extends DataSku {
  stripe: Stripe.skus.ISku;
}

interface Product extends PostProduct {
  fields: PostProduct['fields'] & {
    skus: Sku[];
  }
}

在我的代码中，我尝试这样的循环：

(product as Product).fields.skus.forEach(sku => console.log(sku.stripe));

这将引发以下Typescript错误：

Property 'stripe' does not exist on type 'DataSku'.

接口扩展错误吗？ 控制台确实按预期方式输出了我的stripe对象，因此只是Typescript对定义不满意。

Answer 1

为此，一种更为优雅（有效）的方法是使用泛型 。

更新PostProduct与同时使用的类型，泛型参数fields.skus ：

interface PostProduct<T extends DataSku = DataSku> {
  fields: {
    title: string;
    skus: T[];
  }
}

T extends DataSku意味着类型必须是DataSku的子类型。 而且，我们甚至可以为T设置默认值，因此也可以使用PostProduct而无需指定通用参数。

现在，对于Product我们只需要传递Sku作为通用参数：

interface Product extends PostProduct<Sku> {}

操场

---

就是说，如果您希望不使用泛型且不修改DataSku和PostProduct 。 您可以这样做：

interface Product extends PostProduct {
  fields: Omit<PostProduct['fields'], 'skus'> & {
    skus: Sku[];
  }
}

操场