7 种 TypeScript 模式，打造坚如磐石的 React 组件

原文链接：https://dev.to/sovannaro/7-typescript-patterns-for-bulletproof-react-components-that-your-team-will-love-47g9
作者：sovannaro
译者：倔强青铜三

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

在React开发中，使用TypeScript可以显著提升代码的健壮性和可维护性。以下是7种TypeScript模式，能帮助你打造出团队爱不释手的可靠React组件。

1. 基于接口的Props类型定义

使用接口（interface）来定义React组件的props类型是一种常见且清晰的方式。例如：

// 定义一个按钮组件的props接口
interface ButtonProps {
  text: string;
  onClick: () => void;
  isDisabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ text, onClick, isDisabled = false }) => (
  <button disabled={isDisabled} onClick={onClick}>
    {text}
  </button>
);

这样，在使用Button组件时，TypeScript会强制检查传入的props是否符合ButtonProps接口的定义。

2. 类型别名（Type Alias）用于复杂类型

对于一些复杂的类型，类型别名（type）可以提供更简洁的表达方式。比如，当你需要定义一个包含多种属性类型的对象，并且这些属性可能是联合类型时：

// 定义一个用户信息的类型别名
type UserInfo = {
  name: string;
  age: number;
  email: string | null;
  address: {
    street: string;
    city: string;
  };
};

const user: UserInfo = {
  name: "John Doe",
  age: 30,
  email: "johndoe@example.com",
  address: {
    street: "123 Main St",
    city: "Anytown"
  }
};

在React组件中，你可以使用这种类型别名来定义props或组件内部的状态类型。

3. 泛型组件

泛型（Generics）允许你创建可复用的组件，同时保持类型安全。例如，一个简单的列表渲染组件：

interface ListItem<T> {
  value: T;
  label: string;
}

const List<T> = ({ items }: { items: ListItem<T>[] }) => (
  <ul>
    {items.map(item => (
      <li key={item.value}>{item.label}</li>
    ))}
  </ul>
);

const numberItems: ListItem<number>[] = [
  { value: 1, label: "One" },
  { value: 2, label: "Two" }
];

const stringItems: ListItem<string>[] = [
  { value: "a", label: "Alpha" },
  { value: "b", label: "Beta" }
];

<List items={numberItems} />;
<List items={stringItems} />;

这里的List组件可以接受不同类型的ListItem数组，而TypeScript会确保类型的正确性。

4. 条件类型（Conditional Types）

条件类型允许你根据条件选择不同的类型。在React中，这对于处理不同的渲染逻辑很有用。例如，根据一个布尔值来决定渲染不同的组件：

type RenderIf<T, U> = T extends true? U : never;

interface SuccessProps {
  message: string;
}

interface ErrorProps {
  error: string;
}

const Success: React.FC<SuccessProps> = ({ message }) => (
  <div className="success">{message}</div>
);

const Error: React.FC<ErrorProps> = ({ error }) => (
  <div className="error">{error}</div>
);

const renderComponent = <T extends boolean, U, V>(
  condition: T,
  successComponent: React.FC<U>,
  errorComponent: React.FC<V>
): RenderIf<T, React.FC<U | V>> => {
  return condition? successComponent : errorComponent;
};

const isSuccess = true;
const componentToRender = renderComponent(
  isSuccess,
  Success,
  Error
);

// 这里根据isSuccess的值，componentToRender的类型会是Success或Error组件的类型

5. 交叉类型（Intersection Types）

交叉类型（&）用于将多个类型合并为一个类型。在React中，当一个组件需要同时满足多种类型的属性时，交叉类型非常有用。例如：

interface StyleProps {
  color: string;
  fontSize: string;
}

interface LinkProps {
  href: string;
  target: string;
}

// 定义一个同时具有样式和链接属性的组件
interface StyledLinkProps extends StyleProps, LinkProps {}

const StyledLink: React.FC<StyledLinkProps> = ({ color, fontSize, href, target }) => (
  <a style={{ color, fontSize }} href={href} target={target}>
    Styled Link
  </a>
);

这样，StyledLink组件就同时具备了StyleProps和LinkProps的属性。

6. 索引类型（Index Types）

索引类型允许你通过索引访问对象的属性类型。在React中，当你需要动态访问对象的属性时，索引类型很有帮助。例如：

interface User {
  name: string;
  age: number;
  email: string;
}

// 获取User对象中name属性的类型
type NameType = User["name"];

// 定义一个函数，根据属性名获取用户对象的属性值
const getUserProperty = <T, K extends keyof T>(user: T, key: K): T[K] => {
  return user[key];
};

const user: User = {
  name: "Jane Smith",
  age: 25,
  email: "janesmith@example.com"
};

const name = getUserProperty(user, "name");
const age = getUserProperty(user, "age");

7. 字面量类型（Literal Types）

字面量类型允许你指定具体的值作为类型。在React中，这对于限制props的取值范围很有用。例如：

// 定义一个按钮的颜色类型
type ButtonColor = "primary" | "secondary" | "danger";

interface ButtonProps {
  text: string;
  color: ButtonColor;
}

const Button: React.FC<ButtonProps> = ({ text, color }) => (
  <button className={`button-${color}`}>{text}</button>
);

// 使用按钮组件时，color属性只能是"primary"、"secondary"或"danger"
<Button text="Click me" color="primary" />;

通过使用这些TypeScript模式，你可以打造出更健壮、更易于维护的React组件，让你的团队在开发过程中更加高效和愉快。

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

7 种 TypeScript 模式，打造坚如磐石的 React 组件