[TypeScript] create-react-app에 TypeScript 설치하기

1. 'create-react-app'에 TypeScript 설치하기

npx create-react-app my-app

 

위의 명령어는 React App을 만들 때 사용하는 명령어이다.

여기서 아래와 같이 '--template typescript' 추가하면 TypeScript를 같이 설치할 수 있다.

npx create-react-app my-app --template typescript

---

설치가 완료되면, 기존에 'create-react-app'으로 생성된 React App 초기 파일에서

TypeScript와 관련된 파일이 추가 혹은 변경된 것을 확인할 수 있다.(CRA 기본 프로젝트와 관련된 파일들을 개별적으로 정리한 뒤에 캡쳐한 것이다.)

기존 create-react-app 입력 시 생성되는 결과물 / cra에 typescript 설치했을 때의 결과물

---

앞에서 다룬 명령어는 React App을 처음부터 생성하는 명령어이다.

즉, 기존 React App에 TypeScript를 설치하고 싶을 경우라면 적절하지 않은 방식이라는 것이다.

 

다행히도 기존 React Project에서 TypeScript를 설치하려고자 할 때 쓸 수 있는 명령어도 존재한다.

(단순 TypeScript만이 아니라 다른 연관된 파일도 모두 포함한다.)

 

아래 명령어를 입력해서 기존 React Project에 TypeScript를 설치해보자.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

기존 프로젝트에 TypeScript 설치를 완료했다면

아래 명령어를 입력해서 TypeScript Configuration 파일을 생성해주자.

tsc --init

 

명령어 입력 시 생성되는 TypeScript 설정 파일

---

2. TypeScript 설치 후 발생한 Issue 해결하기

npx create-react-app my-app --template typescript

 

위의 명령어를 입력해서 처음 React Project를 생성할 때 TypeScript를 같이 설치했다면

문제되는 사항은 아니지만, 필자의 경우에는 JavaScript 기반으로 만든 React Project에

TypeScript를 설치했기 때문에 아래와 같은 경고들이 발생했었다.

 

따라서 이번 Part는 위의 경고들을 해결하는 과정을 기록해둔 것이다.

---

① Cannot use JSX unless the '--jsx' flag is provided / ts(17004)

이거는 tsconfig.json 파일에서 'jsx' 항목이 없기 때문에 발생하는 오류이다.

이는 tsconfig.json의 compilerOption 안에 아래 코드를 추가하는 것으로 해결할 수 있다.

"jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */

---

② styled-components 관련 issue 해결하기

 

기존에 만들어둔 React Project에 TypeScript를 설치했는데

해당 Project에서 styled-components 사용 중이라면 Error가 발생할 수도 있다.

 

이는 해당 Library가 TypeScript로 만들어진 것이 아니라

JavaScript로 만들어졌기 때문에 발생하는 Issue이다.

 

다만 이 글에서 예시로 든 styled-components는 현 시점에선

TypeScript와 호환되기 때문에 아래 명령어를 굳이 입력할 필요가 없다.

"그냥 이런 방법을 통해서 해결할 수 있다." 정도로 하고 넘어가도록 하자.

npm install @types/styled-components"

---

📔 Reference
ReactJS Masterclass / Nomad Coder
Adding TypeScript