TypeScript中如何扩展复杂接口内的fields字段？

你当前的写法是有效的，通过继承ContentfulEntry并覆盖fields属性为BlogPost类型，能正确实现针对博客文章类型的接口扩展：

interface BlogPostEntry extends ContentfulEntry {
  fields: BlogPost;
}

不过如果需要适配多种内容类型（比如文章、商品等），更优雅的方案是将ContentfulEntry改为泛型接口，这样无需为每个内容类型单独编写继承接口：

第一步：修改ContentfulEntry为泛型接口 #

export interface ContentfulEntry<TFields = {}> {
  metadata: {
    tags: [];
  };
  sys: {
    space: {};
    id: string;
    type: string;
    createdAt: string;
    updatedAt: string;
    environment: {
      sys: {};
    };
    revision: number; // 注意：原代码中`revision: 1`是字面量类型，改为number更符合实际API返回
    contentType: {
      sys: {
        id: string;
        type: string;
        linkType: string;
      };
    };
    locale: string;
  };
  fields: TFields;
}

第二步：针对不同内容类型生成条目类型 #

直接通过泛型参数传入对应的内容类型即可：

// 博客文章条目类型
type BlogPostEntry = ContentfulEntry<BlogPost>;

// 如果有其他内容类型，比如商品
export interface Product {
  name: string;
  price: number;
  inventory: number;
}
type ProductEntry = ContentfulEntry<Product>;

两种方案对比 #

• 原始方案：适合单一内容类型的简单场景，写法直观。
• 泛型方案：适合多内容类型场景，代码更简洁、可维护，避免重复定义相似的继承接口。

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