TypeScript

자바스크립트의 경우 다른 언어들과 달리 타입 시스템이 없는 동적 프로그래밍 언어로, 자바스트립트의 변수는 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있습니다.

비교적 유연하게 개발할 수 있는 개발환경을 제공하지만, 반면 런타임 환경에서 쉽게 에러가 발생할 수 있는 단점을 가지고 있습니다.

TypeScript는 이러한 비교적 유연한 자바스크립트에 강한 타입 시스템을 적용시킴으로써 컴파일 환경에서 에러를 잡아낼 수 있도록 돕습니다.

하지만 타입스크립트로 작성된 코드를 Browser에 바로 적용을 할 수 없기 떄문에 타이스크립트 컴파일러를 통해 플레인 자바스크립트로 변경을 해줘야합니다.

TypeScript 개발환경 만들기

VSCode(Visual Studio Code)와 WebStorm은 타입스크립트 지원 기능 및 컴파일러가 내장되어 있기 때문에 별도의 설정 없이도 타입스크립트 파일을(.ts, tsconfig.json 등) 인식할 수 있고 코드 검사, 빠른 수정, 실행 및 디버깅 등의 다양한 기능을 바로 사용할 수 있습니다.

따라서 내장된 컴파일러를 선택할 수 있고, 직접 설치한 컴파일러를 선택해 이용할 수도 있습니다.

앞으로 각각 타입스크립트 컴파일러를 글로벌로 설치한 경우와 프로젝트에만 설치한 경우를 나누어 사용 예제를 다뤄보도록 하겠습니다.

1. 글로벌 환경

글로벌로 타입스크립트 컴파일러 설치

$ npm install -g typescript
//참고: 삭제 $ npm uninstall typescript -g

$ tsc --version

TypeScript 컴파일

$ tsc test.ts

tsc '파일명'명령어를 사용하면 타입스크립트로 작성되어 있는 해당 파일을 자바스크립트로 컴파일 할 수 있습니다. 명령이 실행된 후 프로젝트 폴더를 확인을 해보면 test.ts가 있는 파일경로에 test.js파일이 생성된 것을 확인할 수 있습니다.

또한 tsc --init을 통해 tsconfig.json 생성된 후에는 tsc명령어 만으로 모든 .tsc 파일을 .js파일로 컴파일 시킬 수 있습니다.

※ 만약 단일 프로젝트에서만 사용하는 희망하는 경우(글로벌로 설치하지 않은 경우) npx tsc 명령어를 통해 실행시킬 수 있습니다.

컴파일러 옵션

$ tsc --init  //tsconfig.json 파일이 생성됩니다.

tsconfig.json 파일이 생성된 후에는 여러가지 컴파일 옵션들을 사용할 수 있습니다.

TypeScript GuidBook에서 조금 더 많은 옵션들을 확인해볼 수 있습니다.

1) tsc --watch

• test.ts파일이 변경되는 경우 그 즉시 test.js파일에 반영되도록 돕는 옵션입니다.

$ tsc --watch  
$ tsc -w //축약해 사용이 가능합니다.

2. 단일 프로젝트

프로젝트에만 타입스크립트 컴파일러 설치

$ npm init -y //package.json 파일이 생성됩니다.

$ npm install typescript

node_modules폴더 내에 typescript가 생성됩니다.

실행

$ node_modules/.bin/tsc 또는 $ node_modules/typescript/bin/tsc

//타입스크립트의 버전이 올라가며 아래 명령어로도 실행이 가능합니다.
$ npx tsc

$ npx tsc --init //tsconfig.json 파일 생성
$ npx tsc -w // watch모드 실행

package.json 파일 내부의 sciprt부분에 "build": "tsc"를 명시하게되면 npm run build 명령어를 통해 자동으로 tsc 실행되게 할 수 있습니다.

---

참고자료

• HEROPY
• 타입스크립트 가이드북