TypeScript 환경 설정

빌드 툴을 사용하지 않고 타입스크립트를 사용할 일도 있을 것 같아 초기 환경 설정하는 방법을 순서대로 정리하려 한다.

1. npm package 설치하기

우선, 프로젝트를 시작할 디렉토리를 하나 만들고 그 안에서 npm package를 설치한다.

다음 명령어로 설치할 수 있다.

npm init // 설정 개발자가 하나씩 정의

또는

npm init -y // 모든 설정 기본값으로 정의

 

명령어를 실행하면 package.json이 생성된다.

2. types/node 의존성 주입

다음으로 의존성을 주입해야 한다. 다음 명령어로 의존성을 주입한다.

npm i @types/node

 

그러면 package.json에 다음과 같이 의존성이 생기고 node_modules 디렉토리와 package-lock.json 파일이 생성된다.

의존성 주입

3. tsconfig.json 생성

프로젝트 최상단에 tsconfig.json 파일을 만들어서 TS를 JS로 컴파일할 수 있게 해야한다.

두 가지 방법이 있다. 첫 번째는 명령어를 통해 기본적인 tsconfig.json을 생성하는 방식이고, 두 번째는 직접 파일을 만들어서 tsconfig.json 내용을 개발자가 직접 추가하는 것이다.

 

둘 다 살펴보겠지만 일단 두 번째 방식을 더 추천한다.\

우선, 첫 번째 방식은 다음 명령어를 입력한다.

tsc --init

 

위 명령어로 tsconfig.json을 생성하면 다음과 같이 파일이 만들어진다.

tsc --init

 

주석이 많기도 하고 기본적으로 레거시 버전이 기본이기에 두 번째 방식으로 생성하는 것을 추천한다.

프로젝트 최상단에 새 파일을 만들고 이름을 tsconfig.json으로 만들어라. 내용은 다음과 같이 들어가면 된다.

직접 작성

 

사진에서 보듯이 ts-node와 skipLibCheck의 경우 각 사용자가 사용하는 버전에 따라 필요여부가 나뉜다.

참고로 node.js 버전이 20버전 이후부터는 ts-node 옵션을 없애도 가능한대신 컴파일할 때 다음 명령어로 진행해야 한다.

tsx src/파일명

 

 

그리고 추가적으로 module 옵션에 CommonJS를 선택했으면 별일 없지만 ESNext를 선택할 경우 package.json에 다음 옵션을 추가해야 한다.

"type": "module"

 

 

따라서, package.json이 다음 사진처럼 되어 있어야 한다.

package.json

4. 타입스크립트 컴파일러 설치하기

마지막으로 타입스크립트 컴파일러를 설치해서 컴파일이 가능하게 해줘야 한다.

// window 사용자
npm install typescript // 해당 프로젝트에만 설치
or
npm install typescript -g // 내 컴퓨터에 전역으로 설치

// mac 사용자
sudo npm install typescript
or
npm install typescript -g

 

그리고 위에서 언급한 node.js 20버전 이후인 사용자들은 tsx 사용을 위해 설치가 필요하다.

npm i -g tsx // window

sudo npm i -g tsx // mac

5. 테스트 해보기

설치할 것들과 설정할 것들이 끝났다. 마지막은 문제가 없는지 테스트해보면 된다.

src 디렉토리에 test.ts 파일을 만들자.

// src/test.ts
console.log("Hello!");

 

그리고 터미널에 다음 명령어를 입력한다.

tsc

 

명령어를 입력하면 dist 디렉토리가 생기고 그 안에 test.js 파일이 만들어질 것이다.

다음 명령어를 입력해서 파일을 실행해본다.

node dist/test.js
// 출력결과 Hello!

 

Hello!가 출력되면 정상적으로 설정된 것이다.

마지막으로, ts 파일도 실행해보자.

tsx src/test.ts
// 출력결과 Hello!

 

이때도 Hello!가 출력되면 정상적으로 진행된 것이다.

만약 본인이 아직 node.js 20버전 이하라 ts-node 옵션을 사용 중이라면 tsx 대신 다음 명령어를 이용하자.

ts-node src/test.ts

참고자료

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런