Reactのpropsをunion typeにする方法について

2022-11-03

Tech

React

/

TypeScript

Union types of props#

複雑なサービスを作っていると、Union types を 1 つのメソッドで処理したくなることがあるかもしれない。しかし安直に書いてしまうと上手くいかない。このような型定義にライブラリで出会ってしまうと最悪な気持ちになる。

1
export type Props =
2
  | {
3
      text: Item;
4
    }
5
  | {
6
      multilineText: Item;
7
    }
8
  | {
9
      select: Item;
10
    };
11

12
export const SomeComponent = (props: Props) => {
13
  return (
14
    <div>
15
      {props?.text ? (
16
        <div>{props?.text.value}</div>
17
      ) : props?.multilineText ? (
18
        <div>{props?.multilineText.value}</div>
19
      ) : props?.select ? (
20
        <div>{props?.select.value}</div>
21
      ) : null}
22
    </div>
23
  );
24
};

Kind pattern#

各型に共通のプロパティを持たせ、それぞれの値を固有の Literal type などにするパターン。

このプロパティを比較することで、どの型を利用するかの識別が可能になる。

1
export type Props =
2
  | {
3
      kind: "text";
4
      text: Item;
5
    }
6
  | {
7
      kind: "multilineText";
8
      multilineText: Item;
9
    }
10
  | {
11
      kind: "select";
12
      select: Item;
13
    };
14

15
const SomeComponent = (props: Props) => {
16
  return (
17
    <div>
18
      {props?.kind === "text" ? (
19
        <div>{props?.text.value}</div>
20
      ) : props?.kind === "multilineText" ? (
21
        <div>{props?.multilineText.value}</div>
22
      ) : props?.kind === "select" ? (
23
        <div>{props?.select.value}</div>
24
      ) : null}
25
    </div>
26
  );
27
};

Optional never Trick#

次のように、擬似的に全ての型へ同様のプロパティを持たせることで対応できる。

このパターンの場合、レスポンスなどで受け取ったオブジェクトを編集しなくていい場合があるというメリットと、プロパティを列挙しなければならないというデメリットがある。

1
export type Props =
2
  | {
3
      text: Item;
4
      multilineText?: never;
5
      select?: never;
6
    }
7
  | {
8
      text?: never;
9
      multilineText: Item;
10
      select?: never;
11
    }
12
  | {
13
      text?: never;
14
      multilineText?: never;
15
      select: Item;
16
    }
17
  | {
18
      text?: never;
19
      multilineText?: never;
20
      select?: never;
21
    };
22

23
const SomeComponent = (props: Props) => {
24
  return (
25
    <div>
26
      {props?.text ? (
27
        <div>{props?.text.value}</div>
28
      ) : props?.multilineText ? (
29
        <div>{props?.multilineText.value}</div>
30
      ) : props?.select ? (
31
        <div>{props?.select.value}</div>
32
      ) : null}
33
    </div>
34
  );
35
};

次のような Utility type を生やしておけば、デメリットを解消できる。

1
type XOR<
2
  T extends Record<string, unknown>,
3
  U extends string = T extends T ? keyof T : never
4
> = T extends T
5
  ? {
6
      [k in keyof T]: T[k];
7
    } & {
8
      [k in Exclude<U, keyof T>]?: never;
9
    }
10
  : never;
11

12
export type Props = XOR<
13
  | {
14
      text: Item;
15
    }
16
  | {
17
      multilineText: Item;
18
    }
19
  | {
20
      select: Item;
21
    }
22
>;
23

24
export const SomeComponent = (props: Props) => {
25
  return (
26
    <div>
27
      {props?.text ? (
28
        <div>{props?.text.value}</div>
29
      ) : props?.multilineText ? (
30
        <div>{props?.multilineText.value}</div>
31
      ) : props?.select ? (
32
        <div>{props?.select.value}</div>
33
      ) : null}
34
    </div>
35
  );
36
};