React TypeScript组件定义：如何避免Props名称重复书写？

首先你写的简化写法const Comp = (CompProps): JSX.Element => {}是无效的——CompProps是TypeScript接口（属于类型层面的定义），不能直接作为函数参数的变量名使用：参数名是运行时的标识符，而类型在编译阶段就会被移除。

针对你不想重复书写Props名称的需求，有两种常用的简化方式：

1. 直接接收Props对象（不解构） #

这是最简洁的方案，无需解构单个属性，直接将props作为一个对象接收并标注类型，在组件内通过props.属性名访问即可：

interface CompProps {
  A: string;
  B: number;
  // 更多属性...
}

const Comp = (props: CompProps): JSX.Element => {
  // 直接使用 props.A、props.B
  return <div>{props.A} - {props.B}</div>;
};

这种写法完全避免了重复书写属性名，Props越多越能体现优势。

2. 使用React.FC类型（可选） #

如果习惯用函数组件类型标注，可以用React.FC包裹Props接口，同时省略返回类型的显式标注（TypeScript会自动推断）：

interface CompProps {
  A: string;
  B: number;
}

const Comp: React.FC<CompProps> = (props) => {
  return <div>{props.A} - {props.B}</div>;
};

注意：React 18之后React.FC不再默认包含children属性，如果需要支持children，需手动在Props接口中添加children?: React.ReactNode。

关于解构的补充 #

如果确实需要解构部分属性，同时不想写全所有Props，可以结合剩余参数语法：

interface CompProps {
  A: string;
  B: number;
  C: boolean;
  D: string[];
}

const Comp = ({ A, B, ...rest }: CompProps): JSX.Element => {
  // 使用解构后的A、B，剩余属性通过rest.C、rest.D访问
  return <div>{A} - {B} - {rest.C}</div>;
};

但这种方式仍需写出你要直接使用的属性名，适合只用到部分Props的场景。

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