React组件TypeScript类型报错：Record属性与索引签名不兼容

问题描述 #

需要为React组件定义类型，包含两个已知属性：

• foo：string类型
• bar：Record<string, string>类型
  同时要支持传入任意数量string类型的未知属性。当前的类型定义可正常编写，但使用组件时TypeScript抛出如下错误：

Type '{ foo: string; bar: Record<string, string>; }' is not assignable to type 'Record<string, string>'.
Property 'bar' is incompatible with index signature.
Type 'Record<string, string>' is not assignable to type 'string'.ts(2322)

当前类型定义代码：

type A = {
  foo: string;
  bar: Record<string, string>;
};

type B = A & Record<string, string>;

组件使用示例：

<Component
  foo="name"
  bar={{ bar: 'bar' }}
  {...{ baz: 'baz' }} // 可传入任意数量未知属性
/>

错误原因 #

A & Record<string, string>的交叉类型要求所有属性同时满足两个类型的约束：bar属性在A类型中被定义为Record<string, string>，但Record<string, string>的索引签名强制所有属性值必须是string，这就造成了矛盾——bar既要是对象类型又要是字符串类型，因此TypeScript抛出类型不兼容错误。

解决方案 #

正确的思路是让已知属性不受索引签名的约束，仅让索引签名作用于未知属性，以下是几种可行方案：

方案1：用Omit排除已知属性后结合索引签名 #

type ComponentProps = {
  foo: string;
  bar: Record<string, string>;
} & Omit<Record<string, string>, 'foo' | 'bar'>;

这种写法明确将foo和bar从全局索引签名的约束中排除，仅要求未知属性满足string类型。

方案2：直接扩展联合类型的索引签名 #

type ComponentProps = {
  foo: string;
  bar: Record<string, string>;
  [key: string]: string | Record<string, string>;
};

直接声明未知属性的值可以是string或Record<string, string>，后续若新增其他类型的已知属性，只需把对应类型加入联合类型即可。

方案3：结合React内置PropsWithChildren（如需支持children） #

如果组件需要接收children属性，可以结合React的内置类型：

import type { PropsWithChildren } from 'react';

type ComponentProps = PropsWithChildren<{
  foo: string;
  bar: Record<string, string>;
  [key: string]: string | Record<string, string>;
}>;

验证使用 #

使用修改后的类型定义，组件传入已知属性和任意未知属性都不会触发类型错误：

<Component
  foo="name"
  bar={{ bar: 'bar' }}
  baz="baz"
  qux="qux"
/>

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