Typescript Programming : 02. 타입스크립트 내려다보기

본 글은 Typescript Programming을 요약한 글입니다.
자세한 내요은 본 책을 읽으시길 바랍니다.

 본 장은 타입스크립트 컴파일러(TypeScript Compiler, TSC)의 동작원리, 타입스크립트의 기능 소개, 프로그램 개발에 적용할 수 있는 패턴 등을 소개한다.

2.1 컴파일러

 프로그램은 프로그래머가 작성한 다수의 텍스트 파일로 구성된다. 이 텍스트를 컴파일러라는 특별한 프로그램이 파싱하여 추상 문법 트리(abstract syntax tree, AST)라는 자료구조로 변환한다. 그리고 컴파일러는 다시 AST를 바이트코드라는 하위 수준의 표현으로 변환한다. 이후 런타임이라는 다른 프로그램에 바이트코드를 입력해 평가하고 결괄르 얻을 수 있다.

1. 프로그램이 AST로 파싱된다.
2. AST가 바이트코드로 컴파일된다.
3. 런타임이 바이트코드를 평가한다.

 타입스트립트가 다른 언어와 다른 점은 컴파일러가 코드를 바이트코드 대신 자바스크립트 코드로 변환한다는 점이다. 타입스크립트 컴파일러는 AST를 만들어 결과 코드를 내놓기 전에 타입 확인을 거친다.

• 타입 검사기 : 코드의 타입 안전성을 검증하는 특별한 프로그램

타입 확인과 자바스크립트 방출 부분을 포함하면 타입스크립트 컴파일 과정은 대략 예시처럼 된다.

1. 타입스크립트 소스 => 타입스크립트 AST
2. 타입 검사기가 AST를 확인
3. 타입스크립트 AST => 자바스크립트 소스 : TS 영역
4. 자바스크립트 소스 => 자바스크립트 AST
5. AST => 바이트 코드
6. 런타임이 바이트코드를 평가 : JS 영역

TSC가 타입스크립트 코드를 자바스크립트 코드로 컴파일할 때는 개발자가 사용한 타입을 확인하지 않는다. 개발자가 코드에 기입한 타입 정보는 최종적으로 만들어지는 프로그램에 아무런 영향을 주지 않으며, 단지 타입을 확인하는 데만 쓰인다는 뜻이다.

2.2 타입 시스템

•  타입 시스템 : 타입 검사기가 프로그램에 타입을 할당하는 데 사용하는 규칙 집합

 타입 시스템은 보통 두가지 종류로 나뉜다. 어떤 타입을 사용하는 지를 컴파일러에 명시적으로 알려주는 타입 시스템과 자동으로 타입을 추론하는 타입 시스템으로 구분된다. 타입 스크립트는 두 가지 시스템 모두의 영향을 받았다. 즉, 개발자는 타입을 명시하거나 타입스크립가 추론하도록 하는 방식 중에서 선택할 수 있다.

타입스크립트 vs 자바스크립트

타입 시스템 기능	자바스크립트	타입스크립트
타입 결정 방식	동적	정적
타입이 자동으로 변환되는가?	O	X
언제 타입을 확인하는가?	런타임	컴파일 타임
언제 에러를 검출하는가?	런타임(대부분)	컴파일 타임(대부분)

 

타입은 어떻게 결정되는가?

 동적 타입 바인딩이란 자바스크립트가 프로그램을 실행해야만 특정 데이터의 타입을 알 수 있음을 의미한다. 타입스크립트는 점진적으로 타입을 확인하는 언어다. 즉, 타입스크립트는 컴파일 타임에 프로그램의 모든 타입을 알고 있을 떄 최상의 결과를 보여줄 수 있지만, 프로그램을 컴파일하는 데 반드시 모든 타입을 알아야 하는 것은 아니다.

자동으로 타입이 변환되는가?

 자바스크립트는 약한 언어다. 유효하지 않은 연산을 수행하면 다양한 규칙을 적용해가며 개발자가 정말 의도한 바를 알아내려 노력하고, 주어진 정보로 최상의 결과를 도출한다. 반면 타입스크립트는 유효하지 않은 작업을 발견하는 즉시 불평한다. 같은 자바스크립트 코드를 TSC로 실행하면 다음처럼 에러가 발생한다.

3 + [1] ; // 에러 TS2365 : '+' 연산자를 '3'과 'number[]'타입에 적용할 수 없음
(3).toString() + [1].toString() // "31"로 평가

 올바르지 않아 보이는 연산을 수행하면 타입스크립트가 바로 그 부분을 지적하며, 의도를 명시해야 타입스크립트의 지적을 무사히 통과할 수 있다.

언제 타입을 검사하는가?

자바스크립트는 주어진 상황에서 개발자가 무엇을 의도하는지에 맞춰 변환하려 최대한 노력할 뿐 거의 대부분의 상황에서 타입이 무엇인지 따지지 않는다. 반면 타입스크립트는 컴파일 타임에 코드의 타입을 확인하기 떄문에 코드를 실행하지 않고도 이전 예제 코드에 에러가 있음을 바로 알 수 있다. 타입스크립트는 정적으로 코드를 분석해 이런 에러를 검출하여 코드를 실행하기도 전에 알려준다.

에러는 언제 검출되는가?

자바스크립트는 런타임에 예외를 던지거나 암묵적 형변환을 수행한다. 즉, 프로그램을 실행해야만 어떤 문제가 있음을 확인할 수 있다. 타입스크립트는 컴파일 타임에 문법 에러와 타입 관련 에러를 모두 검출한다. 실제 개발자가 코딩을 시작하면 코드 편집기가 이런 종류의 에러를 바로 보여준다.

2.3 코드 편집기 설정

 TSC 자체도 타입스크립트로 구현된 명령행 도구(이런 이유로 자체 호스팅 컴파일러 또는 자신을 컴파일하는 컴파일러라는 특별한 종류의 컴파일러가 된다)이므로 TSC를 실행하려면 NodeJS가 필요하다. NPM을 이용해 TSC와 TSLint(TypeScript Linter)를 설치한다.

# 새 디렉터리 생성
mkdir chapter-2
cd chapter-2

# 새 NPM 프로젝트 초기화 (프롬프트의 지시에 따름)
npm init

# TSC, TSLint, NodeJS용 타입 선언 설치
npm install --save-dev typescript tslint @types/node

2.3.1 tsconfig.json

모든 타입스크립트 프로젝트는 루트 디렉터리에 tsconfig.json이라는 파일이 존재해야 한다. tsconfig.json 파일은 타입스크립트의 프로젝트에서 어떤 파일을 컴파일하고, 어떤 자바스크립트 버전을 방출하는 지 등을 정의한다.( ./node_modules/.bin/tsc --init 이라는 타입스크립트의 내장 명령을 이용해 자동으로 설정할 수 있다.)

{
	"compilerOptions" : {
    	"lib": ["es2015"],
        "module": "commonjs",
        "outDir": "dist",
        "sourceMap: true,
        "strict": true,
        "target": "es2015"
    },
    "include": [
    	"src"
    ] 
}

옵션	설명
include	TSC가 타입스크립트 파일을 찾을 디렉터리
li	TSC가 코드 실행 환경에서 이용할 수 있다고 가정하는 API(ES5의 Fuction.prototype.bind, ES2015의 Object.assign, DOM의 document.querySelector 등)
module	TSC가 코드를 컴파일할 대상 모듈 시스템(CommonJS, SystemJS, ES2015 등)
outDir	생성된 자바스크립트 코드를 출력할 디렉터리
strict	유효하지 않은 코드를 확인할 떄 가능한 엄격하게 검사함. 이 옵셥을 이용하면 코드가 적절하게 타입을 갖추도록 강제할 수 있다. 이 책에서는 모든 경우에 strict 옵션을 적용하므로 프로젝트에도 이 옵션을 사용하도록 권장한다.
target	TSC가 코드를 컴파일할 자바스크립트 버전(ES3, ES5, ES2015 등)

 위 표는 tsconfig.json이 지원하는 옵션 중 일부만 나열했으며 언제든 새로운 옵션을 추가할 수 있다. 실무에서는 이 옵션들을 자주 바꿀 일은 없다. 다만 새로운 번들러를 추가하거나, 브라우저용 타입스크립트를 작성하기 위해 "dom"을 lib에 추가하거나, 자바스크립트 코드를 타입스크립트로 마이그레이션할 때 엄격함의 수준을 조절하는 상황 등에서는 옵션 설정을 바꿔야 한다.

 tsconfig.json 파일을 이용해 간편하게 소스 버전 관리 시스템에 설정을 포함할 수 있고, 명령행을 이용해 TSC의 옵션 대부분을 제어하는 방법도 있다.

2.3.2 tslint.json

보통 프로젝트는 TSLint 설정을 정의하는 tslint.json 파일도 포함된다. ./node_modules/.bin/tslint -init 으로 기본값으로 채워진 파일을 만들 수 있다. 그리고 만들어진 파일을 자신의 코딩 스타일에 맞게 편집할 수 있다.

{
	"defaultSeverity": "error",
    "extends": [
    	"tslint:recommended"
    ],
    "rules" : {
    	"semiconlon": false,
        "trailing-comma": false
    }
}

2.4 index.ts

 tsconfig.json, tslint.json 파일을 설정했으면 타입스크립트 파일을 추가한다.

mkdir src
touch src/index.ts

이후 index 파일에 코드을 입력한다!

• 이는 백지상태에서 설정해본 경험이 없다고 가정하고 각 단계를 차근차근 설명했다. 다음부터는 프로젝트를 더 빠르게 설정할 수 있는 여러 방법을 이용할 수 있다.
• ts-node를 설치한다. 이를 이용하면 명령 한 번으로 타입스크립트를 컴파일하고 실행할 수 있다.
• typescript-node-starter 같은 뼈대 제공 도구를 이용해 프로젝트 디렉터리 구조를 빠르게 생성할 수 있다.