如果你刚接触 React 和 TypeScript 的组合。可能会有这样的感受：JavaScript 还没写利索，怎么又多了一套类型语法？别急，今天我们从一个非常具体的场景出发——在 React 中管理一个“使用者名”。一步一步把 TypeScript 在 React 项目中的用法搞清楚。

这篇文章的目标读者是：对 React 有基本了解，但对 TypeScript 还很陌生的人。按理说，我们会从最基础的组件类型定义讲起。逐步深入到父子组件的数据流设计。 全程用代码说话，不堆砌概念。

一、从一个简单的 Hello 组件开始

痛点： JavaScript 代码中 props 的属性名和类型完全依赖开发者手动检查。容易导致拼写错误或类型混淆，尤其在团队协作时问题更突出。

方法： 使用 TypeScript 的 interface 定义 Props 的形状和类型约束。怎么说呢，

假设我们要写一个 React 组件。它的任务很简单：接收一个使用者名，接下来显示一句问候语。话说回来，

在纯 JavaScript 中。我们可能会这样写：

const HelloComponent = => {
return 

Hello {props.userName}
};

问题：" 谁也不知道 props 里面到底有什么

如果调用者传错了属性名，比如传了 username 而不是 userName

TypeScript解决的就是这个问题。我们给 props 加上一份“说明书”，明确告诉调用者：这个组件需要一个叫 userName