我有一个像这样的 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 对定义不满意。
最佳答案
一个更优雅(且有效)的方法是使用 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> {}
<小时/>
也就是说,如果您想在不使用泛型且不修改 DataSku
和 PostProduct
的情况下使用它。你可以这样做:
interface Product extends PostProduct {
fields: Omit<PostProduct['fields'], 'skus'> & {
skus: Sku[];
}
}
关于javascript - 覆盖嵌套 typescript 界面中的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57840944/