React+TypeScript中扩展运算符传Props时类型检查失效求助

问题原因 #

TypeScript对新鲜对象字面量会触发超额属性检查（直接传a="a" b="b" c="3"时报错就是这个原因），但对已赋值给变量的对象，会遵循结构子类型规则——只要对象包含目标类型的所有必填属性，就允许传入，不管有没有额外属性，所以用扩展运算符传变量时不会报错。

解决方案 #

1. 显式约束变量类型为目标Props

在定义props变量时直接指定类型为MyProps，从源头拦截多余属性：

interface MyProps {
  a: string;
  b: string;
}

const MyComponent: React.FC<MyProps> = (props) => {
  return <>></>;
};

// 显式指定类型，定义时就会报错
const props: MyProps = { a: "a", b: "b", c: "c" }; // 错误：类型"{ a: string; b: string; c: string; }"中不存在属性"c"
const comp2 = <MyComponent {...props}></MyComponent>;

2. 用工具函数强制校验传入对象

如果无法提前指定变量类型，可通过工具函数在传参时校验：

interface MyProps {
  a: string;
  b: string;
}

const MyComponent: React.FC<MyProps> = (props) => {
  return <>></>;
};

// 定义工具函数，约束输入必须符合目标类型
const checkProps = <T>(props: T): T => props;

const props = { a: "a", b: "b", c: "c" };
// 传参时通过工具函数校验，触发错误
const comp2 = <MyComponent {...checkProps<MyProps>(props)}></MyComponent>; // 错误：参数类型"{ a: string; b: string; c: string; }"不能赋值给类型"MyProps"

3. 用Exact类型严格约束组件Props

自定义Exact类型，强制组件只接受符合Props定义的属性，不允许额外字段：

// 自定义Exact类型，标记额外属性为never
type Exact<T, U> = T & Record<Exclude<keyof U, keyof T>, never>;

interface MyProps {
  a: string;
  b: string;
}

// 组件使用Exact类型约束props
const MyComponent = (props: Exact<MyProps, typeof props>) => {
  return <>></>;
};

const props = { a: "a", b: "b", c: "c" };
const comp2 = <MyComponent {...props}></MyComponent>; // 错误：类型"{ a: string; b: string; c: string; }"不能赋值给类型"Exact<MyProps, { a: string; b: string; c: string; }>"

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