React组件类型定义复用：如何避免重复编写Props类型？

这确实是React+TypeScript开发中挺烦人的一个痛点——重复写类型不仅冗余，还容易因为子组件类型更新而出现不一致的问题。下面几个实用技巧，能帮你彻底摆脱这种重复劳动：

1. 直接引用子组件的类型字段 #

如果父组件只需要复用子组件中某一个属性的类型，最简单的方式就是直接通过ChildProps['属性名']来引用：

// 子组件（或第三方组件）的类型定义
interface ChildProps {
  onChange: (value: string) => void;
  label: string;
}

// 父组件Props直接复用子组件的onChange类型
interface ParentProps {
  onChange: ChildProps['onChange'];
}

const Parent: React.FC<ParentProps> = ({ onChange }) => {
  return <Child onChange={onChange} label="Label 1" />;
};

2. 用Pick/Omit继承子组件的部分属性 #

如果父组件需要复用子组件的多个属性，或者只需要排除少数属性，可以结合extends和TypeScript的工具类型Pick/Omit：

• Pick<ChildProps, '属性1' | '属性2'>：从子组件类型中挑选需要的属性
• Omit<ChildProps, '属性1' | '属性2'>：从子组件类型中排除不需要的属性

示例代码：

// 继承ChildProps并排除不需要的label属性
interface ParentProps extends Omit<ChildProps, 'label'> {
  // 可以添加父组件自己的自定义属性
  extraProp?: boolean;
}

const Parent: React.FC<ParentProps> = ({ onChange, extraProp }) => {
  console.log(extraProp);
  return <Child onChange={onChange} label="Label 1" />;
};

// 或者只挑选需要的onChange属性
interface ParentProps extends Pick<ChildProps, 'onChange'> {
  extraProp?: boolean;
}

3. 用Parameters/ReturnType提取函数类型细节 #

如果只是想复用子组件中回调函数的参数或返回值类型，可以用TypeScript的Parameters和ReturnType工具类型：

// 获取ChildProps中onChange函数的参数类型（这里取第一个参数）
type OnChangeValue = Parameters<ChildProps['onChange']>[0];
// 获取onChange函数的返回值类型
type OnChangeReturn = ReturnType<ChildProps['onChange']>;

interface ParentProps {
  onChange: (value: OnChangeValue) => OnChangeReturn;
}

4. 直接用子组件类型子集作为父组件类型（简化写法） #

如果父组件逻辑简单，甚至可以不用单独定义ParentProps，直接把Pick<ChildProps, 'onChange'>作为组件的泛型参数：

const Parent: React.FC<Pick<ChildProps, 'onChange'>> = ({ onChange }) => {
  return <Child onChange={onChange} label="Label 1" />;
};

5. 针对第三方组件的特殊处理 #

如果子组件是第三方库提供的（比如Ant Design、MUI等），我们可以通过React.ComponentProps<typeof 组件名>来获取它的完整Props类型，再进行复用：

import { Input } from 'antd';

// 获取Input组件的Props类型
type InputProps = React.ComponentProps<typeof Input>;

// 父组件复用Input的onChange类型
interface ParentProps {
  onChange: InputProps['onChange'];
}

const Parent: React.FC<ParentProps> = ({ onChange }) => {
  return <Input onChange={onChange} placeholder="请输入" />;
};

这些技巧的核心思路都是复用已有的类型定义，既减少了重复代码，又能保证父子组件的类型一致性——当子组件的类型更新时，父组件的类型会自动同步，不用手动修改。

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