[TypeScript] 타입 스크립트의 등장과 동작 원리

JS의 약점과 TS의 등장

모든 프로그래밍 언어에는 '타입 시스템'이 존재한다.

타입 시스템이란 값들을 어떤 기준으로 묶어 타입을 규정할 것인지, 코드의 타입을 언제 어떻게 검사할 것인지와 같이 언어의 타입과 관련된 규칙들을 모아둔 체계를 말한다. 이런 타입 시스템은 크게 정적 타입 시스템과 동적 타입 시스템 2가지로 구분된다.

 

정적 타입 시스템은 C, JAVA와 같이 코드 실행 이전에 모든 변수의 타입을 '고정적으로' 결정해야 한다.

따라서 동적 타입 시스템보다 엄격하며, 모든 변수에 타입을 지정해야 하다 보니 타이핑 양이 매우 증가한다는 단점이 있다.

 

반대 개념인 동적 타입 시스템으로는 Python, JS가 있다. 동적 타입 시스템은 코드를 실행하고 나서 유동적으로 변수의 타입을 결정할 수 있다. JS 유저라면 알겠지만, 변수를 선언한 후 변수의 타입이 하나로 고정되는 것이 아니라 재할당을 통해서 다른 타입의 값을 가질 수도 있다. 매우 유연하지만, 그렇기 때문에 오류가 발생할 확률이 높아진다.

 

let a = 'hello'; // 문자열
a = 19970718; // 숫자
a.toUpperCase(); // error

 

위 코드와 같이 문자열 값을 갖고 있는 변수 a에 숫자 값이 새로 할당되었다.

변수 a가 숫자 값을 갖고 있는데 여기에 모르고 문자열에 쓸 수 있는 메서드를 사용해버렸다.

 

이런 경우 JS에서는 a.toUpperCase is not a function 이라는 타입 에러가 발생한다. 타입 에러가 발생하긴 하지만 실행 자체가 안되는 것은 아니다. 그런데 어차피 에러가 발생할 코드라면, 문제였던 타입을 처음부터 검사해 실행이 되지 않는 게 유저한테 더 좋지 않을까? 지금은 이렇게 짧은 코드라 바로 에러를 확인할 수 있지만, 만약에 코드가 매우 길고 복잡해졌다면 이게 어디서 에러가 났는지 바로 알기 어려울 것이기 때문이다.

 

결론적으로 JS는 매우 자유성이 높은 언어지만 그만큼 에러가 발생할 확률이 높다. 이 에러를 잡기 위해서는 타입이 지금보다 엄격하면 좋을 것 같다. 그래서 정적 타입 언어처럼 타입이 정해져 있어 에러가 발생할 확률을 낮추면서도, 동적 타입 언어처럼 타입을 지정하지 않은 변수의 경우에는 언어가 타입을 알아서 체크해줄 수 있는, 장점만 쏙 빼온 TypeScript가 탄생했다고 볼 수 있다.

---

TS = 동적 타입 언어 + 정적 타입 언어

TS는 동적 타입 언어처럼 변수 타입을 실행 전에 결정한다.

아래 코드는 변수 a의 타입을 숫자로 지정한 것이다. 그래서 문자열 메서드를 쓸 때 에러가 발생한다.

let a: number = 1;
a.toUpperCase(); // error

 

그러면서도 모든 변수에 타입을 일일이 지정하지 않아도 된다.

아래 코드처럼 숫자 값으로 변수 a가 초기화 되었으므로 a는 숫자 타입일 것이라고 TS가 추론하는 것이다.

이를 점진적 타입 시스템(Gradual Type System)이라고 한다.

let a = 1;
a.toUpperCase(); // error

---

TS의 동작 원리

컴퓨터가 CPU에서 명령을 처리할 때 사용하는 언어는 0과 1로만 이뤄진 기계어다. 컴퓨터처럼 0과 1로만 복잡한 코드를 작성하는 것은 인간에게 매우 매우 힘든 일이므로, 사람의 언어와 기계어의 사이에는 중간 다리 역할을 해줄 수 있는 언어가 필요하다. (사람의 언어에 가까울수록 고수준 언어, 기계어에 가까울수록 저수준 언어라고 한다.) 

 

고수준 언어는 크게 컴파일 언어와 인터프리터 언어로 나뉜다. 컴파일 언어는 프로그래밍을 마친 뒤 전체 코드를 미리 기계어로 컴파일한 다음 실행 파일을 만들어 실행하고, 인터프리터 언어는 한 줄 한 줄 통역을 하면서 코드를 실행한다.

 

JS는 대표적인 인터프리터 언어, TS는 컴파일 언어다.

JS는 AST(추상 문법 트리)를 거쳐 바이트 코드로 변환된다. 

 

TS는 코드를 먼저 AST로 바꾼 후 타입 검사를 실시한다.

이 때 검사가 실패하면 컴파일이 종료되고, 검사가 성공하면 AST를 최종적으로 JS로 변환한다.

그래서 TS로 코드를 짜서 문제가 없다면 동명의 JS 파일이 생성되는 것이다.

생성된 JS 파일에는 TS 파일에 작성했던 타입과 관련된 코드들이 모두 사라지게 된다.

---

 **출처: 한 입 크기로 잘라먹는 타입스크립트 (인프런, 이정환 강사님)