面试题：React中如何在TypeScript里为useState Hook定义正确类型

Question

在React项目中使用TypeScript，对于useState Hook，假设我们要定义一个用于存储用户姓名的状态，请写出该useState的类型定义以及使用方式。

Answer 1

1. 类型定义：
   • 假设用户姓名是字符串类型，类型定义如下：

   import React, { useState } from'react';
   
   type UserNameState = [string, (newName: string) => void];
   

2. 使用方式：

   const MyComponent: React.FC = () => {
       const [userName, setUserName]: UserNameState = useState('');
   
       const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
           setUserName(event.target.value);
       };
   
       return (
           <div>
               <input type="text" onChange={handleChange} value={userName} />
               <p>当前用户姓名: {userName}</p>
           </div>
       );
   };
   
   export default MyComponent;
   

这里先定义了UserNameState类型来表示useState返回值的类型，然后在组件中使用useState来管理用户姓名状态，并通过输入框的onChange事件来更新姓名。