TypeScript
React는 Javacript 라이브러리이다.
Javascript는 동적 프로그래밍 언어라서 런타임 시에 변수의 타입이 결정된다.
그래서 변수 타입때문에 발생하는 버그와 에러는 Javascript를 실행하지 않으면 알 수가 없는데, 이를 해결하고자 Flow라는 정적 타입 분석기를 사용할 수 있다.
하지만 책에서는 정적 타입 분석기로 Microsoft의 TypeScript를 사용하여 타입 체크에만 이용하려고 한다.
TypeScript >= Flow
다음과 같은 이유로 Flow보다 TypeScript를 권장하고 있다.
- TypeScript는 js 전반에 걸쳐 사용할 수 있기 때문이다.
- 많은 js 라이브러리에서 이미 TypeScript의 타입 정의 파일(DefinitelyTyped)을 제공
- 텍스트 에디터에서의 지원이 좋다. Vscode에서 기본적으로 TypeScript를 지원하고 있음
TypeScript를 이용한 리액트 프로젝트 만들기
create-react-app에서 template이라는 옵션을 제공한다.
이 옵션으로 react 프로젝트를 생성하면 TypeScript가 적용된 상태로 프로젝트를 만들 수 있다.
npx create-react-app [프로젝트명] --template=typescript
저번에 react test 코드를 이 프로젝트의 App.test.tsx에 복붙하여 집어넣는다.
28번 라인에 src/App.js -> src/App.tsx로 바꿔주자. 안그러면 테스트 실패가 난다.
터미널에서 npm run test를 입력하여 테스트 결과가 모두 pass 되는지 확인한다.
그리고 최종적으로 npm start를 입력하여 프로젝트를 실행해본다.
만약 이런 에러가 뜬다면 프로젝트 루트 폴더에 tsconfig.json에서 compilerOptions에 strictNullChecks를 false로 설정한다.
마지막으로 npm start를 입력하여 프로젝트를 정상적으로 실행되는지 확인해본다.
Github Repo
토이 프로젝트와 기술들 정리하는 블로그