React에서 Typescript 사용하기

시작

npx create-react-app [원하는 이름] --template typescript

직접 tsconfig.json 등을 만들어 가며 바닥부터 만들 수도 있지만 빠른 시작을 위해 위와 같은 툴체인을 사용하자.

--typescript 옵션을 주고 create-react-app을 하면 js와 jsx가 아니라 ts와 tsx가 생성된다.

뿐만 아니라 package.json에도 새로운 게 추가되었고 tsconfig.json이라는 파일도 생성 되었다. tsconfig.json의 설정을 통해 특정 규칙을 끄고 켤 수도 있고 얼마나 strict할 지 결정할 수도 있기 때문에 TS를 잘 쓰려면 tsconfig.json을 잘 다룰줄 알아야 한다.

패키지 설치 (@types)

js 환경에서 하듯 설치하면 작동하지 않는다. 컴파일 되지 않았기 때문이다. js 환경에서 자주 활용하는 패키지들을 ts환경으로 컴파일 한 definitelytyped의 도움을 받아 다음과 같이 설치해보자.

npm i styled-components // TS 환경에서 작동 안 함 npm i @types/styled-components // 작동함

사용하고자 하는 라이브러리에 @types/를 붙여 설치하는게 포인트다. package.json을 확인해보면 이미 기본 구동에 필요한 기본 라이브러리들은 @types로 설치된 것들이 보인다. @types/react @types/react-dom 등 등. 사용할 때는 일반 js에서 사용하는 것처럼 사용하면 된다.

그런데 만약 내가 사용하는 라이브러리의 @types 버전이 없다면? 어쩔 수 없다. 임시방편으로 tsconfig에 "noImplicitAny": true를 추가해주자. 타입이 any인 것을 용인한다는 의미이다. 어디까지 임시방편이라서 해결책이 될 수는 없다.

from http://darrengwon.tistory.com/165 by ccl(A) rewrite - 2020-03-18 02:54:12