1. ユニオン型とは？

ユニオン型とは「いくつかの型をまとめたもの」で、どれか一つを選べるという意味です。例えばstring | numberなら文字列か数値のどちらかを受け入れることができます。

ReactのPropsで使うと「このプロパティは文字列か数値のどちらか」というルールを作ることができます。


type BoxProps = {
  size: "small" | "medium" | "large";
};

function Box({ size }: BoxProps) {
  return <div>{size}サイズのボックスです</div>;
}

function App() {
  return (
    <div>
      <Box size="small" />
      <Box size="large" />
    </div>
  );
}

（画面に「smallサイズのボックスです」と「largeサイズのボックスです」が表示されます）

2. リテラル型とは？

リテラル型は「決められた値しか許さない型」です。例えば「red」「blue」「green」のどれかしか渡せないようにできます。

もし間違って「yellow」と書いた場合、TypeScriptがエラーを出して教えてくれます。


type ButtonProps = {
  color: "red" | "blue" | "green";
};

function ColorButton({ color }: ButtonProps) {
  return <button>{color}ボタン</button>;
}

function App() {
  return (
    <div>
      <ColorButton color="red" />
      <ColorButton color="blue" />
    </div>
  );
}

（画面に「redボタン」と「blueボタン」が表示されます）

3. ユニオン型とリテラル型を組み合わせる

ユニオン型とリテラル型を組み合わせると、より柔軟で安全な型定義ができます。例えば「文字列またはnullを許可する」といったケースです。


type MessageProps = {
  text: string | null;
};

function Message({ text }: MessageProps) {
  return <div>{text ? text : "メッセージはありません"}</div>;
}

function App() {
  return (
    <div>
      <Message text="こんにちは" />
      <Message text={null} />
    </div>
  );
}

（画面に「こんにちは」と「メッセージはありません」が表示されます）

4. 実践的な使い方

リテラル型を使うと、Propsに「ボタンの種類」を限定できます。例えば「primary」「secondary」「danger」だけにすることができます。


type ButtonProps = {
  variant: "primary" | "secondary" | "danger";
};

function StyledButton({ variant }: ButtonProps) {
  return <button>{variant}スタイルのボタン</button>;
}

function App() {
  return (
    <div>
      <StyledButton variant="primary" />
      <StyledButton variant="danger" />
    </div>
  );
}

（画面に「primaryスタイルのボタン」と「dangerスタイルのボタン」が表示されます）