React 官方：在 TypeScript 项目里给组件补上 props 类型

准备工作

• 已有 Vite/CRA 等 TypeScript React 项目，npx tsc -v 或项目内 TypeScript 可用。

• 步骤依据 React 官方文档 Learn → TypeScript，核实日期 2026-10-24。[1]

操作步骤

1、用类型描述 props

做什么：为函数组件参数定义类型，例如：

type HiProps = { name: string };
export function Hi({ name }: HiProps) {
  return <p>Hi, {name}</p>;
}

为什么：官方 TypeScript 页说明应用类型描述 props，以便在传错字段时于编译期发现。[1]

怎么确认：把 <Hi name={1} /> 写成错误类型时，tsc 或 IDE 报错；改回字符串后错误消失。

2、可选 props 与默认值

做什么：type HiProps = { name: string; shout?: boolean }，并在解构里给默认值。

为什么：可选字段用 ?，与运行时默认值配合，避免 undefined 渲染异常。[1]

怎么确认：省略 shout 能编译通过；传入 shout={true} 行为符合分支逻辑。

3、children 类型（如需要）

做什么：需要插槽时在 props 中声明 children: React.ReactNode（或文档推荐的写法）。

为什么：官方文档讨论如何类型化 children，避免把任意类型当子节点。[1]

怎么确认：传入文本/元素正常；传入明显错误类型时类型检查失败。

4、跑一次类型检查

做什么：在项目脚本中执行 npm run typecheck 或 npx tsc --noEmit

为什么：IDE 红线不是唯一门槛，CI 同款命令才能卡住错误提交。[1]

怎么确认：退出码 0；引入故意错误后退出码非 0。

注意事项

• React 类型来自 @types/react / 新 JSX 转换配置，以项目模板为准。

• 不要用 any 消音；那等于关掉本教程的目的。

来源

[1] React Docs · Using TypeScript · https://react.dev/learn/typescript · 核实于 2026-10-24

#React #TypeScript #教程 #props #前端