Redux에서 Typescript 적용도중 발생한 에러

문제 상황

const rootReducer: Reducer<CombinedState<{
    todoReducer: never;
}>, ActionType>

계속해서 사용하고싶은 todoReducer에서 제공하는 타입이 never가 떠서 todoReducer에서 관리하는 상태들을 아무것도 사용못하는 에러를 겪었다.

그래서 todoReducer의 리듀서 함수 내부에서 데이터를 잘못 설정한게있나, 타입을 잘못건드린게 있나 마우스커서 하나하나 올려가며 찾던도중 액셩생성자함수에서 인자로 받는 타입 값과 설정한 todoReducer의 state type이 다른걸 찾게되었다.

단순히 이 하나의 타입 불일치가 있었을 뿐인데 오류가 난 해당 리듀서에서 제공하는 상태를 아무것도 사용못하는 경험을 했다.

좀더 구체적으로 문제상황을 보면

type StateType = {
  id: string;
  todos: TodoType;
}[];

todoReducer의 state type이다.
id에 string 타입이 온다고 적혀있는데 action생성 함수가 전달하는 payload가 number이라 발생했다.

export const addCardAction = (id: number) => {
  return {
    type: ADD_CARD,
    payload: { id: id },
  };
};

위 코드는 액션 생성자함수이다.

보면 인자로 number을 받지만 StateType의 id는 string으로 받기에 오류가 났다.

-> 타입일치시키니 바로해결됨.(처음엔 오류찾는데 오래걸림.)

느낀점

typescript를 사용하면 조금 귀찮지만 좀더 코드자체를 좀더 안전하게, 예측가능하게 만들어주는 정점이 있다고 또 느꼈다.
귀찮고 또 귀찮지만 typescript에 익숙해지잔 생각이 들었다.