Typed Props Props 类型约束
最后更新：2026-10-28
Typed Props Props 类型约束
TypeScript 下用 interface/type 给 props 建类型契约：编译期就抓出「传错名、漏传、类型不符」，编辑器还有自动补全。定义一个类型形状标在组件参数上即可，运行时零成本。
| 分组 | 数据与工程化 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
type User = { id: number; name: string; vip?: boolean } // ? 可选属性
type UserCardProps = {
user: User
onSelect: (id: number) => void // 回调：参数与返回值都要标
children?: React.ReactNode // 任意可渲染内容
}
function UserCard({ user, onSelect }: UserCardProps) {
return <li onClick={() => onSelect(user.id)}>{user.name}</li>
}
// ❌ 编译期报错：<UserCard user={{ id: 'x' }} /> id 应为 number返回值：无返回值，作为编码模式使用
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
表格展示 UserCard 的 props 类型契约；点用户按钮触发 onSelect 回调显示 id——真实 TS 项目里传错类型会在编译期直接报错（运行时 JSX 演示）。💡 要点
💡 提示 从组件反推 props 类型用 React.ComponentProps<typeof UserCard>，避免手动维护两份定义。
ℹ️ 说明 children 用 React.ReactNode 最通用（元素、字符串、数组都收）；只要元素用 React.ReactElement。
⚠️ 注意 any 等于关掉检查；不确定形状时用 unknown 再收窄，或用 Partial/Pick 等工具类型逐步细化。
🏷️ 数据与工程化相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q type 和 interface 定义 props 用哪个？
A 都行。interface 可被声明合并、报错更友好；type 能表达联合类型与工具类型组合。团队统一即可。
Q 可选属性和默认值怎么配合？
A vip?: boolean 允许不传；解构参数给默认值 function X({ vip = false }: Props)，两者语义对齐。
Q TS 能做运行时校验吗？
A 不能，TS 只在编译期。接口数据要运行时校验用 zod：z.object({...}).parse(data) 校验并推导类型。
