Typescript 환경 세팅/CLI

Typescript 환경 세팅

• Node.js가 설치되어 있어야 함
• npm을 통해 필요한 모듈 설치 및 관리 가능

# 글로벌 설치
# npm install --global typescript
$ npm i -g typescript

# 로컬 설치
# npm install --save-dev typescript
$ npm i -D typescript

 

글로벌(global), 로컬(local) 설치
권장 방법은 로컬 설치, 다수의 프로젝트에서 TypeScript 사용이 요구될 경우는 편의상 글로벌 설치

• yarn을 사용할 경우 <code><code>

# 글로벌 설치
$ yarn global add typescript

# 로컬 설치
$ yarn add typescript --dev

• Node.js 런타임 환경에서 Typescript를 사용해 REPL을 하려면 ts-node 패키지 설치

$ npm i -D ts-node

 

Typescript CLI(Command-Line Interface)

• TypeScript파일은 .ts 확장자.
• 파일에 작성된 코드를 토대로 컴파일하려면 tsc 명령 사용

tsc

• 타입스크립트 컴파일러를 실행하기 위한 command line interface 명령어
• node_modules/.bin/tsc
• npx tsc

개별 파일을 컴파일 하려한다면 tsc 명령 뒤에 파일 이름을 붙여서 사용

# 명령어가 실행된 디렉토리 내 모든 *.ts 파일 컴파일
$ tsc

# 개별 파일 컴파일
$ tsc 파일.ts

 

ECMAScript Target

• 컴파일 코드 ECMAScript 버전 목표(--target, -t) 설정 가능 (기본 값: ES3)

# tsc --target 'ES5'
$ tsc -t 'ES5'

 

Module Type

• 컴파일 시, 모듈 유형(--module, -m) 설정

# tsc --module 'es2015'
$ tsc -m 'es2015'

 

Watch

• 관찰, 수정/저장 할 때 마다 자동 컴파일 설정

# tsc --watch
$ tsc -w

 

Output

• 컴파일 될 output 디렉토리(--outDir) 설정

$ tsc --outDir './dist'

•  컴파일 될 output 파일 이름(--outFile) 설정

# 파일 이름 설정
$ tsc --outFile 'bundle.js'

# 디렉토리 + 파일 이름 설정
$ tsc --outFile './dist/bundle.js'

 

도움말

• 도움말(--help, -h) 화면에 출력해 확인가능

# tsc 도움말 출력
$ tsc -h

 

Reference

• https://www.typescriptlang.org/
• https://www.notion.so/TypeScript-Cookbook-727820ac0d4544498ebe732e940816f4
• https://www.samsungsds.com/kr/insights/typescript.html
• https://yamoo9.gitbook.io/typescript/cli-env