[타입스크립트 프로그래밍 review] 2장 타입스크립트: 3,000미터 상공에서 내려다보기

타입스크립트에 관해 궁금하던 찰나 <<타입스크립트 프고그래밍>>이 입문자가 시작하기에 예시도 많고 설명이 친절하다고 해서 이 책으로 타임스크립트 입문에 도전하고자 한다.

---

목차

2.1 컴파일러
2.2 타입 시스템
2.3 코드 편집기 설정
2.4 index.js

---

2.1 컴파일러

타입스크립트는 다른 언어와 달리 컴파일러가 코드를 바이트코드 대신 자바스크립트 코드로 변환한다. 이후로는 일반적인 자바스크립트 코드를 실행하듯이 브라우저, NodeJS 등으로 실행할 수 있다.

타입스크립트 컴파일러는 AST를 만들어 결과 코드를 내놓기 전에 타입 확인을 거친다. 타입 확인 덕분에 타입스크립트는 프로그램이 개발자의 기대대로 실행될 수 있게 해주고, 명백한 실수가 들어가지 않게 방지해준다.

타입 검사기(typechecker)

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

타입 확인과 자바스크립트 방출 부분을 포함하면 타입스크립트 컴파일 과정은 대략 아래와 같다.

과정 1~3은 TSC가 수행하며, 과정 4~6은 브라우저, NodeJS, 기타 자바스크립트 엔진 같은 자바스크립트 런타임이 실행한다.

과정 1~2에서 소스 코드에 사용된 타입을 이용하지만, 과정 3에서는 이용하지 않는다. 다시 말해, TSC가 타입스크립트 코드를 자바스크립트 코드로 컴파일할 때는 개발자가 사용한 타입은 확인하지 않는다.(개발자가 사용한 타입은 단지 타입을 확인하는 데만 쓰인다는 뜻)

 

2.2 타입 시스템

타입 시스템(type system)

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

타입 시스템은 보통 두 가지 종류. 타입스크립트는 두 가지 시스템 모두의 영향을 받는다.(즉, 개발자는 타입을 명시하거나 타입스크립트가 추론하도록 하는 방식 중에서 선택할 수 있음)

1. 어떤 타입을 사용하는지를 컴파일에 명시적으로 알려주는 타입 시스템: 어노테이션 사용

// 어노테이션은 'value: type' 형채로 쓰임

let a: number = 1  // a는 number
let b: string = 'hello'  // b는 string
let cL boolean[] = [true, false]  // c는 boolean 배열

2. 자동으로 타입을 추론하는 타입 시스템: 어노테이션 사용 X
- 타입스크립트가 타입을 추론하도록 두는 것이 코드를 줄일 수 잇는 방법이므로 보통 이노테이션은 생략함

let a = 1  // a는 number
let b = 'hello'  // b는 string
let c = [true, false]  // c는 boolean 배열

2.2.1 타입스크립트 VS 자바스크립트

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

동적 타입 바인딩(dynamic type binding)이란 자바스크립트가 프로그램을 실행해야만 특정 데이터 타입을 알 수 있음을 의미한다. 자바스크립트는 프로그램을 실행하기 전에는 타입을 알 수 없다.

타입스크립트는 점진적으로 타입을 확인하는(gradually typed) 언어다. 즉, 타입스크립트는 컴파일 타임에 프로그램의 모든 타입을 알고 있을 때 최상의 결과를 보여줄 수 있지만, 프로그램을 컴파일하는 데 반드시 모든 타입을 알아야 하는 것은 아니다.
타입스크립트는 타입을 지정하지 않은 프로그램이라도 그중 일부 타입을 추론해서 오류를 검출할 수 있지만, 모든 타입을 알지 못하는 상황에서는 많은 오류가 사용자에게 그대로 노출될 수 있다. 

점진적 타입 확인은 타입을 지정하지 않은 기존 자바스크립트 코드를 타입을 사용하는 타입스크립트로 마이그레이션할 때 특히 유용.(하지만 코드를 마이그레이션하는 상황이 아니라면 모든 코드의 타입을 컴파일 타임에 지정하는 것을 목표로 해야함)

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

자바스크립트는 타입을 변환하려 노력한다.
예를 들어 3 + [1] 의 경우, 자바스크립트는 개발자가 +를 사용했으므로 개발자 두 값을 연결하고 싶어 한다고 생각해 3을 문자열 "3"으로, [1]을 문자열 "1"로 암묵적인 변환을 시행해 두 문자열을 붙여 "31"이라는 결과를 도출함.

반면 타입스크립트는 유효하지 않은 작업을 발견하는 즉시 불평한다.(에러를 발생시킨다는 뜻) 올바르지 않아 보이는 연산을 수행하면 타입스크립트는 바로 그 부분을 지저가며, 의도를 명시해야 타입스크립트의 지적을 무사히 통과할 수 있다. 

자바스크립트의 그런 암묵적 변환 때문에 문제의 원인을 추적하기 어렵기 때문에 타입을 변환할 때는 명시적으로 해야 한다.

3) 언제 타입을 검사하는가?

자바스크립트의 경우 주로 개발자의 의도에 맞게 변환시킬 뿐 대부분의 상황에서 타입이 무엇인지 따지지 않는다. 

반면 타입스크립트의 경우 컴파일 타임에 코드의 타입을 확인하기 때문에 정적으로 코드를 분석해 이런 에러를 검출하여 코드를 실행하기도 전에 알려준다. 

4) 에러는 언제 검출되는가?

자바스크립트는 런타임에 예외를 던지거나 암묵적인 형변환을 수행하기 때문에 프로그램을 실행해야만 어떤 문제가 있음을 확인할 수 있다. (운 좋으면 단위 테스트 실행하다가 발견할 수도)

타입스크립트의 경우 컴파일 타임에 문법 에러와 타입 관련 에러를 모두 검출한다.

 

2.3 코드 편집기 설정

난 VSCode를 사용하기 때문에 VSCode를 사용할 거다. 이외의 코드 편집기로 아톰(Atom), 서브라임 텍스트(Sublime Text) 등을 선택할 수 있다. (본인에게 편한 걸로 선택하면 됨)

TSC 자체도 타입스트립트로 구현된 명령행 도구이므로 TSC를 실행하려면 NodeJS가 필요하다. NodeJs는 프로젝트의 의존성이나 빌드를 관리하는 패키지 관리자 NPM을 포함한다. NPM을 이용해 TSC와 TSLint(TypeScript Linter; 타입스크립트 린터)를 설치한다. 

터미널 창을 열어 새 디렉터리를 만들고 그 안에 새 NPM 프로젝트를 초기화해보자.

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

# 새 NPM 프로젝트 초기화 (프롬프트의 지시에 따름, 질문 없이 시작하고 싶으면 npm init -y)
npm init

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

2.3.1 tsconfig.json

모든 타입스크립트 프로젝트는 루트 디렉터리에 tsconfig.json이라는 파일이 존재해야 한다. tsconfig.json 파일은 타입스크립트의 프로젝트에서 어떤 파일을 컴파일하고, 어떤 자바스크립트 버전으로 방출하는지 등을 정의한다.

루트 디렉터리에 tsconfig.json이라는 파일을 만들고(터미널에 touch tsconfig.json 입력 or VSCode 열어서 파일 선택해서 제일 상위 폴더에 tsconfig.json 직접 만들기) 아래와 같은 내용을 입력한다.

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

예제에서는 tsconfig.json 파일을 직접 만들었지만 다음부터는 ./node_modules/.bin/tsc --init라는 타입스크립트의 내장 명령을 이용해 타입스크립트 프로젝트를 자동으로 설정할 수 있음.

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

2.3.2 tslint.json

보통 프로젝트는 TSLint 설정(탭을 사용할지 공백을 사용할 지 등을 결정하는 코딩 스타일 규약)을 정의하는 tslint.json 파일도 포함한다. (선택 사항이긴 한데 모든 타입스트립트 프로젝트에 TSLint를 이용해 일관된 코딩 스타일을 사용하도록 강력히 권장함)

다음은 기본값으로 채워진 tslint.json 파일을 만드는 명령이다.

./node_modules/.bin/tslint --init

그리고 만들어진 파일을 자신의 코딩 스타일에 맞게 편집할 수 있다. 아래는 책의 저자의 tslint.json 파일 내용이다.

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

 

2.4 index.ts

tsconfig.json 파일과 tslint.json 파일을 설정했으면 index.ts 파일을 추가해보자.

mkdir src
touch src/index.ts

생성된 index.ts 파일에 아래와 같은 타입스크립트 코드를 입력한다.

console.log("Hello TypeScrit!")

타임스크립트 코드를 컴파일하고 실행하자.

# TSC로 타입스크립트 컴파일
./node_module/.bin/tsc
# NodeJs로 코드 실행
node ./dist/index.js

 
위의 단게를 제대로 따라 했다면 코드를 실행했을 때 콘솔에 다음과 같은 한 줄의 로그가 출력된다.
Hello TypeScript!