react reducer 타입스크립트 질문 드립니다.

Question

안녕하세요. js로 작성된 리듀서를 ts로 변환하는 과정에서 해결이 안돼 질문 드립니다.먼저 코드입니다. interface IChangeFiled { form: string; key: string; value: string;} export const changeField &#61; ({ form, key, value }: IChangeFiled) &#61;> ({ type: CHANGE_FIELD, form, // lgoin인지, register 인지 key, // userId, password... value, // 실제 바꾸려는 값}); type AuthState &#61; { login: { email: string | null; userId: string | null; password: string | null; };}; const initialStete &#61; { login: { email: null, userId: null, password: null, },}; const auth &#61; ( state: AuthState &#61; initialStete, action: AuthAction,): AuthState &#61;> { switch (action.type) { case CHANGE_FIELD: return { ...state, [action.form]: { // ...state[action.form], ...state['login'], [action.key]: action.value, }, }; 코드 설명을 드리자면, changeFiled 액션을 통해 로그인 화면이라면 form &#61; 'login', 회원가입이러면 form &#61; 'register'을 보냅니다.form 과 함께 key와 value를 같이 전달해 입력폼의 이름과 값을 전달합니다. ( key &#61; name, value &#61; value )리듀서에는 다음 입력폼으로 넘어가도 입력폼이 사라지지 않게 ...state[action.form]을 이용해 입력폼을 유지하려고 합니다. 여기서 문제인게 js에서는 가능한 코드인데, ts로 변환하면 'string' 형식의 식을 'AuthState' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. 라는 오류가 발생합니다. AuthState 안에 이미 login 타입이 있는데 어디서 문제가 발생한걸 까요?...state['login']은 에러 없이 작동합니다. 하지만 똑같은 ...state[action.form]은 왜 에러가 생기는걸까요..?

말랑개발자 · Answer

type AuthState &#61; { login: { email: string | null; userId: string | null; password: string | null; };}; 위 코드를 interface Login {email:string|null;userId:string|null;password:string|null;} interface AuthState {login:Login;} 이렇게 바꾸시면 아마 'string' 형식의 식을 'AuthState' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다 에러가 해결될 것입니다 그리고 state[action.form] 에러는 AuthAction이 보이지 않아 알수가 없네요

react reducer 타입스크립트 질문 드립니다.

1개의 답변

#reducer 목록