Typescript 2. TS 시작하기

Typescript 시작하기

환경구성

웹 브라우저에서 바로 처리 가능한 JS와 달리 TS는 바로 해석되지 않음.
TS코드는 TS 컴파일러(tsc)를 통해 JS코드로 해석되어 웹 브라우저에서 처리됨

app.ts > tsc app.ts > app.js

tsc, Typescrpt 컴파일러 설치하기

//다양한 프로젝트에서 사용하기 위해 전역으로 설치 또는 -D(or --save-dev)로 로컬 설치
npm i -g typescript
// 버전 출력
tsc -v
// 도움말 출력, 모든 도움말 출력
tsc -h

tsc로 컴파일 하기

//main.ts 파일을 만들고 해당 코드 입력
📁 main.ts
console.log('hello ts')

커멘드 창에 tsc main.ts 를 입력하면 main.ts에 있는 타입 에러를 볼 수 있음

TS CLI 명령

// TS 컴파일러 실행(기본설정 사용)
tsc

// 컴파일러 기본 설정으로 특정 파일만 해석
tsc index.ts

// 컴파일러 기본 설정으로 src 디렉토리 내부의 모든 *.ts 파일 해석 > 아웃풋 디렉토리 출력
tsc src/*.ts --outDir public/scripts

//tsconfig.json 컴파일러 설정으로 src 디렉토리 내부의 모든 *.ts 파일 해석
// -p, --profect : tsconfing.json 설정 파일 경로
tsc -p tsconfig.json src/*.ts

추가적인 컴파일러 옵션

TS 구성 파일 생성

tsc 초기화(--init) 명령을 실행해 TS 컴파일러 구성(config) 파일을 루트 위치에 생성

//tsconfig.json 파일 생성
tsc --init

// 옵션을 설정해 tsconfig.json 파일 생성
tsc --init --rootDir src --outDir build --lib dom, es6 --noEmit

TS config 설정 관련 문서

esbuild

일반 JS 모듈 번들러보다 훨씬 빠름
TS와 함께 쓸 때 주의