React 프로젝트에 Typescript 적용

1. 새 프로젝트 생성

Typescript 설치

typescript로 새로운 React 프로젝트를 생성하기 위해선 아래 명령어를 통해 프로젝트를 생성한다.

$ npx create-react-app 프로젝트명 --template typscript

그러면 tsconfig.json파일과 node_modules/@types폴더가 생성된 것을 확인할 수 있다.

이 이후에는 TS문법에 따라 개발을 시작하면 된다.

2. 기존 프로젝트에 Typescript 적용

2-1. 타입 선언 패키지 설치

만약 기존에 있는 프로젝트에 Typescript를 적용하고 싶다면

node, react, react-dom, jest에 대한 타입 선언 패키지들을 설치해야 한다.

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

package.json을 확인해보면 네 가지의 타입 선언 패키지들이 설치된 것을 확인할 수 있다.

2-2. tsconfig.json 생성

타입 선언 패키지를 설치했으면 그 다음으로 최상위 경로에 tsconfig.json (프로젝트를 컴파일하는 데 필요한 옵션을 지정하는 파일)를 생성해주고 필요한 옵션들을 설정해준다.

예시)

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["ESNext", "DOM"],
    "allowJs": true,
    "esModuleInterop": true,
    "strict": true,
    "module": "CommonJS",
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

2-3. js파일을 tsx로 변경

tsconfig.json으로 설정까지 끝냈으면 마지막으로 .js 파일들을 .tsx로 변경해주면 된다.

먼저 index.js부터 index.tsx로 파일명을 변경해주면 아래와 같이 오류가 발생한다.

document.getElementById()의 반환값은 HTMLElement이거나 null을 반환하는데,

.createRoot()같은 경우에는 인자로 null을 받지 않기 때문에 발생하는 오류다.

이를 해결하기 위해서는 document.getElementById()의 타입을 HTMLElement로 타입 단언을 as 키워드로 해주면 해결된다.

그 다음 App.js를 App.tsx로 변경해주면 되는데, 이 경우에는 따로 TS오류가 발생하지는 않는다.

이 이후에는 TS문법에 맞춰서 개발을 진행하면 된다.

3. 외부 라이브러리 사용

기존의 React에서 외부 라이브러리를 설치할 때는 npm을 통해서 설치하면 문제 없이 사용할 수 있었다.

하지만 TS의 경우에는 코드를 실행하기 전에 타입 검사를 수행하게 되는데

이 때 해당 라이브러리에 대한 타입 정보가 제공되지 않은 상태에서는 바로 사용할 수 없다.

react-router-dom 같은 경우에는 이름 옆에 TS 마크가 붙어있는 것을 확인할 수 있는데, 이는 TS로 만들어진 라이브러리어서 바로 사용할 수 있다.

하지만 lodash라이브러리 처럼 JS로 만들어진 라이브러리 같은 경우에는 위에서 말했다시피 바로 사용할 수 없다.

이런 경우에는 lodash옆에 DT 마크를 클릭해 보면

해당 라이브러리의 @types 패키지를 확인할 수 있다.
@types/lodash

이 패키지도 추가로 설치해야 한다.

정리해보면 외부 라이브러리를 사용할 때는

1. npm으로 외부 라이브러리 설치
   ex.) npm i lodash

2. 해당 라이브러리의 타입 패키지 설치 (npm 사이트에서 해당 라이브러리 검색 후 DT마크 클릭)
   ex.) npm install --save @types/lodash