타입스크립트 2.8로 타이핑을 리듀서까지

이봉
이봉
Mar 27, 2018 · 5 min read

🍀 Strong Typed Redux Action@TS2.8

앞으로 정의하게 될 우리의 리듀서

TypeScript 2.8 은 아직 RC 버전으로 문서 작성 시점에서 사용하기 위해서는 typescript@rc 로 인스톨 해야한다.

블라블라

1인 코딩을 자주 하다보니, 또 프로젝트를 함께 하더라도 대규모 프로젝트는 아니었고 일정과 구현에 치중하다보니 강 타입에 대한 니즈가 아주 강하지는 않았다.

최근들어 개인적으로 진행하던 프로젝트를 친구와 함께 진행하게 되었다. 회사에서는 개인 코드 비중이 높아 니즈가 강하지 않았던 상호 코드 리뷰(버그를 찾는 것은 부가적이고 코드 학습에 더 큰 의미를 둔)와 타입스크립트에 익숙하지 않은 친구와의 협업에 강한 타입에 대한 니즈가 발생했다. (탁구치다가 손가락을 삐어서 코딩인력에서 강제 PM으로 전환된 어제를 기점으로…)

타입스크립트 2.8 그리고 ReturnType

타입스크립트 2.8이 릴리즈를 앞두고 있다. 조건부 타입이 도입 되었고 몇 가지 타입을 더 강하게 조여줄 것들이 추가 되었다. 그 중에 ReturnType 을 통해 리듀서 까지 타입 지원을 받고자 한다.

말보다 빠른 코드 스니펫

ReturnType과 조건부 타입에 의해 주석을 풀면 에러를 뱉어낸다.

주목해서 봐야할 부분은 reducer 에 두번째 인자로 있는 action 의 타입이다

ReturnType 은 함수의 리턴값을 타입으로 갖는다.
action 는 변수이므로 typeof 를 통해 type화 한다.

이렇게 action 타입을 정의하게 되면 if, switch 문에서 타입스크립트 컴파일러는 해당 actiontype 을 기반으로 payload 를 인지하게 되며 코드에서 // error 표시된 부분처럼 자신의 타입에 맞지 않는 payload 는 에러처리하게 된다.

Redux-Thunk(발음이 ㅁ해서 원어로 표기할)

그럼 가장 단순한 미들웨어인 Redux-Thunk 를 적용해보자. 일단 Thunk의 정의는 깃헙 레포에 나와있다.

What’s a thunk?!

A thunk is a function that wraps an expression to delay its evaluation.

❗️그렇다… 발음은 ㅁㅁ지만 설명은 명쾌하다

웹에서의 액션은 대부분이 비동기 동작이기 때문에 대부분의 액션은 Thunk로 짜여지거나 Thunk를 통한다. 말장난 같은 이 말은 철학, 또는 귀차니즘 등의 차이로 이 둘을 모두 액션으로 보느냐 아니냐 정도의 차이가 있겠다.

난 위에 언급한 정의처럼 단지 평가를 미루는 역할로 봤으며 Thunk는 액션을 호출하는 래퍼로 본다|보인다|보았다. 👀

이 글에서는 실제 코드를 기반으로 타입스크립트를 통한 타입만을 확인할 것이므로 실 구현체가 아닌 타입 정의만을 가지고 코딩하면된다.

대충 개인 tmp 디렉토리(혹시 없다면 접근성 편한 홈 디렉토리에 하나 만든다)로 간다.

git clone https://gist.github.com/f0ec5364d18823ff3f17854826a0673b.git TT
cd TT
npm init -y
npm i --save-dev @types/redux-thunk typescript@rc

그럼 TT 디렉토리에 디렉토리명과는 달리 진지한 strong-typed-redux-action.ts 파일이 존재하고 있을 것이고 이는 위에 설명한 그 파일이다.

오버헤드를 줄이기 위해 파일 하나로 설명하겠다.

사용하는 에디터를 통해 strong-typed-redux-action.ts 파일을 연다 우리는 thunk를 추가할 예정이므로 타이핑할 내용은 아래와 같다.

Thunk typing

이 코드 예제에서는 thunks 가 외부로 노출되어 호출될 수 있게, 그리고 actions 는 내부적으로 사용되어 밖으로 내보내지지 않도록 했다.

thunkB 함수를 보면 안에서 getState() 함수를 호출하고 얻은 state 의 타입지원을 볼 수 있다. 이 부분은 redux-thunkThunkAction 를 통해 정의했으며 그 부분이 아래 두 인터페이스다.

state 의 타입 지원을 확인하기 위해 아래쪽에 빈 상태의 State 인터페이스를 확장하자

State

c 는 정의되어 있지 않으므로 thunkB 에서의 c 참조는 에러를 뱉어낸다.

완성된 thunk 액션

마무리

얻고자하는 높은 신뢰성과 테스트 코드의 부담스러움 사이에 흔히 얘기할수 있는 노력대비 얻을 수 있는 효율은 의미가 있다.

이봉

Written by

이봉

Solo developer. https://googit.io/user/ap-northeast-2:c03f8bf0-992e-48a8-93b6-15787a0fc96f

More From Medium

Also tagged Redux

Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade