1. 타입스크립트는 왜 써?

타입스크립트는 2012년 마이크로소프트 사에서 오픈 소스로 공개한 컴파일 투 자바스크립트 언어다. 타입 스크립트 프로그램은 자바스크립트로 트랜스파일 해야 브라우저나 자바스크립트 엔진에서 실행된다.

트랜스 파일은 타입스크립트 코드를 자바스크립트로 바꾸는 것과 같이 한 언어의 소스 코드를 비슷한 추상화 수준의 다른 언어로 변환하는 것

컴파일은 C언어를 기계어로 변환하는 것과 같이 서로 다른 추상화 수준의 언어로 변환하는 것

2. 동적 타이핑과 정적 타이핑

// TS
let id: string;
id = 123123 // complie error

// JS
let id= "moo"
id = 123123 // ok

자바스크립트는 동적 타이핑이므로, 입력되는 값에 따라서 타입이 결정된다. 하지만 타입스크립트는 컴파일러 tsc가 컴파일 하기 전 타입스크립트 정적 코드 분석기가 오류를 감지하고 경고해준다. (런타임 전, 컴파일 단계에서 모든 오류를 확인할 수 있다.)

프로그래밍 오류 보고 유횽은 크게 도구에서 보고하는 경우와 사용자가 보고하는 경우로 구분된다. 타입스크립트를 사용하면 사용자가 직접 보고하는 경우의 수가 줄어든다.

자바스크립트로 컴파일할 수 있는 언어는 백개가 넘는다.

많은 언어 중, 타입스크립트에 주목해야하는 이유는, 타입스크립트는 ECMA스크립트 표준을 따르며, 웹 브라우저보다 훨씬 더 빠르게 자바스크립트 기능을 실행할 수 있기 때문이다.

async - await 키워드는 ES2017에 추가되었다. 주요 브라우저에서 신규 키워드를 지원하기까지 무려 1년 이상 걸렸다. 하지만 타입스크립트는 2015년 11월부터 최신 키워드를 지원하고 있다.

즉, 타입스크립트 개발자가 3년 더 일찍 최신 키워드를 쓰고 있었던 것!

타입스크립트는 최신 자바스크립트 문법을 지원하며, 모든 브라우저 사양을 지원하는 버전으로 컴파일이 가능하다.

또한, 컴파일된 자바스크립트 코드는 사람들이 일기에도 쉽게 적혀있어서 기계가 아닌 사람이 작성한 것처럼 보인다.

4. 타입스크립트 애플리케이션 개발과정

실제 프로젝트는 수백 수천 개의 파일로 구성되어 있다. 수 많은 파일들을 하나로 묶고 통합하는 번들링 과정이 필요하다.

자바스크립트 개발자는 웹팩 또는 롤업과 같은 번들러를 사용한다. 이 도구는 여러가 자바스크립트 파일을 통합하거나 코드를 최적화, 사용하지 않는 코드를 제거하는 Tree-Shaking을 수행하며, 각 모듈별로 번들링해 배포할 수 있다.

수천 개의 라이브러리가 있지만 전부 타입스크립트로 작성된 것은 아니다.

타입스크립트 프로젝트에서는 기존 자바스크립트 라이브러리도 함께 사용할 수 있다.

ex) lodash를 사용하는 경우

lodash.d.ts. 파일은 타입이 정의되어 있으며, 타입스크립트 컴파일러가 이를 사용한다.

5. 타입스크립트 컴파일러

설치

npm install -g typescript // 전역설치

tsc main // 컴파일

타입스크립트 컴파일러는 20개가 넘는 옵션이 있다. 그 중 noEmitOnError를 사용할 경우 타입스크립트 컴파일러는 모든 오류가 고처질 때까지 이전에 생성된 자바스크립트 파일을 덮어쓰지 않는다.

tsc main --noEmitOnError true

컴파일러 옵션 중 —t는 특정 자바스크립트 버전을 의미한다.

tsc --t ES5 main // ES5 문법의 코드로 변환된다.

타입스크립트 컴파일러는 해당 소스, 최동 디렉터리, 타겟 등 옵션을 미리 설정할 수 있다. 프로젝트 폴더 내 tsconfig.json 파일이 있는 상태에서 tsc 명령어를 입력하면 컴파일러가 tsconfig.json 옵션으로 컴파일을 진행한다.

{
    "compilerOptions": {
				"baseUrl":"src" // src 폴더 내 모든 ts 파일 컴파일
        "outDir": "./dist", // js 파일이 생성되는 폴더
        "noEmitOnError": true, 
	      "target": "es5", // ES5로 컴파일        
				"watch": true // watch 옵션으로 타입스크립트 파일이 변경될 때마다 다시 컴파일 한다.
    }
}

tsc --init // 타입스크립트 프로젝트 초기화

Summary

• 타입스크립트는 자바스크립트의 상위 집합 언어
• 타입스크립트에서 발생하는 오류는 정적 코드 분석기가 입력하는 즉시 찾아낼 수 있다.
• 타입스크립트는 정적 타입 언어가 가진 장점을 가지고 있다.
• 타입스크립트는 ECMA스크립트 최신 명세를 따르며 타입, 인터페이스, 데코레이터, 클래스, 변수, 제너릭 …. 등 다양한 기능을 가지고 있다.