🖥

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

2023/09/01に公開

コード例

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

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オープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-10

Discussion