React TypeScript 적용하기
React에 TypeScript를 적용하는 방법에 대해 알아보겠습니다.
1. TypeScript 설치
리액트를 타입스크립트와 함께 설치하는 경우엔 아래 명령어를 실행해줍니다.
$ npx create-react-app my-app --template typescript
기존에 생성한 리액트 프로젝트에 타입스크립트를 설치하는 경우엔 아래 명령어를 실행해줍니다. @types가 붙은 패키지는 타입스크립트를 지원하는 라이브러리입니다.
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest
yarn add v1.19.1
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
warning Pattern ["@types/jest@^27.0.2"] is trying to unpack in the same destination "/Users/harry/Library/Caches/Yarn/v6/npm-@types-jest-27.0.2-ac383c4d4aaddd29bbf2b916d8d105c304a5fcd7-integrity/node_modules/@types/jest" as pattern ["@types/jest@*"]. This could result in non-deterministic behavior, skipping.
[3/4] 🔗 Linking dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning " > redux-devtools-extension@2.13.9" has unmet peer dependency "redux@^3.1.0 || ^4.0.0".
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
warning Workspaces can only be enabled in private projects.
warning Workspaces can only be enabled in private projects.
success Saved 6 new dependencies.
info Direct dependencies
├─ @types/jest@27.0.2
├─ @types/node@16.11.6
├─ @types/react-dom@17.0.10
├─ @types/react@17.0.33
└─ typescript@4.4.4
info All dependencies
├─ @types/jest@27.0.2
├─ @types/node@16.11.6
├─ @types/react-dom@17.0.10
├─ @types/react@17.0.33
└─ typescript@4.4.4
✨ Done in 22.43s.
다음으로 아래 명령어를 실행하여 tsconfig.json 파일을 생성해줍니다.
$ npx typescript --init
tsconfig.json 파일이 생성되면 다음과 같이 수정해줍니다. 작성한 내용은 아래의 글을 참고하여 기본 내용에 baseUrl만 추가해주었습니다. 설정을 완료한 이후에 기존의 .js 파일을 .ts 또는 .tsx 파일로 변환하면 타입스크립트 설정이 적용된 것을 확인할 수 있습니다.
[React] create-react-app & Typescript 초기 세팅 완벽 정리
최근에 타입스크립트를 배우고 타입스크립트로 create-react-app을 설정하는데 시간이 많이 걸렸다..그리고 새로 프로젝트를 시작할 때 초기세팅을 완벽하게 하자! 라고 생각을 해서 협업을 할 때
velog.io
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"baseUrl": "./src",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
설정에 사용된 옵션에 대한 설명은 아래 링크에서 확인할 수 있습니다.
TSConfig Reference - Docs on every TSConfig option
From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.
www.typescriptlang.org
이상으로 React에 TypeScript를 적용하는 방법에 대해 알아봤습니다.
※ Reference
- create-react-app.dev, Adding TypeScript, https://create-react-app.dev/docs/adding-typescript/
- velog.io/@velopert, 리액트 프로젝트에서 타입스크립트 사용하기, https://velog.io/@velopert/using-react-with-typescript
- velog.io/@velopert, 리액트 컴포넌트 타입스크립트로 작성하기, https://velog.io/@velopert/create-typescript-react-component
- velog.io/@junghyeonsu, [React] create-react-app & Typescript 초기 세팅 완벽 정리, https://velog.io/@junghyeonsu/React-create-react-app-Typescript-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC
- any-ting.tistory.com, [React TypeScript] React 프로젝트 TypeScript 적용, https://any-ting.tistory.com/93
