프론트엔드 개발자를 꿈꾸는 예비 개발자들도 웹 프론트엔드 개발은 HTML,css, JavaScript만 사용이 가능하다는 것을 알고있다. 그런데 타입스크립트는 또 무엇일까..
1. TypeScript는 무엇인가?
자바스크립트는 과거 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어졌기 때문에 단점을 가지고 있다. C나 Java와 같은 언어와는 구별되는 아래와 같은 특징이 있다. 예전에 js가 무시당했던 이유일까?
- Prototype-based Object Oriented Language
- Scope와 this
- 동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosely typed) 언어
이와 같은 특징은 클래스 기반 객체지향 언어(Java, C++, C# 등)에 익숙한 개발자를 혼란스럽게 하며 코드가 복잡해질 수 있고 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있다.
TypeScript 자바스크립트 대체 언어의 하나로써 자바스크립트(ES5)의 Superset(상위확장)이다.
TypeScript는 ES5의 Superset이므로 기존의 자바스크립트 (ES5)문법을 그대로 사용할 수 있다. 또한, ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행할 수 있다.
구글은 사내 표준 언어(Canonical Languages)로 TypeScript를 사용한다.
2. 타입 안정성
자바스크립트에서 타입스크립트로 대세가 넘어가는 이유 중 가장 큰 비중을 차지하는 것이라고 생각된다.
앞에서 말했듯이 js는 c나 자바와 같은 언어와는 다르게 동적타입언어 이기 때문에 자유도가 높지만 안정성이 매우 낮다.
다음 예들을 살펴보자.
- 숫자와 리스트 곱하기
- 객체에 존재하지 않는 멤버 함수를 호출하기
- 객체 리스트를 인수로 받는 함수에 문자열 리스트를 인수로 전달해서 호출하기
이 모두 유효하지 않은 동작들이다.
3 + []; // 문자열 '3'으로 평가
let obj = {};
obj.foo // undefined
function func(a){
return a/2;
}
func('z'); // NaN자바스크립트는 이러한 경우에 에러를 던지지 않고 최선을 다해 결과를 도출한다.
위와 같은 실수들을 개발자가 알아차릴 수도 있지만 문제는 실행을 시켜야 확인할 수 있다는 점이다. 그런데 타입스크립트를 사용한다면 편집기에 코드를 입력하는 순간 곧바로 에러 메세지를 발생시킨다
let obj = {};
obj.foo; // 에러 TS2339 : '{}' 타입에 'foo' 프로퍼티가 존재하지 않음
func('z'); // 에러 TS2345 : 'number' 타입의 매개 변수에 'z'라는 인수 타입을 할당할 수 없다.3. TSC(TypeScript Compiler)
3.1 컴파일러
프로그램은 개발자가 작성한 다수의 텍스트 파일로 구성된다. 이 텍스트를 컴파일러가 파싱하여 AST라는 자료구조로 변환한다.
그리고 컴파일러는 다시 AST를 바이트코드라는 low-level 언어로 변환한다.
바이트코드가 만들어졌으면 런타임에 바이트코드를 입력해 평가하고 결과를 얻는다.
요약해보면 대부분의 프로그래밍 언어가 다음과 같이 동작한다.
- 프로그램이 AST로 파싱됨.
- AST가 바이트코드로 변환됨.
- 런타임이 바이트코드를 평가한다.
✏️ 타입스크립트가 다른 언어와 가장 큰 차이를 가지는 것은 컴파일러가 코드를 바이트코드 대신 자바스크립트 코드로 변환한다는 점이다.
타입스크립트의 동작
- 타입스크립트 소스가 평가되어 AST로 파싱됨.
- 타입 검사기가 AST를 확인하여 타입 안정성을 검증한다.
- AST가 자바스크립트 코드로 변환된다.
📌 다시 말해, 개발자가 코드에 기입한 타입 정보는 최종적으로 만들어지는 프로그램에 아무런 영향을 주지 않고 단지 타입을 확인하는 데만 쓰인다는 뜻이다.
| 타입 시스템 기능 | 자바스크립트 | 타입스크립트 |
| 타입 결정 방식 | 동적 | 정적 |
| 언제 타입을 확인하는가? | 런타임 | 컴파일 타임 |
| 언제 에러를 검출하는가? | 런타임(대부분) | 컴파일 타임(대부분) |
지금까지 타입스크립트의 필요성(?)과 자바스크립트와의 차이점에 대해서 알아보았다. 다음 챕터에서는 실제로 코드를 보면서 알아보자.
