面试题：TypeScript交叉类型在状态管理中如何与React结合使用

Question

假设你正在使用React进行前端开发，同时利用TypeScript的交叉类型进行状态管理。请描述一下如何定义一个包含用户基本信息（如姓名、年龄）和用户权限（如是否是管理员）的状态类型，并在React组件中使用该交叉类型来管理和更新状态。

Answer 1

1. 定义交叉类型：

   // 定义用户基本信息类型
   type UserBasicInfo = {
     name: string;
     age: number;
   };
   // 定义用户权限类型
   type UserPermissions = {
     isAdmin: boolean;
   };
   // 使用交叉类型合并两个类型
   type UserState = UserBasicInfo & UserPermissions;
   

2. 在React组件中使用：

   import React, { useState } from'react';
   
   const UserComponent: React.FC = () => {
     const [user, setUser] = useState<UserState>({
       name: 'defaultName',
       age: 0,
       isAdmin: false
     });
   
     const handleNameChange = (newName: string) => {
       setUser(prevUser => ({...prevUser, name: newName }));
     };
   
     const handleAgeChange = (newAge: number) => {
       setUser(prevUser => ({...prevUser, age: newAge }));
     };
   
     const handleAdminStatusChange = (isAdmin: boolean) => {
       setUser(prevUser => ({...prevUser, isAdmin }));
     };
   
     return (
       <div>
         <input
           type="text"
           placeholder="Name"
           value={user.name}
           onChange={(e) => handleNameChange(e.target.value)}
         />
         <input
           type="number"
           placeholder="Age"
           value={user.age}
           onChange={(e) => handleAgeChange(Number(e.target.value))}
         />
         <input
           type="checkbox"
           checked={user.isAdmin}
           onChange={(e) => handleAdminStatusChange(e.target.checked)}
         /> Is Admin
       </div>
     );
   };
   
   export default UserComponent;
   

上述代码中，首先通过type关键字定义了UserBasicInfo和UserPermissions两种类型，然后使用交叉类型&将它们合并为UserState。在React函数式组件UserComponent中，使用useState钩子来管理和更新UserState类型的状态，并通过事件处理函数来更新状态的不同属性。