스터디스터디
98
2021-07-04 20:45:14
1
131

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


안녕하세요. js로 작성된 리듀서를 ts로 변환하는 과정에서 해결이 안돼 질문 드립니다.

먼저 코드입니다.


interface IChangeFiled {
  formstring;
  keystring;
  valuestring;
}

export const changeField = ({ formkeyvalue }: IChangeFiled=> ({
  type: CHANGE_FIELD,
  form// lgoin인지, register 인지
  key// userId, password...
  value// 실제 바꾸려는 값
});

type AuthState = {
  login: {
    emailstring | null;
    userIdstring | null;
    passwordstring | null;
  };
};

const initialStete = {
  login: {
    email: null,
    userId: null,
    password: null,
  },
};

const auth = (
  stateAuthState = initialStete,
  actionAuthAction,
): AuthState => {
  switch (action.type) {
    case CHANGE_FIELD:
      return {
        ...state,
        [action.form]: {
          // ...state[action.form],
          ...state['login'],
          [action.key]: action.value,
        },
      };


코드 설명을 드리자면, 

changeFiled 액션을 통해 로그인 화면이라면 form = 'login', 회원가입이러면 form = 'register'을 보냅니다.

form 과 함께 key와 value를 같이 전달해 입력폼의 이름과 값을 전달합니다. ( key = name, value = value )

리듀서에는 다음 입력폼으로 넘어가도 입력폼이 사라지지 않게 ...state[action.form]을 이용해 입력폼을 유지하려고 합니다. 여기서 문제인게 js에서는 가능한 코드인데, ts로 변환하면 

'string' 형식의 식을 'AuthState' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.

라는 오류가 발생합니다. AuthState 안에 이미 login 타입이 있는데 어디서 문제가 발생한걸 까요?

...state['login']은 에러 없이 작동합니다. 하지만 똑같은 ...state[action.form]은 왜 에러가 생기는걸까요..?

0
  • 답변 1

  • 말랑개발자
    61
    2021-07-09 16:19:30
    type AuthState = {
      login: {
        emailstring | null;
        userIdstring | null;
        passwordstring | null;
      };
    };

    위 코드를

    interface Login {
    email:string|null;
    userId:string|null;
    password:string|null;
    }

    interface AuthState {
    login:Login;
    }

    이렇게 바꾸시면 아마 'string' 형식의 식을 'AuthState' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다 에러가 해결될 것입니다 그리고 state[action.form] 에러는 AuthAction이 보이지 않아 알수가 없네요

  • 로그인을 하시면 답변을 등록할 수 있습니다.