コード例

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

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