Intro

외부 라이브러리와 TypeScript를 함께 사용하면 몇 가지 불편함을 겪을 수 있습니다. 라이브러리의 타입정의가 미비에 코드에 any타입을 남발할 경우가 발생하거나, 라이브러리를 사용할 때마다 타입을 지정하여 작업의 효율성이 떨어지는 등 문제가 발생할 수 있습니다. 처음 Redux와 TypeScript같이 사용할 때 이러한 문제를 겪어 해결 방안을 기록합니다.

Usage with TypeScript

처음 Redux와 TypeScript같이 사용하는 방법의 핵심은 애플리케이션에서 바로 사용할 수 있도록 미리 타입을 지정하는 방법입니다. 이와 같은 방법으로 useSelector를 사용할 때 state의 타입을 매번 입력할 필요가 없고, useDispatch 또한 자신이 실행할 액션의 타입을 미리 지정하여 매번 액션의 타입을 입력할 필요가 없습니다.

import { configureStore } from '@reduxjs/toolkit'
// ...

export const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer,
    users: usersReducer
  }
})

type AppDispatch = typeof store.dispatch
type RootState = ReturnType<typeof store.getState>

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

위와 같이 미리 타입을 지정한 useAppDispatch useAppSelector와 같은 훅을 만들어 사용하면 효율적으로 Redux와 TypeScript를 같이 사용할 수 있습니다.

📝 후기

타입정의가 미비한 외부 라이브러리를 사용할 때 이와 같은 방법을 사용하여 커스텀 훅으로 만들어서 사용한다면 유용하게 사용할 수 있을 것 같습니다.

🧾 Reference

• https://redux.js.org/usage/usage-with-typescript