JavaScript의 슈퍼셋 TypeScript

2022년 3월 13일

JavaScript는 인터프리터 언어로, 코드를 실행하는 런타임 시점에 타입이 결정된다. 덕분에 유연하지만, 타입 불일치나 미정의 값 참조 같은 오류는 실행 전까지 감지할 수 없다. TypeScript는 이 불확실성을 컴파일 단계로 끌어올려 해결한다. 이런 typescript에 대한 정보를 정리한다.

상위 집합 관계

TypeScript는 JavaScript의 모든 기능을 포함하며, 그 위에 정적 타입(Static Typing) 시스템을 추가한 언어다.

• 호환성: 모든 JavaScript 코드는 유효한 TypeScript 코드다. 확장자를 .js에서 .ts로 변경하는 것만으로 도입이 가능하다.
• 컴파일: 브라우저와 Node.js는 TypeScript를 직접 해석하지 못한다. tsc와 같은 컴파일러를 통해 타입 정보를 제거한 순수 JavaScript로 변환해야 실행할 수 있다.

정적 타입 체크의 원리

에디터에서 실시간으로 에러를 감지하는 것은 TypeScript Language Service의 역할이다.

1. LSP(Language Server Protocol): 에디터와 언어 서비스가 통신하며 코드를 분석한다.
2. 구조화(AST): 코드를 **추상 구문 트리(AST)**로 변환하여 논리적 구조를 파악한다.
3. 심볼 바인딩: 변수나 함수의 선언과 사용 위치를 연결하여 식별자를 관리한다.
4. 타입 검사: 분석된 구조를 바탕으로 할당된 값이 선언된 타입과 일치하는지 대조한다.

셀프 호스팅 컴파일러 tsc

TypeScript 컴파일러인 tsc는 TypeScript로 작성되었다.

이를 **셀프 호스팅(Self-hosting)**이라 한다. 자신들이 만든 언어로 컴파일러라는 대규모 프로그램을 직접 구축하여 언어의 성능과 기능을 증명한 사례다. 우리가 사용하는 패키지는 이 컴파일러가 JavaScript로 변환된 결과물이다.

빌드 환경과 자동화

매번 직접 컴파일하면 번거롭기 때문에, 보통 빌드 도구가 이 과정을 자동으로 처리한다.

• Watch Mode: 파일을 저장하면 자동으로 컴파일된다.
• HMR(Hot Module Replacement): 변경된 부분만 브라우저에 반영한다. 새로고침 없이 바로 확인 가능하다.
• 타입 삭제(Type Erasure): 컴파일하면 타입 코드는 전부 사라지고 .js만 남는다. 런타임 성능에는 영향이 없다.