在 react 中用 typescript 定义 props 应优先使用 interface 显式声明类型，支持继承与合并；推荐直接标注参数类型而非 react.fc，显式声明 children?: react.reactnode，并通过解构赋默认值替代 defaultprops。
在 React 中用 TypeScript 定义 Props，核心是用接口（interface）或类型别名（type）明确声明组件接收的属性结构和类型。这样既能获得编辑器智能提示，也能在编译时捕获传参错误。
用 interface 明确声明 Props 类型
这是最常用、推荐的方式，语义清晰且支持继承与合并。
- 为函数组件定义 Props 接口，然后作为泛型传给
React.FC或直接用于参数解构 - 必需属性不加
?，可选属性加? - 可以包含函数类型、联合类型、自定义类型等
例如：
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
size?: 'small' | 'medium' | 'large';
}
const Button: React.FC<buttonprops> = ({ label, onClick, disabled = false, size = 'medium' }) => (
<font color="#0066cc"><button onclick="{onClick}" disabled classname="{`btn-${size}`}"></button></font>
{label}
<font color="#0066cc"></font>
);</buttonprops>
不使用 React.FC，直接标注参数类型（更灵活）
很多团队倾向省略 React.FC，因为它会隐式添加 children?: ReactNode 和一些不必要约束。直接标注参数类型更精准。
- 函数参数用接口类型注解，返回类型可省略（TS 能自动推导）
- 若组件需要 children，显式在接口中声明
children?: React.ReactNode - 避免
FC带来的默认 props 干扰（如对children的宽松处理）
改写上面的例子：
react-best-practices
下载
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
size?: 'small' | 'medium' | 'large';
children?: React.ReactNode; // 如需嵌套内容才加
}
const Button = ({ label, onClick, disabled = false, size = 'medium' }: ButtonProps) => (
<font color="#0066cc"><button onclick="{onClick}" disabled classname="{`btn-${size}`}"></button></font>
{label}
<font color="#0066cc"></font>
);
处理 children 和复杂嵌套结构
当组件要渲染子元素或接受 JSX 内容时，务必显式声明 children 类型；对于嵌套对象或数组，可用嵌套接口或工具类型简化。
-
children?: React.ReactNode是通用写法，支持字符串、数字、JSX、数组、Fragment 等 - 如果只接受特定类型（比如仅限单个
<icon></icon>），可用children: React.ReactElement - 对深层嵌套数据，可拆分为独立接口，提高复用性和可读性
例如带表单字段的组件：
interface FieldProps {
name: string;
value: string;
onChange: (e: React.ChangeEvent<htmlinputelement>) => void;
children?: React.ReactNode;
}
const Field = ({ name, value, onChange, children }: FieldProps) => (
<font color="#0066cc"><div classname="field">
<font color="#0066cc"><label htmlfor="{name}"></label></font>{children}<font color="#0066cc"></font>
<font color="#0066cc"><input id="{name}" name="{name}" value="{value}" onchange="{onChange}"></font>
<font color="#0066cc"></font>
</div></font>
);</htmlinputelement>
用 defaultProps 配合可选属性（谨慎使用）
TypeScript 本身不依赖 defaultProps 做类型检查，它只看接口定义。所以推荐用解构赋默认值，而非依赖 defaultProps。
- 在解构时设默认值（如
size = 'medium'），TS 会据此推断该字段非 undefined -
defaultProps在函数组件中已不推荐，尤其搭配 TS 时容易引发类型不一致 - 若必须用，需配合非空断言或类型守卫，但增加维护成本
不推荐写法：
// ❌ 容易导致类型和运行时行为不一致
Button.defaultProps = {
size: 'medium',
};
推荐写法已在前面示例中体现：直接在参数解构里赋默认值。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
