質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

472閲覧

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

intron0113

総合スコア14

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2023/01/10 09:39

編集2023/01/10 14:36

前提

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は非推奨とのことでしたので、ユニオンで定義したのですが、うまく動作できませんでした。
解決方法もしくは考え方を教えていただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuma.inaura

2023/01/10 10:56

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

2023/01/10 11:12

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

2023/01/10 14:53

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

回答1

0

ベストアンサー

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

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;

投稿2023/01/10 13:39

yuma.inaura

総合スコア1453

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

intron0113

2023/01/10 14:55

質問、ご回答ありがとうございます。 そもそも初期値を定義するという箇所がおかしいという事ですかね。 参考にさせていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問