TIL - React 전용 TypeScript 셋업 step by step / TypeScript에서 모듈 설치하기

처음부터 리액트 전용 TS를 세팅하거나

# yarn을 사용하는 경우
yarn create react-app my-app --template typescript

# npx를 사용하는 경우
npx create-react-app my-app --template typescript

 

CRA로 리액트 프로젝트 구성 후 나중에 TS 추가하거나

yarn add typescript @types/node @types/react @types/react-dom @types/jest
# 혹은
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

---

모듈 다운받기

 

Problem

yarn add shortid

다운은 받아졌는데 작업중인 tsx 파일에서는 오류가 뜬다. 

 

Solve

확인해보니 타입스트립트 다운 시 명령어가 다르다!

yarn add --dev @types/shortid
# 혹은
npm i --save-dev @types/shortid

--save-dev → 이 플래그는 설치되는 패키지가 프로젝트의 `package.json` 파일에 devDependency로 추가될 것임을 나타낸다! devDependency는 개발 중에만 필요한 패키지로, 실제 운영 환경에서는 사용되지 않음!

@types/shortid → shortid 라이브러리의 TypeScript 타입 정의를 가리키는 패키지 이름. TypeScript 타입 정의는 JavaScript 라이브러리에 대한 타입 정보를 제공하여 TypeScript 프로젝트에서 더 나은 개발 경험을 제공!

package.json