React + TypeScript – 複数の型定義 UnionType を UseState / UseEffectで使う

コード例

以下でコメントアウトで示した行のように未定義の文字を扱おうとするとエラーを起こしてくれる

import React, { useState, useEffect } from 'react';

export const UnionType = () => {
  type ValueTypes = 'A' | 'B';

  const [value, setValue] = useState<ValueTypes>();

  const clickA = () => {
    setValue("A")
  }

  const clickB = () => {
    setValue("B")
  }

  // Error
  // const clickC = () => {
  //   setValue("C")
  // }

  useEffect(() => {
    switch (value) {
      case "A":
        console.log("is A")
        break
      case "B":
        console.log("is B")
        break
      // Error
      // case "C":
      //   console.log("is C")

    };
  });


  return (
    <div>
      <button onClick={clickA}>ClickA</button>
      <button onClick={clickB}>ClickB</button>
    </div>
  );

};

export default UnionType;

環境

• react@18.2.0
• next@13.1.1

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter