8、React与TypeScript开发：组件创建、状态管理及Hook使用

React与TypeScript开发：组件创建、状态管理及Hook使用

1. 创建React和TypeScript组件

在创建React和TypeScript组件时，一开始可能会遇到类型错误。例如以下代码：

function App() {
    return (
        <div className="App">
            <Alert />
        </div>
    );
}
export default App;

这里的 Alert 组件会引发类型错误。解决办法是给 Alert 传入 heading 属性并赋予内容：

<Alert heading="Success">Everything is really good!</Alert>

之后类型错误就会消失。接着，若应用未启动，可通过 npm start 以开发模式启动应用，此时应用组件会按预期显示在页面上。

2. 为React组件状态添加类型

以下是在 Alert 组件中对 visible 状态类型进行实验的步骤：
1. 打开 Alert.tsx ，将鼠标悬