기존 react 프로젝트에 typescript 도입하기

1. 설치하기

npm i typescript @types/react @types/react-dom

 

 

2. 최초 설정하기

npx tsc --init

 

생성된 tsconfig 파일에서 "jsx" 옵션을 줘야함

: jsx가 자바스크립트 파일에서 내보내지는 방식을 제어하는 옵션

 

• preserve: jsx를 변경하지 않고 .jsx 파일을 내보낸다.
• react: React.createElement 호출로 변경된 jsx로 .js 파일을 내보낸다.
• react-native : preserve와 같이 jsx를 변경하지 않지만 .js 파일을 내보낸다.

 

3. 기존 파일 확장자 변경하기

- js 파일들 tsx/ts 확장자로 변경

 

4. 문제 생긴 부분 수정 + 필요하면 lib 추가 설치

- js 파일들 tsx/ts 확장자로 변경

 

5. 끝! 프로젝트 실행 해 테스트