TypeScript React 组件类型怎么写
在前端开发里，用React写组件时，要是没给类型做约束，就像给快递员没标收件人信息——万一拿错、写错，后面找问题得费老鼻子劲。TypeScript就是来补这个“信息差”的，给React组件加类型，能提前把很多bug挡在运行前。
先搞懂最基础的：函数组件的props类型
咱们平时写React函数组件，最常用的就是传props（就是组件的“小参数”，比如给按钮传个文字、给列表传个数据）。给props加类型，就像给这个参数设了“身份证”——只能是指定的内容，不然编译器直接报错。
举个生活化的例子：你开了个奶茶店，做“珍珠奶茶”组件，这个组件需要两个参数：糖度（只能是“三分糖”“五分糖”这种选项）、要不要加冰（是布尔值，要么true要么false）。用TypeScript写的话，先给这俩参数定类型：
`typescript
// 先定义props的类型，像给奶茶参数列清单
type MilkTeaProps = {
sugarLevel: "三分糖" | "五分糖" | "七分糖"; // 只能选这三个值
withIce: boolean; // 只能是是或否
};
`
然后把这个类型用到组件上：
`typescript
function MilkTea({ sugarLevel, withIce }: MilkTeaProps) {
return <div>一杯{sugarLevel}、{withIce ? "加冰" : "常温"}的珍珠奶茶</div>;
}
`
这时候要是有人给组件传MilkTea({ sugarLevel: "全糖", withIce: true })，TypeScript直接报红——因为“全糖”不在咱们定的糖度清单里，就像你给奶茶店说要“全糖”，店员也得先确认是不是符合规定。
处理可选props：给组件留“弹性”
不是所有props都必须要，比如有的奶茶可以选加椰果，不选就默认不加。这时候用?标记props是可选的，就像给奶茶加了“可选配料”的选项，选就加，不选就用默认值。
还是用奶茶举例，加个可选的topping（配料），类型可以是字符串，也可以不传：
`typescript
type MilkTeaProps = {
sugarLevel: "三分糖" | "五分糖" | "七分糖";
withIce: boolean;
topping?: string; // 可选，可传可不传
};
function MilkTea({ sugarLevel, withIce, topping = "珍珠" }: MilkTeaProps) {
// 给可选props设默认值，不传就用“珍珠”
return <div>一杯{sugarLevel}、{withIce ? "加冰" : "常温"}的奶茶，配料：{topping}</div>;
}
`
这时候传MilkTea({ sugarLevel: "五分糖", withIce: false })也没问题，topping会自动用“珍珠”，就像你没说要加别的配料，店员默认放珍珠。
类组件的类型怎么写？
要是你还在写React类组件（虽然现在函数组件更常用，但老项目可能还有），类型写法稍微不一样，得用React.Component带泛型的写法。
比如做个“用户卡片”类组件，需要传用户的名字和年龄，类型定义：
`typescript
import React from "react";
// 类组件的props类型，用泛型传给Component
type UserCardProps = {
name: string;
age: number;
};
class UserCard extends React.Component<UserCardProps> {
render() {
return <div>用户：{this.props.name}，年龄：{this.props.age}</div>;
}
}
`
这里要注意，类组件的props是固定在this.props上的，不能像函数组件那样解构时设默认值，得在组件里处理，就像你给类组件的参数定好后，组件内部直接用就行。
特殊情况：子元素的类型
要是组件需要嵌套内容，比如你写个“卡片容器”组件，里面可以放任何内容——文字、图片、别的组件，这时候用React.ReactNode类型，就像容器是个收纳盒，能装任何东西。
`typescript
type CardProps = {
children: React.ReactNode; // 可以是任何React能渲染的内容
};
function Card({ children }: CardProps) {
return <div className="card">{children}</div>;
}
// 用的时候可以放任何内容
function App() {
return (
<Card>
我的卡片
这是卡片里的文字
</Card>
);
}
`
就像你买的收纳盒，既能装笔记本，也能装照片，React.ReactNode就是这个“通用收纳类型”。
给React组件加类型，核心就是把props的规则提前写清楚，就像给工具贴了标签，用的时候不会拿错。从基础的props类型，到可选值、子元素，都是围绕“约束输入”这个核心，既能减少运行时的错误，也能让团队里的人一眼看懂组件需要什么。