JSX中展开对象丢失类型安全，如何针对非原生组件禁用该特性？

当我们用{...{ foo, bar }}这种简洁写法给自定义React组件传props时，会丢失TypeScript的类型校验——不仅能传入无效props，组件移除某个prop时也不会触发编译错误。下面是几种恢复类型安全的方法：

• 严格约束Spread对象的类型
  先明确组件的Props类型，然后通过类型断言强制Spread对象匹配该类型，一旦传入无效属性就会立刻报错：

  // 定义组件Props类型
  type MyComponentProps = { foo: string; bar: number };
  const MyComponent = (props: MyComponentProps) => (
    <div>{props.foo}, {props.bar}</div>
  );
  
  // 正确用法：用类型断言约束Spread对象
  const foo = "test";
  const bar = 456;
  const invalidProp = "error";
  <MyComponent {...({ foo, bar } as MyComponentProps)} />;
  

• 用工具函数过滤合法Props
  写一个通用工具函数，只保留组件允许的props，同时在编译和运行时都做校验：

  // 通用Props过滤函数
  const pickValidProps = <T extends object>(source: T, validKeys: (keyof T)[]) => {
    return validKeys.reduce((result, key) => {
      result[key] = source[key];
      return result;
    }, {} as Pick<T, typeof validKeys[number]>);
  };
  
  // 使用示例
  <MyComponent {...pickValidProps({ foo, bar, invalidProp }, ["foo", "bar"])} />;
  

  这种方式既保证类型安全，还能在运行时自动剔除无效props。

• 开启TypeScript严格校验配置
  在tsconfig.json中启用严格模式相关选项，让TypeScript对JSX props做更严格的检查：

  {
    "compilerOptions": {
      "strict": true,
      "jsx": "react-jsx",
      "noImplicitAny": true,
      "strictNullChecks": true
    }
  }
  

  严格模式会放大类型不匹配的问题，帮助你更早发现Spread props的隐患。

• 少量Props时直接显式传递
  如果props数量不多，直接写<MyComponent foo={foo} bar={bar} />虽然不如Spread写法简洁，但能100%保留类型安全，避免不必要的隐患。

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