TypeScript 설치하기

📌설치하기

npm install -g typescript

개발 Dependency로 설치할 수도 있다.

npm i typescript -D

1️⃣ 타입스크립트 컴파일러를 글로벌로 설치 시

📌컴파일러 사용

tsc test.ts

tsc는 타입스크립트 컴파일러의 약자이다. .ts는 타입스크립트 문법으로 만들어진 파일이다. 
위의 명령어를 실행하면 test.ts가 자바스크립트 파일로 컴파일된다.

📌자동으로 설정 파일을 생성

컴파일 시 어떤 식으로 컴파일할 것인지 설정 파일을 넣어주어야 하는데, 이럴 때 자동으로 설정 파일을 생성해 주는 명령어가 있다.

tsc --init

위의 명령어를 실행하면 다음과 같은 json파일이 생성된다.

프로젝트의 root폴더에 tsconfig.json 파일이 있다면 tsc명령어 하나만으로 프로젝트 내 모든 ts파일을 한번에 컴파일할 수 있다.

 

📌자동으로 tsc 실행하기 (watch 모드)

매번 tsc 명령어를 통해 컴파일하기가 귀찮다면 이를 자동으로 해주는 방법이 있다.

tsc -w

위 명령어의 -w는 watch의 약자로, 파일이 수정될 때마다 자동으로 컴파일된다.

 

2️⃣ 프로젝트에 타입스크립트 컴파일러 설치 시

📌설치하기

npm i typescript -D

📌컴파일러 사용

npx tsc

위의 명령어를 사용하기 위해서는 tsconfig.json파일이 필요하다. config파일은 아래의 명령어를 통해 tsconfig.json파일을 생성할 수 있다. 타입스크립트를 컴파일하는 옵션을 타입스크립트에서 제공하는 기본 옵션으로 사용한다.

npx tsc --init

📌자동으로 tsc 실행하기 (watch 모드)

npx tsc -w

📌pakage.json scripts로 실행하기

/*pakage.json*/
{
  "name": "tsc-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc" //다음과 같이 설정해서 실행할 수 있다.
	"build:watch": "tsc" //다음과 같이 설정해서 watch 모드로 실행할 수 있다.
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^4.8.3"
  }
}

npm run build

npm run build:watch

---

[출처] 패스트캠퍼스 '프론트엔드 초격차 패키기' 강의를 보고 정리한 내용입니다.