TypeScript React props 类型怎么定义
在前端开发里，React 组件就像乐高积木，props 就是积木之间传递的“说明书”——比如你搭一个小人，给它的“头部”积木要说明“这是圆形”“能装眼睛”，不然拼错了就会歪歪扭扭。没给 props 定类型的话，就像说明书没写清规格，传了个方的头部硬塞，组件要么报错，要么显示得乱七八糟。
以前写 React（用 JavaScript 时），props 想传啥就传啥，比如想给一个“商品卡片”组件传价格，传数字 99 没问题，传一串“99元”也能跑，但如果不小心传了个数组 [99]，控制台会先警告，用户那边可能直接显示 [object Array]，查错要翻半天代码。有了 TypeScript 定 props 类型，就能提前拦住这种“乱传”，不用等用户反馈才改。
最基础的：用接口（Interface）定单个组件的 props
就像给“商品卡片”的说明书写个固定格式，所有 props 都要按这个格式来。比如要做一个只显示商品名称和价格的卡片，先写个接口：
`typescript
interface ProductCardProps {
name: string; // 商品名称必须是字符串，不能是数字或数组
price: number; // 价格必须是数字，不能是字符串或布尔值
}
`
然后用 React.FC（Function Component 的缩写）把这个接口套在组件上，这样组件的 props 就被锁死类型了：
`typescript
const ProductCard: React.FC<ProductCardProps> = (props) => {
return <div>{props.name}：¥{props.price}</div>;
};
`
调用这个组件时，传错类型会直接在编辑器里标红——比如写 <ProductCard name="T恤" price="九十九" />，price 传了字符串，鼠标放上去就会提示“需要 number 类型”，不用等到运行才发现问题。
进阶：处理可选 props 和默认值
有些 props 不是必须的，比如商品的“折扣”，不是每个商品都有，这时候在接口里加个 ? 就变成可选类型：
`typescript
interface ProductCardProps {
name: string;
price: number;
discount?: number; // 可选，有就显示，没有就不显示
}
`
如果希望可选 props 不传的时候有默认值，比如 discount 不传就显示 0，别直接写 discount: 0（会把可选变成必填），用解构赋值设默认值就行，同时要给解构的变量加类型：
`typescript
const ProductCard: React.FC<ProductCardProps> = ({ name, price, discount = 0 }) => {
return (
<div>
{name}：¥{price}
{discount > 0 && （折扣：${discount}折）}
</div>
);
};
`
这样调用时，哪怕只传 <ProductCard name="T恤" price="99" />，discount 会自动用 0，不会报错。
特殊场景：传孩子（children）和数组 props
如果组件是用来包内容的，比如做个“卡片容器”，里面可以放任何元素，这时候要给 children 定类型，通常用 React.ReactNode（能识别所有 React 元素，比如文字、按钮、其他组件）：
`typescript
interface CardContainerProps {
children: React.ReactNode;
}
const CardContainer: React.FC<CardContainerProps> = ({ children }) => {
return <div className="card">{children}</div>;
};
`
调用时可以随便包内容： ¥99<CardContainer>，不会因为传了多个元素就报错。如果要传数组类 props，比如商品列表，直接写数组类型就行：T恤
`typescript
interface ProductListProps {
products: Array<{ name: string; price: number }>;
}
const ProductList: React.FC<ProductListProps> = ({ products }) => {
return (
- {p.name}：¥{p.price} )}
{products.map(p =>
);
};
`
这里 products 是“由商品对象组成的数组”，传错结构（比如少了 price）会直接标红，保证列表渲染不会出问题。
给 React 组件的 props 定好类型，就像给乐高积木配了精准的说明书，既能减少代码里的隐藏 bug，又能让团队协作时不用反复确认“这个 props 要传啥类型”，写代码时也能靠编辑器的提示快速补全参数，效率高很多。