타입스크립트란?
자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 오픈소스 언어이다.
자바스크립트의 확장판이라고 해도 무방하다.
타입스크립트를 왜 써야할까?
리액트를 공부하면서 자바스크립트를 많이 사용해보았다.
전공 공부를 하며 Python, C++, JAVA와 같은 언어들을 배워보았는데, 비교적 입문하기 쉬운 편에 속한다고 생각한다.
(물론 깊이 들어가면 들어갈수록 모든 언어가 어렵다...🥹)
Node.js는 자바스크립트의 런타임 환경으로, 이를 이용해 자바스크립트 코드를 읽어서 실행할 수 있다.
웹브라우저 뿐만 아니라 어디서든 자바스크립트를 통해 구동이 가능해졌다.
지금도 웹서버나 앱, 데스크탑 앱 등을 만드는데 활용되고 있다.
그런데 복잡한 상황이나 대규모 프로그램에서 발생하는 문제가 있었다. 왜일까?
자바스크립트는 비교적 쉽고 간단하게 사용 가능하지만, 이 장점이 안정성에 문제를 일으키기도 했기 때문이다.
자바스트립트의 한계점
모든 프로그래밍 언어는 타입 시스템이 존재한다.
int(정수), bool(불리언), string(문자열).. 앞서 설명한 파이썬이나 c도 모두 그러하다.
하지만 자바스크립트는 어떠한가?
let이나 const을 이용해서 변수를 정의할 수 있지만, 그게 전부이다.
위 사진의 코드에서 a라는 변수는 첫번째 줄에서 문자열 타입이다.
하지만 두번째줄에서는 다시 숫자를 할당했기 때문에 동적으로 정수 타입으로 변경된다.
이 상태에서 toUpperCase 함수를 호출하면, 대문자로 바꿀 수 없기 때문에 에러가 발생한다.
하지만 이렇게 에러가 발생하는 것이 문제이다!! 🥲
이렇게 문제가 발생할 수 있는 부분이 있다면 애초에 실행이 안되도록 막는 것이 좋다.
예상치 못한 오류가 발생할 때 바로 대처하기 더 쉽기 때문이다.
타입스크립트는 점진적 타입 시스템이다.
그래서 타입스크립트는 변수에 타입을 지정하여 문제를 애초에 차단해버린다.
이러한 타입 시스템을 점진적 타입 시스템이라고 한다.
자바스크립트의 동적 타입 시스템 + 자바의 정적 타입 시스템이라고 생각하면 쉽다.
타입이 정해져 있다면 미리 결정해주고 에러가 있다면 알려준다. => 정적인 안정감!
타입이 정해져 있지 않다면 자동으로 추론해준다. => 동적인 유연함!
프로그래밍 언어의 동작 원리
점진적 타입 시스템이라는 말을 조금 더 자세하기 이해하기 위해서는 코드가 컴파일되고 런타임에 올라가는 과정을 파악해야 한다. 컴파일 시스템을 분석하면서 조금 더 알아보자.
컴파일이란
컴파일이란 컴퓨터가 이해하기 쉬운 언어로 변환하는 과정을 의미한다.
쉽게 말하면 우리가 사용하는 언어를 컴퓨터 언어(0,1)로 바꾸는 것이라고 생각하면 된다.
일반적인 컴파일 과정
자바나 자바스크립트 언어는 바이트 코드라는 것으로 바뀌어 컴퓨터가 이해할 수 있게 해준다.
이 바이트 코드가 해석되려면 AST(추상 문법 트리)라는 추상 문법 트리로 먼저 변환된다.
즉 JavaScript 코드 -> AST -> 바이트 코드, 이러한 과정을 거치면 컴파일된다.
그러면 이 바이트 코드를 이해할 수 있게 되고 컴퓨터가 코드를 실행할 수 있다.
타입스크립트의 컴파일 과정
이와 달리 타입스크립트는 AST를 거치고 나서 바로 바이트코드로 변환하는 것이 아니라, 타입 검사를 수행한다.
이 과정에서 타입 검사가 실패하면 컴파일을 종료시키고, 아니면 자바스크립트 코드로 변환한다.
타입 검사 통과에 성공한 코드만 AST에 집어넣고 바이트 코드로 변환해 실행한다.
이런식으로 src에 있는 타입스크립트 파일을 tsc 명령어를 통해 컴파일하면
dist 폴더 안에 우리가 잘 알고 있는 자바스크립트 형태의 코드로 바뀌는 것을 볼 수 있다.
타입스크립트의 장점
컴파일 시간에 타입 검사를 수행하므로 버그 발생 가능성을 줄이고 비교적 안전하다.
자동완성, 인터페이스 등이 제공되고 변수나 함수를 훨씬 더 명확하게 정의할 수 있다.
프로젝트 규모가 커질수록 타입이 정의되어 있기 때문에 파일 데이터 구조를 파악하기 훨씬 더 쉽기 때문에 유지보수 및 협업에도 유리하다.
타입스크립트의 단점
학습 및 개발 과정에 다소 시간이 소요되므로 생산성이 비교적 낮다.
따라서 소규모 프로젝트나 적은 인원이 빨리 작업해야 하는 경우는 자바스크립트를 사용하는 것이 더 나을 수 있다.
객체지향 프로그래밍의 성향이 있어 클래스나 상속, 인터페이스에 대한 공부도 추가적으로 필요하다.