[TypeScript] 타입스크립트 셋업

Typescript 기반 React 앱 설치

처음 프로젝트를 만든다면 create react app을 만드는 명령어에 --template typescript를 추가로 붙여준다.

npx create-react-app 앱 이름 --template typescript
// or
yarn create react-app 앱 이름 --template typescript

 

기존 프로젝트에 타입스크립트 추가하기

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
// or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

타입스크립트에게 사용할 라이브러리 설명해주기

어떤 패키지나 라이브러리는 타입스크립트로 만들어진 것이 아니다.

따라서 자바스크립트 기반으로 만들어졌다면 타입스크립트는 이것이 무엇인지 모르기 때문에 에러를 발생시킨다.

 

타입스크립트로 만들어지지 않은 라이브러리를 사용하고 싶으면 해줘야 할 작업이 있다.

예를 들어 styled-components를 import하려는 경우 에러가 발생한다.

타입스크립트는 코드가 실행되기 전에 모든 걸 알고 싶어 한다.

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

이제 타입스크립트가 styled-components가 무엇인지 알게 되었다.

 

어떻게?

만약 우리가 사용하고 싶은 패키지나 라이브러리가 타입스크립트 기반이 아니라면 타입스크립트에게 모든 정보를 알려주어야 한다.

@types는 유명한 npm 라이브러리를 가지고 있는 깃허브 저장소다. 여기에 우리가 사용하고 싶은 수많은 라이브러리가 타입스크립트에게 무엇인지 설명할 수 있도록 정의되어있다.

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types

 

타입스크립트에게 styled-components가 무엇인지 설명하는 코드들이 작성되어있는 것이다.