[헬스 다이어리 앱 개발] 10편 - TypeScript 적용하기

동적 타입 언어인 javascript를 보완하는 정적 타입 언어 typescript를 적용해보자.

 

 

 

 

Why TypeScript

 

동적 타입 언어는 타입을 따로 지정하지 않아서 편리해 보이기도 한다.

하지만 프로젝트가 커질수록 동적 타입 언어는 런타임에서 오류가 날 가능성이 많아진다.

 

 

그리고 이런 자바스크립트의 타입에 대한 유연성, 허술한 점을 보여주는 예시가 하나 있다.

banana?

세번째 문자 'a'에 숫자 자료형에 사용되는 +단항 연산자가 붙어 NaN(not a number)이 반환되었고,

이 NaN이 그대로 합쳐져 banana가 된 것이다.

사실 banana를 의도해서 이렇게 만들 수도 있겠지만, 대부분의 경우 이런 결과들은 예상하지 못한 것들이고 어떤 에러를 더 초래할지 에측하고 준비하기 힘들다.

 

 

그래서 타입 때문에 발생하는 에러들을 미리 잡기 위해 타입스크립트가 사용되고 현재 많은 기업들이 자바스크립트 대신 타입스크립트를 사용하는 추세다.

 

 

적용은 공식문서를 참고했다.

Using TypeScript · React Native

JavaScript With Syntax For Types.

 

 

expo로 프로젝트를 만들어서 typescript가 이미 설치되어 있었고,

tsconfig.json을 보니 "expo/tsconfig.base"라고 expo에서 미리 만들어둔 설정이 있어서 따로 설정을 건드리지는 않았다.

 

 

 

 

TypeScript 적용

 

이제 만들었던 javascript 파일들을 typescript로 바꿔보자.

참고로 ts를 적용할 때 JSX를 사용하는 컴포넌트의 파일 확장자는 tsx여야 한다.

 

 

redux-toolkit의 slice 파일이다.

action의 type을 깡통 PayloadAction으로 하니 경고가 많이 생겼다.

현재 PayloadAction은 비어있는데 yearMonth, diary 등의 속성을 접근했기 때문이다.

 

 

필요한 속성들의 타입을 정의한 PayloadActionProps interface를 정의하고, PayloadAction의 제네릭으로 사용해서 해결했다.

이제 typescript는 payload에 해당하는 속성이 존재함을 확인할 수 있고 에러도 뜨지 않았다.

 

 

 

 

AsyncStorage 모듈 ts 적용 전 / 후

AsyncStorage에 접근하는 모듈도 ts로 바꿨다.

이런식으로 다른 js파일들도 ts로 바꿔주면 된다.