如何解决TypeScript中AnyBrick的values属性类型兼容问题？

问题根源 #

你遇到的报错核心是：DynamicTeasersValues这类自定义接口缺少索引签名，TypeScript无法确认这类接口的所有字符串键对应的属性都属于EditableBrickField<any>类型，因此无法与Record<string, EditableBrickField<any>>兼容。

解决方案 #

方案1：给所有Values接口添加索引签名

直接在每个Values接口中显式声明索引签名，明确告知TypeScript“该接口的任意字符串键对应的属性都是EditableBrickField<any>”：

export interface DynamicTeasersValues {
  title: EditableBrickField<string>;
  description: EditableBrickField<string>;
  dynamicContents: EditableBrickField<EditableLink[]>;
  // 添加索引签名
  [key: string]: EditableBrickField<any>;
}

这种方式简单直接，但如果存在大量Values接口，需要逐个修改，维护成本较高。

方案2：将AnyBrick改为泛型接口（推荐）

通过泛型约束，既保留每个Values类型的具体属性定义，又确保所有属性都符合EditableBrickField<any>的要求，无需修改现有Values接口：

// 定义类型约束：确保传入的泛型T的所有属性都是EditableBrickField<any>
type ValidBrickValues<T> = {
  [K in keyof T]: EditableBrickField<any>;
};

// 泛型版AnyBrick
export interface AnyBrick<T extends ValidBrickValues<T>> {
  id: string;
  technicalName: TechnicalNames;
  patternId: string;
  layoutId: string;
  context: BrickContext;
  anchor: string;
  values: T;
  outOfDate: MediasList[] | null;
  saveStatus: SaveStatus;
  status: number;
  isDiffNewBrick: boolean;
  wordsCount: number;
}

// 定义具体Brick类型时指定对应的Values
export interface DynamicTeasersBrick extends AnyBrick<DynamicTeasersValues> {}

这个方案既能保证类型安全，又避免了大量修改现有代码，是更优的选择。

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