[ Project ] @ + TypeScript 프로젝트 생성

Next.js + TypeScript

프로젝트 생성

1. npm
$ npx create-next-app@latest {Project-Name} --ts

2. yarn
$ yarn create next-app {Project-Name} --typescript

기존 프로젝트에 TypeScript 추가

1. tsconfig.json 파일 추가

$ touch tsconfig.json

2. Project 실행

실행하면 터미널에 Next.js에 추가할 파일들을 안내해줍니다.

1. npm
$ npm run dev
    
2. yarn
$ yarn dev

3. next
$ next dev

3. TypeScript 설치

1. npm
$ npm install --save-dev typescript @types/react @types/node

2. yarn
$ yarn add --dev typescript @types/react @types/node

4. 프로젝트 설정

1.TypeScript가 설치되어 있는 이상 .js 파일을 .tsx 파일로 변환하거나 새로운 .tsx 파일을 만들어야 실행할수 있습니다.

2.TypeScript strict(엄격)모드는 기본적으로 꺼져 있습니다. TypeScript에 익숙해지면 tsconfig.json. 에서 "strict": true로 설정

참고 next.js 홈페이지

React.js + TypeScript

프로젝트 생성

1. npm
$ npx create-react-app {Project-Name} --template typescript

2. yarn
$ yarn create react-app {Project-Name} --template typescript

기존 프로젝트에 TypeScript 추가

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

2. yarn
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

TypeScript를 추가 했다면 모든 .js 파일을 .tsx로 변경

참고 React.js 홈페이지

번외(react-redux)

TypeScript 를 공부하는데 React + TypeScript 에서 react-redux가 지원을 안하는줄은 몰랐습니다

해결방법

먼저 프로젝트를 생성하고 redux 라이브러리를 설치합니다.

1. 프로젝트 생성

npx create-react-app {Project Name} --typescript

2. redux 라이브러리 설치

yarn add redux react-redux @types/react-redux

Redux 라이브러리를 3개나 설치하는 이유는 redux는 TypeScript를 지원하지만 react-redux는 지원하지 않기 때문에 @types/react-redux를 설치합니다. @types/react-redux는 TypeScript를 지원하는 redux의 써드파티 라이브러리 입니다.

그리고 사용하고자 하는 라이브러리가 TypeScript를 지원하는지 확인하는 방법은 TypeScript에 검색 할수 있습니다.