타입스크립트 프로그래밍 EP.02 | 타입스크립트: 3,000미터 상공에서 내려다보기

📚 타입스크립트 프로그래밍 EP.02 | 타입스크립트: 3,000미터 상공에서 내려다보기

---

EP.02 | 타입스크립트: 3,000미터 상공에서 내려다보기

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

2.1 컴파일러

1. 프로그램은 프로그래머가 작성한 다수의 텍스트 파일로 구성된다.

2. 이 텍스트를 컴파일러(compiler) 라는 특별한 프로그램이 파싱하여 추상 문법 트리(abstract syntax tree, AST)라는 자료구조로 변환한다. (AST는 공백, 주석, 그리고 개발자들이 즐겨 논쟁하는 탭이냐 공백이냐 등의 결과를 완전히 무시한다.)

3. 그리고 컴파일러는 다시 AST를 바이트코드(bytecode) 라는 하위 수준의 표현으로 변환한다.

4. 바이트코드가 만들어졌으면 런타임(runtime) 이라는 다른 프로그램에 바이트코드를 입력해 평가하고 결과를 얻을 수 있다.

즉 프로그램을 시행한다는 것은 컴파일러가 소스 코드를 파싱해 AST로 만들고, 다시 AST를 바이트 코드로 변환 한것을 런타임이 평가하도록 지시한다는 의미이다.

타입스크림트가 다른 언어와 다른 점은 컴파일러가 코드를 바이트코드 대신 자바스크립트 코드로 변환한다는 점이다.

타입스크립트는 코드를 더 안전하게 만든다고 했는데, 언제 안전해지지? 🤔
타입스크립트 컴파일러는 AST를 만들어 결과 코드를 내놓기 전에 타입 확인을 거친다.

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

✅ 보통 자바스크립트 컴파일러와 런타임은 엔진이라는 하나의 프로그램으로 합쳐진다.
프로그래머는 주로 이 엔진과 상호작용한다. V8(NodeJs, 크롬, 오페라), 스파이어몽키(파이어폭스), JSCore(사파리), 샤크라(엣지) 등이 이처럼 동작하며 자바스크립트가 해석되는(interpreted) 언어의 모습을 갖게 만든다.

---

2.2 타입 시스템

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

타입 시스템은 보통 두 가지 종류, 즉 어떤 타입을 사용하는지를 컴파일러에 명시적으로 알려주는 타입 시스템과 자동으로 타입을 추론하는 타입 시스템으로 구분된다.

타입스크립트는 두 가지 시스템 모두의 영향을 받았다. 즉 개발자는 타입을 명시하거나 타입스크립트가 추론하다록 하는 방식 중에서 선택할 수 있다.

이노테이션은 'value: type' 형태로 쓰이며 타입 검사기에 타입을 알려주는 역할을 한다.

let a:number = 1; // a는 number

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

🟡 자바스크립트 🟡

• 타입 결정 방식이 동적이다.
• 타입이 자동으로 변환된다.
• 런타임에 타입을 확인한다.
• 대부분 런타임 시 에러를 검출한다.

🔵 타입스크립트 🔵

• 타입 결정 방식이 정적이다.
• 대부분 타입이 자동으로 변환되지 않는다.
• 컴파일 타임에 타입을 확인한다.
• 대부분 컴파일 타임 시 에러를 검출한다.

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

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

자바스크립트는 프로그램을 실행하기 전에는 타입을 알 수 없다.
타입스크립트는 점진적으로 타입을 확인하는(gradually typed) 언어다.

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

자바스크립트는 약한 타입(weakly typed) 언어다. 숫자와 배열을 더하는 유효하지 않은 연산을 수행하면 다양한 규칙을 적용해가며 개발자가 정말 의도한 바를 알아내려 노력하고, 주어진 정보를 최상의 결과로 도출한다.

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

자바스크립트가 제공하는 이런 종류의 암묵적 변환 때문에 문제의 원인을 추적하기가 어렵고, 이는 자바스크립트 프로그래머의 골칫거리다.

✔️ 언제 타입을 검사하는가?

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

타입스크립트는 정적으로 코드를 분석해 이런 에러를 검출하여 코드를 실행하기도 전에 알려준다. 코드가 컴파일 되지 않는 다는 사실은 개발자가 실수를 저질렀음을 뜻하므로 코드를 실행하기 전에 실수를 바로잡을 수 있는 좋은 기회가 된다.

✔️ 에러는 언제 검출 되는가?

자바스크립트는 런타임에 예외를 던지거나 암묵적 형변환을 수행한다. 즉, 프로그램을 실행해야만 어떤 문제가 있음을 확인할 수 있다.

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

---

2.3 코드 편집기 설정

2.3.1 tsconfig.json

모든 타입스크립트 프로젝트는 루트 디렉터리에 tsconfig.json이라는 파일이 존재해야 한다.

tsconfig.json 파일은 타입스크립트의 프로젝트에서 어떤 파일을 컴파일하고, 어떤 자바스크립트 버전으로 방출하는지 등을 정의한다.

2.3.1 tslint.json

보통 프로젝트는 TSLint 설정(탭을 사용할지 공백을 사용할지 등을 결정하는 코딩 스타일 규약)을 정하는 tslint.json파일도 포함한다.