[TypeScript] 타입스크립트 개론

TypeScript란

TypeScript(이하 타입스크립트)는 2012년에 마이크로소프트의 개발자이자 C#의 창시자로도 유명한 Anders Hejlsberg의 손에서 처음 탄생했다.

타입스크립트는 현재 자바스크립트 프로그래머들 사이에서 굉장히 선풍적인 인기를 끌고 있고, 현재로서는 피할 수 없는 대세라고 해도 무방할 정도로 인기가 매우 대단하다. 특히나 프론트엔드 취업시장에서 주요 기업들의 채용 공고의 우대 사항에는 타입스크립트가 늘 빠지지 않고 등장하고 있는 추세이다.

이렇게 인기가 많은 타입스크립트는 도대체 어떤 언어일까?

타입스크립트는 자바스크립트의 확장판

사실 타입스크립트는 자바스크립트와 완전히 다른 언어가 아니다. 타입스크립트는 기존의 자바스크립트를 더 안전하게 사용할 수 있도록 타입과 관련된 여러가지 기능들을 추가한 언어다. 즉, 타입스크립트는 자바스크립트의 확장판이라고 부를 수 있다.

JavaScript	TypeScript

위 두 코드의 차이를 살펴보면 왼쪽의 자바스크립트 코드에서는 변수를 선언할 때 변수의 타입까지 지정하지는 않는다. 자바스크립트에서는 변수의 타입을 프로그래머가 직접 정의할 수 있는 방법이 없기 때문이다.

하지만 오른쪽의 타입스크립트 코드에서는 변수의 이름 뒤에 콜론과 함께 이 변수의 타입을 정의할 수 있다. 위 코드의 경우 변수 a와 b 모두 number, 숫자 타입을 갖도록 정의를 했고, 이렇게 하면 이 변수들에는 숫자값 이외에는 넣을 수가 없게 된다. 즉, 변수의 타입을 고정하게 된다.

이렇듯 우리가 원래 사용하던 자바스크립트 코드에서 타입을 정의하는 문법만 딱 추가하면 타입스크립트 코드가 된다.

왜 타입을 추가했을까?

자바스크립트에서 굳이 타입이라는 기능을 추가해서 타입스크립트를 만들어서 사용하게 되었는지를 알아보기 위해서는 자바스크립트 언어의 목적을 알아야 한다.

자바스크립트는 웹 브라우저에서만 동작하도록 만들어 졌고 또 아주 간단한 사용자 상호작용을 처리하기 위해 만들어졌다. 쉽게 말해서 그냥 웹사이트에서 우리가 버튼을 클릭하면 경고창 띄워주는 정도의 상호작용을 만들기 위해 개발된 언어라는 것이다.

따라서 자바스크립트는 굳이 엄격한 문법을 갖출 필요가 없었고, 그만큼 아주 유연하게 설계되었다. 버그로부터의 안정성이나 견고함은 일부 포기하는 대신 프로그래머가 쉽고 빠르고 간결하게 코드를 작성하는데에 중점을 두고 만들어졌다. 간결한 프로그램을 만들고, 웹 브라우저에서만 동작하기 위해서 말이다.

하지만, 자바스크립트의 런타임 환경인 Node.js가 등장하면서 웹 브라우저에서만 실행할 수 있었던 자바스크립트를 이제는 어디서든 실행할 수 있게 되었다. 이 말은 곧 어떤 프로그램이든 자바스크립트를 이용해 만들 수 있다는 이야기가 된다. 그러자 기존에 자바스크립트를 만족스럽게 사용하던 프로그래머들이 자바스크립트를 이용해 다양한 프로그램을 만들기 시작했다.

웹 서버를 개발하는 것부터 시작해서, 모바일 어플리케이션을 만들거나 데스크탑 어플리케이션을 만드는데에도 활용되었다. 그런데 이렇게 복잡한 대규모 어플리케이션을 자바스크립트로 개발하다 보니까 한가지 문제가 있었는데, 바로 자바스크립트가 엄격하지 않고 너무 유연하다는 점이었다. 이제는 자바스크립트가 인기가 너무 많아져서 간단하지 않은 아주 복잡한 프로그램을 만드는데까지 활용되니 오히려 이 유연함이 프로그램의 안정성을 떨어뜨리는 단점이 되어 버린 것이다.

이러한 자바스크립트의 문제점을 극복하기 위해서 자바스크립트의 기존 문법들과 매력은 그대로 유지한 채 안정성만 추가로 확보한 새로운 언어가 필요해졌다. 이러한 배경에서 자바스크립트를 더 안전하게 사용할 수 있도록 타입에 관련된 여러가지 기능을 추가한 타입스크립트가 등장하게 된 것이다.

결론적으로, 타입스크립트는 더 복잡한 상황에서 더 대규모의 프로그램을 만들기 위해 자바스크립트를 안정적으로 사용할 수 있도록 타입이라는 안전장치를 하나 추가한 언어라고 이해할 수 있다.

타입 시스템이란?

타입 시스템이란 언어에서 사용할 수 있는 아주 여러가지 값들의 타입을 ‘어떠한 기준으로 묶어서’ 정할지, 코드의 타입을 ‘언제 검사할지’ 또 ‘어떻게 검사할지’ 등 우리가 프로그래밍 언어를 사용할 때 타입과 관련해서 지켜야하는 규칙들을 모다운 체계이다. 쉽게 말해 타입 시스템은 언어의 타입 관련된 문법 체계라고도 볼 수 있다.

타입 시스템은 크게 두 가지로 나눌 수 있는데, 하나는 코드 실행 전에 모든 변수의 타입을 고정적으로 결정해야 하는 정적 타입 시스템이 있고, 다른 하나는 코드를 실행하기 전에는 타입을 결정하지 않고 코드를 실행하고 나서 그때그때마다 유동적으로 변수의 타입을 결정하는 동적 타입 시스템이 있다. 쉽게 말해 정적 타입 시스템은 엄격, 근엄, 진지, 고정적인 시스템 시스템이라고 볼 수 있고, 동적 타입 시스템은 반대로 자유롭고 유연한 시스템이라고 볼 수 있다.

동적 타입 시스템

자바스크립트는 동적 타입 시스템을 사용하기 때문에 미리 변수에 타입을 설정하지 않아도 되고, 현재 변수에 담긴 값에 따라서 변수의 타입이 동적으로 계속해서 달라진다. 즉, 변수에 아무 타입의 값이나 자유롭게 담을 수 있다. 이는 유연함을 제공하지만 큰 단점 또한 제공한다.

let a = "hello";
a = 19981014;

a.toUpperCase();

위 코드의 toUpperCase는 문자열에만 사용할 수 있는 메소드다. 하지만 변수 a에는 지금 숫자가 담겨있기 때문에 당연히 오류가 발생한다. 하지만 문제는 이 코드가 실행은 되지만 오류가 발생하고, 비정상적으로 종료된다는 것이다. 복잡한 프로그램을 만들 수록 이러한 특징은 오류가 실행과 동시에 발생하지 않거나, 예상하지 못하게 프로그램이 종료되거나, 오류의 원인을 알 수 없는 등의 문제를 초래한다.

정적 타입 시스템

정적 타입 시스템은 코드를 실행하기 전에 모든 변수의 타입을 결정한다. 변수를 선언함과 동시에 타입도 함께 명시해 주어야 하기 때문에 정해진 타입 외의 값을 줄 수도, 타입에 맞지 않는 메소드를 사용하거나, 연산이 불가한 타입끼리 연산을 할 경우 코드의 실행 전에 타입 오류를 보여준다.

이렇듯 정적 타입 시스템은 타입 관련 오류가 있으면 에디터 상에서 애초에 오류를 바로 알려주고, 실행되기 전에 타입을 잘못 쓰지 않았는지 검사까지 모두 마친 후에 실행되기 때문에 오류가 있다면 애초에 실행이 불가능하다.

하지만 정적 타입 시스템은 모든 변수에 일일히 타입을 다 정의해야하기 때문에 매우 귀찮고 코드의 양이 상당히 늘어난다는 단점을 갖고있다.

점진적 타입 시스템 (TypeScript)

타입스크립트는 동적 타입 시스템과 정적 타입 시스템을 혼합한 듯한 독특한 타입 시스템을 사용한다.

타입스크립트는 마치 정적 타입 시스템 처럼 변수의 타입을 코드 실행 전에 결정하고 타입 오류가 없는지 프로그램 실행전에 코드를 검사한다. 또한 동적 타입 시스템처럼 모든 변수에 일일이 직접 타입을 명시하지 않아도 된다.

위 코드처럼 변수의 타입을 직접 정의하지 않아도 변수에 담기는 초기값을 기준으로 자동으로 타입을 추론한다.

이러한 타입 시스템을 “점진적으로 타입을 결정한다” 라고 하여 점진적 타입 시스템(Gradual Type System) 이라고 한다.

지금까지 배운 내용을 정리하면 다음과 같다.

---

TypeScript의 동작 원리

대다수의 프로그래밍 언어는 컴퓨터가 이해할 수 있는 바이트코드나 기계어, 이진수와 같은 단순한 형태의 해석하기 쉬운 형태로 변환하는 과정을 거친다. 이를 ‘변환한다’ 라고 하여 컴파일(Compile)이라고 부른다. 이렇게 컴파일하는 놈을 컴파일러라고 부른다.

JavaScript를 컴파일할 경우 최종적으로 바이트코드라는 형식으로 변환된다. 하지만 컴파일러가 곧바로 바이트코드로 변환하는 것은 아니고, 그 전에 AST(추상 문법 트리) 라는 특별한 형태로 먼저 변환한다. AST는 코드의 공백이나 주석, 탭 등 코드 실행에 관계없는 요소들을 모두 제거하고 트리 형태의 자료구조에 코드를 쪼개어서 저장해놓은 형태를 말한다. 즉, JavaScript 코드가 AST로, AST가 바이트코드로 변환되고, 이 바이트 코드를 컴퓨터가 실행하는 것이다.

타입스크립트도 마찬가지로 우선 AST로 컴파일된다. 하지만 그 다음 AST를 바이트코드로 바로 변환하는 것이 아니라 이 AST를 보고 코드 상에 타입 오류가 없는지 검사하는 타입 검사가 수행된다. 코드에 타입 오류가 있다면 타입 검사가 실패하고 컴파일이 중단된다. 타입 오류가 없는 정상적인 코드라면 AST를 바이트코드가 아니라 자바스크립트 코드로 변환한 후 컴파일을 종료한다.

여기서 중요한 부분은 타입스크립트 코드의 컴파일 과정에 타입 검사가 포함되어 있기 때문에 타입스크립트 코드를 컴파일해서 생성한 자바스크립트 코드는 타입 검사를 통과한 타입 오류가 발생할 가능성이 낮은 안전한 자바스크립트 코드라는 것이다.

정리하자면, 결국 타입 스크립트는 컴파일 결과 타입 검사를 거쳐 자바스크립트 코드로 변환되는데 이때 만약 코드에 오류가 있다면 컴파일 도중 실패하게 되므로 자바스크립트를 보다 더 안전하게 사용하는 미리 한번 코드를 검사하는 용도로 사용된다고 볼 수 있다.

출처

위 포스트는 이정환 님의 인프런: 한 입 크기로 잘라먹는 타입스크립트(TypeScript)를 수강한 뒤 복습 차원에서 저의 생각을 정리 및 추가하여 업로드했음을 알립니다.