javascript - 覆盖嵌套 typescript 界面中的属性

Question

我有一个像这样的 typescript 界面:

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

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

现在我想扩展 Product 接口(interface)，以便 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'.

我是否扩展了接口(interface)错误？控制台确实按预期输出了我的 strip 对象，因此只是 Typescript 对定义不满意。

Answer 1

一个更优雅(且有效)的方法是使用 generics .

使用用于 fields.skus 类型的通用参数更新 PostProduct:

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

T extends DataSku 表示该类型必须是 DataSku 的子类型。我们甚至可以为 T 设置默认值，这样 PostProduct 也可以使用，而无需指定通用参数。

现在，对于 Product，我们只需将 Sku 作为通用参数传递即可:

interface Product extends PostProduct<Sku> {}

Playground

<小时/>

也就是说，如果您想在不使用泛型且不修改 DataSku 和 PostProduct 的情况下使用它。你可以这样做:

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

Playground