TypeScriptでEnumを使う

どんな場面で使えばいいのか？

私も他の言語と似た感覚で使ってしまったのですが、switch文の分離処理で使いました。Swift, Dartではよく使いますね。

カウンターのプラス、マイナス、リセットを定義する目的で使いました。

// ActionType の enum 定義
enum ActionType {
  INCREMENT = 'INCREMENT',
  DECREMENT = 'DECREMENT',
  RESET = 'RESET'
}

useReducerでカウンターを使うだけですが、良い練習にはなりました。

import React, { useReducer } from 'react';

// State の型定義
interface State {
  count: number;
}

// ActionType の enum 定義
enum ActionType {
  INCREMENT = 'INCREMENT',
  DECREMENT = 'DECREMENT',
  RESET = 'RESET'
}

// Action の型定義
interface Action {
  type: ActionType;
}

// 現在の state と action を受け取り、action に応じて更新した state を返す関数
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case ActionType.INCREMENT:
      return { count: state.count + 1 };
    case ActionType.DECREMENT:
      return { count: state.count - 1 };
    case ActionType.RESET:
      return { count: 0 };
    default:
      return state;
  }
}

const CounterReducer: React.FC = () => {
  // useReducer の第２引数に { count: 0 } を渡しているので、
  // state の初期値は { count: 0 }
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>count: {state.count}</p>

      {/* { type: ActionType.DECREMENT } という action を送信する */}
      <button onClick={() => dispatch({ type: ActionType.DECREMENT })}>-</button>

      {/* { type: ActionType.INCREMENT } という action を送信する */}
      <button onClick={() => dispatch({ type: ActionType.INCREMENT })}>+</button>

      {/* { type: ActionType.RESET } という action を送信する */}
      <button onClick={() => dispatch({ type: ActionType.RESET })}>Reset</button>
    </div>
  );
}

export default CounterReducer;

useReducerについて説明すると、stateとdispatch(actionを送信する関数)を返すフックです。使い方としては、コンポーネント内で、state管理ができます。useStateと似た機能を持っています。

App.tsxでimportすれば完成です。いい感じのカウンターできました。

import CounterReducer from "./useReducer/counterReducer"

function App() {

  return (
    <>
      <CounterReducer />
    </>
  )
}

export default App

最後に

TypeScriptで、Enumを使うときは、分岐処理で使うイメージかなと思いました。カウンターで物足りなかったですが、良い練習になりました。