React开发中你应该知道的TypeScript模式

随着TypeScript在React生态系统中的使用越来越多，理解这些高级模式可以显著提升代码质量、可扩展性以及开发者的体验。本文将介绍一些在React开发中非常重要的TypeScript模式，并提供实用示例，帮助你更好地利用这些工具。

带标签的联合是一种处理具有多种模式的状态的强大方式。通过添加一个“标签”属性，可以确保联合类型的类型安全，并避免因状态无效导致的错误。

例如：加载状态

    type 获取状态 =  
      | { 状态: '空闲' }  
      | { 状态: '加载中' }  
      | { 状态: '成功'; 数据: string[] }  
      | { 状态: '错误'; 错误: string };  

    const 获取数据的处理程序 = (状态: 获取状态, 动作: any): 获取状态 => {  
      switch (动作.类型) {  
        case '开始获取':  
          return { 状态: '加载中' };  
        case '获取成功':  
          return { 状态: '成功', 数据: 动作.负载 };  
        case '获取失败':  
          return { 状态: '错误', 错误: 动作.负载 };  
        default:  
          return 状态;  
      }  
    };

为什么有用：
这种结构使状态转换更清晰，避免了不合理的组合，比如同时出现 data 和 error 的情况。

泛型让你的组件和钩子可以重复使用，同时在保持强类型定义的情况下，这对于处理列表、表单或具有不同数据结构的 API (应用程序接口) 非常有用。

例如：可重用的表格组件

    type TableProps<T> = {  
      data: T[];  
      renderRow: (item: T) => React.ReactNode;  
    };  

    function Table<T>({ data, renderRow }: TableProps<T>) {  
      return (  
        <table>  
          <tbody>{data.map((item, index) => <tr key={index}>{renderRow(item)}</tr>)}</tbody>  
        </table>  
      );  
    }  

    // 示例用法
    // 用户类型定义
    type User = { id: number; name: string };  
    const users: User[] = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];  

    // 下面是一个使用示例
    <Table  
      data={users}  
      renderRow={(user) => (  
        <>  
          <td>{user.id}</td>  
          <td>{user.name}</td>  
        </>  
      )}  
    />;

为什么它很有用

泛型使你的组件更灵活，同时保留类型推断的好处，避免重复编写代码。

映射类型（Mapped Types）允许你从现有类型派生出新的类型。这在定义派生状态或属性接口时特别有用。

示例：部分表单属性示例

    type FormValues = {  
      name: string;  
      email: string;  
      age: number;  
    };  

    type 表单错误<T> = {  
      [K in keyof T]?: string;  
    };  

    const errors: 表单错误<FormValues> = {  
      name: "名字必填",  
      email: "邮箱格式不对",  
    };

为什么它有用：
映射类型（mapped types）非常适合用来管理具有不同属性的表单、API 以及配置对象。

使用 defaultProps 时，你可以利用 TypeScript 的类型支持来确保类型安全。

    type ButtonProps = {  
      label: string;  
      onClick?: () => void;  
    };  

    const Button = ({ label, onClick = () => {} }: ButtonProps) => (  
      <button onClick={onClick}>{label}</button>  
    );

为了使状态保持不可变，使用 Readonly 或 ReadonlyArray 来实现这一点。

    type State = Readonly<{  
      items: string[];  
    }>;  

    const [state, setState] = useState<State>({ items: ['Item 1'] });

为什么这很有用：
强类型的 props 和状态可以减少运行时错误，并让其他开发人员更容易理解你的意图。

动态表单经常会涉及依赖于用户的输入的较为复杂的类型。TypeScript 可以帮助确保这种正确性，即使对于动态结构，TypeScript 也能确保其正确性。

例如：动态字段

    type Field = {  
      id: string;  
      label: string;  
      value: string;  
    };  

    type FormState = {  
      fields : Field[];  
    };  

    // 这是一个动态表单组件  
    const DynamicForm: React.FC = () => {  
      const [formState, setFormState] = useState<FormState>({ fields: [] });  

      const addField = () => {  
        setFormState((prev) => ({  
          fields: [...prev.fields, { id: Date.now().toString(), label: '', value: '' }],  
        }));  
      };  

      return (  
        <div>  
          {formState.fields.map((field) => (  
            <input  
              key={field.id}  
              placeholder="请输入标签"  
              value={field.value}  
              onChange={(e) =>  
                setFormState((prev) => ({  
                  fields: prev.fields.map((f) =>  
                    f.id === field.id ? { ...f, value: e.target.value } : f  
                  ),  
                }))  
              }  
            />  
          ))}  
          <button onClick={addField}>添加新字段</button>  
        </div>  
      );  
    };

为什么它有用：
动态表单在许多应用程序中非常普遍。TypeScript 确保每个字段都被正确类型化并及时更新。

TypeScript 不仅仅是一个静态类型的工具——它是一种编写更健壮、更易维护且可扩展的 React 应用程序的方式。通过掌握诸如区分联合类型、泛型和高级 prop 类型等模式，您可以充分发挥 TypeScript 的潜力。无论是构建动态表单、可重用组件还是管理复杂状态，这些模式都能帮助您获得更加顺畅和高效的开发体验。