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 파일이 생성된 후에는 여러가지 컴파일 옵션들을 사용할 수 있습니다.