如何在TypeScript中实现React组件的特化？

你的思路方向是对的，但需要修正几处TypeScript语法和类型工具的使用问题，就能实现你想要的效果——固定a和b的值，让特化组件的使用者只能传入剩余参数，且未来原组件新增Props时无需修改特化组件。

关键修正与实现步骤 #

1. 替换不存在的ParamsOf类型：TypeScript没有内置ParamsOf，可以用React提供的ComponentProps<typeof MyComp>来自动提取原组件的Props类型，不管原组件后续怎么新增属性，这个类型都会同步更新。
2. 修正Omit的参数格式：Omit的第二个参数需要是联合类型（用|分隔），而非逗号分隔。
3. 可选：避免FC的默认children：如果你的特化组件不需要接收children，可以不用FC类型，直接定义函数参数类型，避免不必要的属性干扰。

完整实现代码 #

import React from 'react';

// 原组件（未来可能新增g、h等Props）
function MyComp({a, b, c, d, e, f}: any) {
  return <div>{a}{b}{c}{d}{e}{f}</div>;
}

// 提取原组件Props并排除a、b
type MySpecialProps = Omit<React.ComponentProps<typeof MyComp>, 'a' | 'b'>;

// 实现特化组件
const MySpecial = (props: MySpecialProps) => {
  return <MyComp a="foo" b="bar" {...props} />;
};

// 使用示例：类型提示仅显示c、d、e、f，新增g后自动包含该属性
<MySpecial c="c_val" d="d_val" e="e_val" f="f_val" />

效果说明 #

• 其他开发者使用<MySpecial>时，TypeScript会自动提供c、d、e、f（及未来新增的Props）的类型补全，完全看不到a和b。
• 当MyComp新增g、h等Props时，MySpecialProps会自动包含这些新属性，特化组件无需任何修改就能支持新参数的传入。

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