[TypeScript] 리액트 타입스크립트로 프로젝트 시작하기

Today, What I learned?

타입스크립트로 기존 프로젝트를 리팩토링하는 것이 아니라 새로운 프로젝트를 생성하는 과정을 글로 남겨보려고 한다.

 

 

프로젝트 생성

CRA를 통해 새로운 프로젝트를 시작한다.

npx create-react-app 프로젝트명 --template typescript 

이 때 --template을 꼭 넣어주어야 처음부터 타입스크립트로 파일들이 실행된다.

--template없이 typescript만 넣을 경우에는 자바스크립트 파일로 CRA가 되어서 다시 프로젝트를 생성해야 할 수 있다.

정상적으로 명령어가 실행되었다면 이렇게 ts, tsx로 파일들이 만들어져 있고, tsconfig.json까지 기본적으로 포함되어 있을 것이다.

 

 

react-app-env.d.ts ?

일반적인 리액트 프로젝트에서는 보지 못했던 이 파일은 무엇일까? 하고 좀 찾아보니 전역으로 사용할 타입을 선언할 수 있는 파일이라고 한다.
이 파일은 컴파일 이후로 js로 변환되지 않기 떄문에 파일 내에서 const 나 let 키워드로 선언할 경우 에러가 발생한다.

아래와 같이 이미지 리소스 관련 확장자나 스타일 관련 확장자들에 대한 타입을 선언하여 사용하는 듯 하다.

declare function sum(x: number, y: number): number;

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

 

 

프로젝트 파일 정리 후 패키지 설치하기

프로젝트에 따라 필요한 패키지를 설치해주고, 기본적으로 설정된 tsconfig.json 파일에 필요한 설정을 추가해준다.

리덕스 툴킷을 사용한다면 아래와 같은 것들을 설치해주면 되겠다.

npm install react-redux @reduxjs/toolkit 

styled-components 패키지 같은 경우는 별도의 타입 정의 패키지 추가 설치가 필요하다.

npm install --save styled-components

npm i --save-dev @types/styled-components

 

 

 

이후 원하는 대로 프로젝트를 시작하면 된다! 🙌