React 与 TS 结合使用时的技巧总结

使用 TS 泛型来定义通用参数

有些时候会遇到有些业务页面结构是通用的，只是传入页面组件的参数略有不同，这样我们可以使用 TS 的泛型来定义通用参数。具体的实例如下：

type GenericPropsData<T> = {
  items: T[];
  onClick: (value: T) => void;
};

const GenericProps: React.FC<GenericPropsData<number | string>> = ({
  items,
  onClick,
}) => {
  return (
    <div>
      <h2>TS 泛型定义参数</h2>
      {items.map((item) => {
        return (
          <div key={item} onClick={() => onClick(item)}>
            {item}
          </div>
        );
      })}
    </div>
  );
};

export default GenericProps;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

上述例子中，只是简单列举了泛型为数字或者字符串，泛型还可以定位为其他对象。

使用 TS 限定传入的参数

有些业务场景要求根据在一定条件下传入对应参数，组件中的其他参数为不能传递的情况，或者出现类型的情况时，我们可以考虑使用 TS 的never和联合类型来声明定义参数的组件。具体实例如下：

type RandomNumberType = {
  value: number;
};

type PositiveNumber = RandomNumberType & {
  isPositive: boolean;
  isNegative?: never;
  isZero?: never;
};

type NegativeNumber = RandomNumberType & {
  isNegative: boolean;
  isPositive?: never;
  isZero?: never;
};

type Zero = RandomNumberType & {
  isZero: boolean;
  isPositive?: never;
  isNegative?: never;
};

type RandomNumberProps = PositiveNumber | NegativeNumber | Zero;

const RestrictionProps: React.FC<RandomNumberProps> = ({
  value,
  isPositive,
  isNegative,
  isZero,
}) => {
  return (
    <div>
      {value} {isPositive && "整数"} {isNegative && "负数"} {isZero && "0"}
    </div>
  );
};

export default RestrictionProps;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

使用 TS 的 Exclude 去除某些联合类型

我们可以使用 TS 中的 Exclude 来去除某些联合类型的参数，例如下面实例：

type HorizontalPosition = "left" | "center" | "right";
type VerticalPosition = "top" | "center" | "bottom";

/**
 * 组件传入的参数可以有如下这些
 * "left-center" | "left-top" | "left-bottom" | "center" | "center-top" |
 * "center-bottom" | "right-center" | "right-top" | "right-bottom"
 *
 * 我们通过Exclude抛掉了center-center的值
 */
type ToastProps = {
  position:
    | Exclude<`${HorizontalPosition}-${VerticalPosition}`, "center-center">
    | "center";
};

const ExcludeProps: React.FC<ToastProps> = ({ position }) => {
  return <div>Toast Notification Position - {position}</div>;
};

export default ExcludeProps;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

使用 TS 实现多态组件

type TextOwnProps<E extends React.ElementType> = {
  size?: "sm" | "md" | "lg";
  color?: "primary" | "secondary";
  children: React.ReactNode;
  as?: E;
};

type TextProps<E extends React.ElementType> = TextOwnProps<E> &
  Omit<React.ComponentProps<E>, keyof TextOwnProps<E>>;

const PolymorphismProps: React.FC<TextProps<React.ElementType>> = ({
  size,
  color,
  children,
  as,
}) => {
  const Component = as || "div";
  return (
    <Component className={`class-with-${size}-${color}`}>{children}</Component>
  );
};

export default PolymorphismProps;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23