ユニオン型で定義した型をuseEffectに渡して、型管理を行いたい

前提

react+TypeScriptを学習しています。
union型で定義したのですが、うまく渡すことができずに詰まっています。

実現したいこと

union型で定義したtypesを用いて型管理を行いたい

発生している問題・エラーメッセージ

myPageSettingsの初期値に正しく型定義を反映できておらず、ユニオン型で定義した文字列以外も初期値に入力できてしまう。

該当のソースコード

型定義

ts
1//SelectType.ts
2
3export type SelectType = 'A' | 'B' | 'def';
4

state管理

tsx
1//useGlobalState.tsx
2
3import {
4  SetStateAction,
5  createContext,
6  useContext,
7  useEffect,
8  useState,
9} from 'react';
10import { SelectType } from '@/types/SelectType';
11
12export const GlobalContext = createContext({
13  selectType: 'hide' as SelectType,
14  setSelectType: (selectType: SetStateAction<SelectType>) => {
15    // dummy
16  },
17});
18
19export const GlobalContextProvider = ({
20  children,
21}: {
22  children: JSX.Element | JSX.Element[];
23}) => {
24  const context = useContext(GlobalContext);
25
26    const [selectType, setSelectType] = useState<SelectType>(
27      context.selectType
28    );
29
30   const value = {
31    selectType,
32    setSelectType,
33    };
34   return (
35    <GlobalContext.Provider value={value}>{children}</GlobalContext.Provider>
36  );
37};

該当ファイル

tsx
1//myPageSettings.tsx
2
3import router from 'next/router';
4import { useEffect } from 'react';
5
6import { useGlobalState } from '@/useGlobalState';
7
8import { SelectType } from '@/types/SelectType';
9import { AppType } from '@/types/AppType';
10
11
12
13export const myPageSettings = ({
14  appType = AppType.Other as AppType,
15 //   初期値と型定義を行う　該当箇所
16  selectType = 'def' as SelectType,
17}) => {
18
19 const {
20    userInfo,
21    setSelectType
22  } = useGlobalState();
23
24useEffect(() => {
25    if (isAvailable(appType)) {
26      switch (userInfo.userType) {:
27        case "master":
28          setSelectType(selectType);
29          break;
30        default:
31          setSelectType('def');
32      }
33    }
34  }, []);
35};
36

試したこと

ユニオン型でなく、enum 型での定義は行えました。enumは非推奨とのことでしたので、ユニオンで定義したのですが、うまく動作できませんでした。
解決方法もしくは考え方を教えていただけると幸いです。

yuma.inaura

2023/01/10 10:56

そのまますぐ再現できるコードで載せていただけるとありがたいです

maisumakun

2023/01/10 11:12

該当箇所2ではどういう問題が起きたのですか？

intron0113

2023/01/10 14:53

該当箇所2の方は問題が発生していなかったので修正させていただきました。

行動規範の内容に同意します

回答1件

ベストアンサー

自分が知らないだけかもしれないんですが、その文法で初期値とか定義できるんでしたっけ
書くならこんな感じになるのかなと

tsx
1import React, { useState, useEffect } from 'react';
2
3export const UnionType = () => {
4  type ValueTypes = 'A' | 'B';
5
6  const [value, setValue] = useState<ValueTypes>();
7
8  const clickA = () => {
9    setValue("A")
10  }
11
12  const clickB = () => {
13    setValue("B")
14  }
15
16  // Error
17  // const clickC = () => {
18  //   setValue("C")
19  // }
20
21  useEffect(() => {
22    switch (value) {
23      case "A":
24        console.log("is A")
25        break
26      case "B":
27        console.log("is B")
28        break
29      // Error
30      // case "C":
31      //   console.log("is C")
32
33    };
34  });
35
36
37  return (
38    <div>
39      <button onClick={clickA}>ClickA</button>
40      <button onClick={clickB}>ClickB</button>
41    </div>
42  );
43
44};
45
46export default UnionType;