React + TypeScript组件Props类型简化方案及最佳实践咨询

自定义Props类型的合理性 #

你给出的第二种抽离MyCounterProps类型的写法完全合理，这本身就是React + TypeScript开发里的常规最佳实践。把Props类型单独拎出来定义，不仅能让组件函数的参数部分更清爽，还能提升代码的可维护性——后续要改Props结构的话，直接改这个类型就行，不用在函数参数里翻找；要是其他地方需要复用这个Props类型（比如父组件传参时做类型校验），直接导出用就好。

简化Props类型的方法 #

除了抽离独立类型，还有几种可以进一步简化或优化的思路：

利用React内置工具类型复用状态回调类型 #

对于这种受控组件的count+onCountChange组合，不用手动写Dispatch<SetStateAction<number>>，可以借助React内置的工具类型复用useState的setter类型：

import { useState } from "react";

// 封装通用的SetState类型
type SetState<T> = ReturnType<typeof useState<T>>[1];

export type MyCounterProps = {
  count: number;
  onCountChange: SetState<number>;
};

export function MyCounter({ count, onCountChange }: MyCounterProps) {
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => onCountChange(count + 1)}>Increment</button>
      <button onClick={() => onCountChange(count - 1)}>Decrement</button>
    </>
  );
}

这种写法的好处是不用额外导入Dispatch和SetStateAction，直接复用useState的返回类型，更简洁。

用interface定义Props（可选） #

你当前用的是type，换成interface也完全没问题，React官方没有强制要求，两者的差异主要是：

• type支持联合类型、交叉类型等更灵活的定义场景
• interface支持声明合并，适合需要后续扩展的情况
  比如用interface的写法：

import { Dispatch, SetStateAction } from "react";

export interface MyCounterProps {
  count: number;
  onCountChange: Dispatch<SetStateAction<number>>;
}

export function MyCounter({ count, onCountChange }: MyCounterProps) {
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => onCountChange(count + 1)}>Increment</button>
      <button onClick={() => onCountChange(count - 1)}>Decrement</button>
    </>
  );
}

相关最佳实践 #

• 必做：抽离独立Props类型：不管Props数量多少，都建议把类型单独定义，不要直接写在函数参数里，尤其是结构复杂时，能大幅提升代码可读性和维护性。
• 复用React内置类型：比如Dispatch、SetStateAction、ComponentProps这些官方提供的工具类型，不要自己重复造轮子，保证类型的准确性和一致性。
• 导出Props类型：如果组件会被其他模块引用，一定要把Props类型也导出，方便父组件传参时获得类型提示和校验。
• 语义化命名Props：像onCountChange这种符合React回调命名规范（on[动作/事件名]）的命名，能让其他开发者一眼看懂这个Prop的作用，避免歧义。

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