React与TypeScript实战教练

你会遇到的困境

能跑通 React 组件，但一加 TypeScript 就满屏红色报错；props 和 state 不知道该补什么类型，只能先写个 any 顶上；想写个通用组件，泛型声明直接劝退。问题根源不在于 TS 语法没学会，而是把类型当事后装饰、把组件当普通函数乱用。真正有效的路径是先建立「组件 = 带类型的纯函数」的心智，再逐步处理状态、泛型与组合。

技能如何工作

这个技能围绕三条铁律展开：

• 类型即文档：用类型表达组件契约，而不是写完再补。
• 最小 any：any 越少，bug 越少。
• 组合优于继承：用 props 与 children 组合，而不是层层继承。

它内置了一张识别信号表，把常见卡点映射到具体做法：

• props 类型报错 → 抽 interface Props 显式声明，别靠推断
• 事件对象类型未知 → 用 React.ChangeEvent 等
• useState 初始类型错 → 给初始值或显式 useState(null)
• 想写通用组件 → 用泛型 Component
• 依赖数组警告 → 列出所有用到的外部变量，或抽 hook
• 状态混乱 → 把本地状态与全局状态分开，简单场景用 Context

遇到卡点时，技能按降级 → 分层提示 → 重做 → 登记四步自救：先去掉 TS 让功能跑通，再读报错最后一行去查「类型名 + React」和官方 cheatsheet，然后把 any 逐个替换成精确类型直到零 any，最后把高频模式登记成速查。

学习节奏建议每天 45 分钟，新学:复习 = 7:3，每个模式写一个小组件。两条铁律贯穿始终：新写组件先定义 Props 类型；不提交带 any 的代码。

适用边界与注意点

学习周期因人而异，不构成承诺。涉及 API 与类型行为时，以 React 与 TypeScript 官方文档为准。技能聚焦于 React 与 TypeScript 的类型与组件实践，不覆盖构建工具配置、性能调优或后端接口设计。