随着TypeScript在React生态系统中的使用越来越多，理解这些高级模式可以显著提升代码质量、可扩展性以及开发者的体验。本文将介绍一些在React开发中非常重要的TypeScript模式，并提供实用示例，帮助你更好地利用这些工具。
1. 管理复杂状态的歧视联合体带标签的联合是一种处理具有多种模式的状态的强大方式。通过添加一个“标签”属性，可以确保联合类型的类型安全，并避免因状态无效导致的错误。
例如：加载状态
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>
</>
)}
/>;为什么它很有用
泛型使你的组件更灵活，同时保留类型推断的好处，避免重复编写代码。
3. 映射类型（Mapped Types）：转换为 Props 和 State.映射类型（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 的默认属性
使用 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 的潜力。无论是构建动态表单、可重用组件还是管理复杂状态，这些模式都能帮助您获得更加顺畅和高效的开发体验。
随时随地看视频
