如何处理TypeScript接口与CMS返回动态属性数据不匹配的问题？

我定义了一个包含固定属性的TypeScript接口Page：

export interface Page {
  title: string;
  description: string;
  heading: string | string[];
}

该接口对应的数据来自CMS，但CMS会返回一些完全由其决定的动态属性，由于这类属性数量过多，在Page接口中逐个定义为可选属性（如prop?: ...）并不合理。因此，当我使用Page类型声明变量后，在代码编辑器中访问这类动态属性时会报错：

const firstPage: Page = service.getPage('byId');
const dynamicPropX = firstPage.dynamicPropX; // 该属性不存在于接口但存在于返回对象中

想知道是否有可行的解决方案，还是只能使用any类型？

解决方案1：给接口添加索引签名 #

直接在Page接口中添加字符串索引签名，允许任意字符串键的动态属性，同时保留固定属性的强类型校验：

export interface Page {
  title: string;
  description: string;
  heading: string | string[];
  [key: string]: unknown; // 允许任意字符串键，值类型可根据实际情况设为string/any等，unknown更安全
}

访问动态属性时不会报错，若需要确定类型，可结合类型断言：

const dynamicPropX = firstPage.dynamicPropX as string;

解决方案2：用交叉类型合并固定与动态类型 #

定义基础的Page接口，再通过交叉类型结合动态键值对类型：

export interface Page {
  title: string;
  description: string;
  heading: string | string[];
}

// 合并固定属性与任意动态属性
type DynamicPage = Page & Record<string, unknown>;

使用时用DynamicPage声明变量：

const firstPage: DynamicPage = service.getPage('byId');
const dynamicPropX = firstPage.dynamicPropX; // 无类型报错

解决方案3：临时使用类型断言 #

如果只是偶尔访问某个动态属性，不想修改原有接口，可以直接用类型断言绕开检查：

const dynamicPropX = (firstPage as unknown as Record<string, string>).dynamicPropX;

这种方式适合临时场景，无需改动原有类型定义。

注意事项 #

尽量避免直接使用any类型，会丢失TypeScript的类型校验优势。优先选择索引签名或交叉类型的方案，既能保留固定属性的强类型，又能兼容动态属性。

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