js로된 React 코드를 ts로 마이그레이션 하면서 느낀점

우아한 테크코스 미션을 진행하면서 react를 아래와 같이 js로만 작성했었는데,

https://github.com/woowacourse/react-shopping-cart/pull/4

 

레벨2가 끝나기전 typescript를 적용해보고자, 개인적으로 ts로 마이그레이션했다.

https://github.com/zereight/ts-react-shopping-cart

 

아직 테스트코드는 마이그레이션하지 않았고, interface 등 중복 코드들도 리팩토링하지 않은 상태에다가, 디렉토리 구조도 쪼금 변경한 상태이지만 기능은 정상적으로 동작하는 선에서 모두 변환을 하였으므로 ㅎ 느낀점을 정리한다.

 

1. FC, VFC 

다른 크루들의 코드를 보니까 컴포넌트의 타입을 React.FC, React.VFC를 많이 사용하는 것 같았다.

근데 공식문서를 보니까 쓰지말라한다.

이유를 몇가지 찾아보긴 했는데 내가 공감할 수 있는 이유는 아니었다.

일단 권장하지 않는 분위기라 사용하지 않았다.

 

2. type, interface

타입과 인터페이스 차이를 알아야했다.

union등의 연산을 할 때 빼고는 interface를 사용해라고 가이드되어있어서 모두 interface로 구현했다.

이유는 추후 정리해볼 예정

 

3. interface 선언 위치

사용하는 파일에 선언하는가. 아니면 어디선가 상수처럼 관리하는가.. 고민이었다.

지금은 사용하는 코드 상단에 선언해두었다. (중복되더라도)

너무 중복되는 interface는 type.d.ts에 따로 뺴두었다.

 

4. 모든 변수, 함수 인자, 리턴값에 타입을 정의해야하는가?

어떤거에는 인자에 타입을 선언안하면 에러를 내기도 하고 어떤 거에는 안내고..

리턴값에 타입을 선언하는 경우도 있고 아닌 경우도 있고.. 내 코드만 그런가? 부분적으로 적용되는 느낌이 드니까 이게 맞나 생각이 든다.

내가 설정을 잘못한건가..?

 

5. never, undefined, null 타입

워우... 한번 정리가 필요하다.

 

6. eslint defaultProp 버그

name?: string; 와 같이 해당 값이 필수가 아님을 표현할때에는 default 값을 어딘가 선언해두어야 한다.

파라미터에 바로 대입해도 좋고, Button.defaultProps에 선언해도 좋다.

그런데 타입스크립트에서는 파라미터에 바로 대입하는 경우 eslint가 default 값을 선언하라고 자꾸 오류를 낸다.

이것 때문에 시간을 정말 많이 썼는데. 그냥 타입스크립트 버전떄문에 생긴 버그였던것 같다. disable 처리했다.

 

7. 내가 모르는 타입

내가 모르는 타입은 ReturnType<> 을 사용해서 정의해주거나

event 타입처럼 검색, 또는 코드에 마우스 커서를 hover하여 알아내야한다.

자주 사용하는 복잡한 타입을 어딘가 선언해두는 작업이 필요한 것 같다.