먼저 타입스크립트 프로젝트에서 React가 어떻게 작동하는지 설명해 보겠습니다.

몇가지가 들어있는 package.json이 있습니다.

여기에는 @types/node 라는 항목이 있고 typescript가 있습니다.

// inside package.json
...
"devDependencies": {
  "@types/node": "^18.15.11",
  "typescript": "^5.0.4"
}

또한 프로젝트에서 tsc를 실행하면 얻을 수 있는 기본 tsconfig인 tsconfig.json 이 있습니다. 이것은 정말 간단한 프로젝트입니다. 아직 React가 포함되어 있지 않고 실제로 아무것도 없습니다.

이렇게 간단한 프로젝트에 React를 추가하는 방법과 React와 Typescript가 서로 어떻게 연관되는지 살펴보겠습니다.

Adding React

일반적으로 패키지를 추가하려면 pnpm add react 와 같은 명령어를 실행하여 React 패키지를 설치합니다.

여기에 오류가 있습니다.

import React from "react";

// hovering over "react" shows an error:
Could not find a declaration file for module 'react'.

타입선언 파일을 설치하거나 다른 방법으로 추가해야 한다는 것을 알려줍니다.

Adding a Declaration File

Typescript로 작성된 모듈의 경우 type definition이 라이브러리 자체와 함께 제공됩니다. 그러나 React는 flow로 작성되었기 때문에 따로 설치해야 합니다.

pnpm add -D @types/react

React DOM을 사용하는 경우 동일한 작업을 수행해야 합니다.

// inside package.json
...
"devDependencies": {
  "@types/node": "^18.15.11",
  "@types/react": "^18.0.35",
  "typescript": "^5.0.4",
}