React 앱 타입스크립트로 마이그레이션

1. 타입스크립트 마이그레이션을 위한 라이브러리 설치
2. tsconfig.json 설정
3. 사용하는 라이브러리들 중 @types 패키지 추가
4. webpack설정 변경
5. .jsx -> .tsx로 확장자 변환

타입스크립트 마이그레이션을 위한 라이브러리 설치

npm i -D typescript esbuild-loader @types/react @types/react-dom

• typescript: tsc컴파일러, typescript 문법 지원을 위해 필요한 라이브러리
• @types/react: react라이브러리를 위한 타입 패키지
• @types/react-dom: react에서 dom element와 관련된 타입들을 모아놓은 패키지
• esbuild-loader: 타입스크립트 트랜스파일링을 위한 패키지(babel보다 속도가 빠름!)

tsconfig.json 설정

tsconfig.json 파일 생성
tsc --init : 기본적인 컴파일러 옵션들이 설정되어 만들어짐✨
또는
npx tsc --init

tsconfig.json 파일 설정

• target: 어떤 버전으로 컴파일 할것인지! (만약, 익스플로러를 지원할 경우 es5 타깃)
• sourceMap: 디버깅을 위한 소스 맵 추가
• outDir: 컴파일된 결과가 위치할 경로
• jsx: jsx파일을 js 파일로 변환하도록 하는 설정(react로 설정하면 js로 설정되어 나옴)
• module: module코드를 es6방식 or commonJS로 사용할 것인지 설정

사용하는 라이브러리들 중 @types 패키지 추가

npm i -D @types/<library name>
git repo에 index.d.ts가 있는 라이브러리라면 따로 설치하지 않아도 됨‼️

webpack 설정 변경

• entry: 앱을 시작할 파일
• output: 웹팩 번들링 결과에 대한 옵션. 기본 경로는 dist
• resolve: 번들링할 확장자 설정
• module: 번들링할 때 플러그인 설정 가능
• esbuild-loader: 타입스크립트 변환을 위한 로더
• css-loader: .css확장자의 css파일을 읽기 위한 로더
• style-loader: style 태그를 삽입해 dom에 css추가
• externals: 번들링 결과에서 제외할 라이브러리들

.jsx -> .tsx로 확장자 변환

이 과정의 타입에러들을 해결해 주어야 함!

타입스크립트 프로젝트로 시작하기

npx create-react-app <프로젝트 이름> -template typescript
typescript가 적용된 react프로젝트 바로 시작 가능