TypeScript로 바꿔보자3

Loa-Hands

  • 이전에 만들었던 앱을 타입스크립트로 바꿔보려한다.
  • reducer부분의 수정과, Header부분을 손봐보았다.

Reducer

  • RootState에는 HomeDataUserData가 해당 class를 타입으로 갖고있는데, 이전에 지정해주었던 IInitalStatenull의 타입만을 허용하고 있었다. 따라서, useSelector로 해당 state를 확인했을 때, IInitalStateRootState의 유니온타입들중 유일하게 겹쳐서 유효한 속성은 isLoading뿐이라, homeData의 값을 설정할 수 없었다.
  • 또한, 이후 하위컴포넌트에 속성으로 homeData를 보내고자 할 때, 유니온타입이 아닌 homeData타입을 갖고 갈 수 있도록, 재지정해주었다.
    5

    변경

    1

HeaderContainer

  • 기존 function으로 시작하는 컴포넌트에서, React.FC의 타입을 갖는 함수로 다시 만들어주었다.
  • useSelector에서 받아오는 state의 타입은 이전에 생성했던 RootState를 연결해준다.
  • react-redux공문을 보니, dispatchuseDispatch를 통한 결과값이므로 별도의 타입을 지정해줄 필요가 없다하여 모두 지웠다.
    2
  • 기존 function으로 시작하는 컴포넌트에서, React.FC의 타입을 갖는 함수로 다시 만들어주었다.
  • 받아오는 속성들의 interface를 미리 구현해주었다.
  • 실행되는 dispatcher들은 실행될 때, 제너릭으로 해당 타입을 interface로 보내주도록 했다.

    처음에는 해당 메소드가 실행될 때, 해당 메소드가 생성되는 상위의 HeaderContainer에 제너릭으로 작성해야된다 생각했는데, 아니였다.

    3

@SangMin
👆 H'e'story

🚀GitHub