実現したいこと
Reduxのstateを簡素に更新したい。
前提
React Redux Typescriptを使ってアプリケーションを作っています。
interfaceで型付けしたstateをkeyとvalueを渡して更新しようとすると、interfaceの中身が全部stringの時はエラーが出ないのに、中身がstringとnumberの混合interfaceだと以下のエラーが出る。
発生している問題・エラーメッセージ
型 'string | number' を型 'never' に割り当てることはできません。 型 'string' を型 'never' に割り当てることはできません。
該当のソースコード
types.ts
1export interface hogehoge { 2 hoge1: hogeA 3 hoge2: hogeB 4} 5 6export interface hogeA { 7 a1: string 8 a2: string 9 a3: string 10 a4: string 11} 12export const initHogeA: hogeA = { 13 a1: "", 14 a2: "", 15 a3: "", 16 a4: "" 17} 18 19export interface hogeB { 20 b1: string 21 b2: string 22 b3: number 23 b4: number 24} 25export const initHogeB: hogeB = { 26 b1: "", 27 b2: "", 28 b3: 0, 29 b4: 0 30}
reducer.ts
1const initialState: hogehoge = { 2 hoge1: initHogeA, 3 hoge2: initHogeB, 4} 5 6export const hogeSlice = createSlice({ 7 name: "hogeState", 8 initialState, 9 reducers: { 10 /** hogeAは中身の型がすべてstringなので、エラーが出ていない? */ 11 hogeHandleA: ( 12 state, 13 action: PayloadAction<{ key: string; value: string }> 14 ) => { 15 state.hoge1[action.payload.key as keyof hogeA] = 16 action.payload.value 17 }, 18 /** 19 * hogeBは中身の型がstringとnumberの混合なので、エラーが出ている?。 20 * 出ているエラー:型 'string | number' を型 'never' に割り当てることはできません。 21 */ 22 hogeHandleB: ( 23 state, 24 action: PayloadAction<{ key: string; value: string | number }> 25 ) => { 26 state.hoge2[action.payload.key as keyof hogeB] = 27 action.payload.value 28 }, 29 }, 30})
試したこと
- valueをnever型にしてみる → エラーは消える。でもnever型って安易に使っていいものなの?という疑問
hogeHandleB: ( state, action: PayloadAction<{ key: string; value: string | number }> ) => { state.hoge2[action.payload.key as keyof hogeB] = action.payload.value as never // as never を追加 },
- valueに動的に型付けする→
型 'name' はインデックスの型として使用できません。
と、変数が型扱いされて取得できない。
hogeHandleB: ( state, action: PayloadAction<{ key: string; value: string | number }> ) => { const name:string = 'hogeA' // 追加 type DetailRowIdType = DetailRow[name] // 追加 state.hoge2[action.payload.key as keyof hogeB] = action.payload.value as DetailRowIdType },
補足情報(FW/ツールのバージョンなど)
使用しているツール
- typescript: 5.1.3
- react: 18.2.0
- redux: 4.2.1
- react-redux: 8.0.7
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。