타입스크립트 간단 소개

정의

타입스크립트는 Microsoft에서 유지/관리되는 Apache 라이센스가 부여된 오픈소스이다. 자바스크립트의 수퍼셋(Superset)이며, 자바스크립트에 타입을 부여한 언어를 의미한다.

타입스크립트의 특징

• 컴파일 언어이자 정적타입(Static type) 언어이다.
  • 자바스크립트는 어떤 타입을 반환하는지 명시하지 않는 동적타입이다.
  • 타입스크립트는 컴파일 단계에서 타입을 체크하며, 정적타입으로써 타입에 대해 명시한다.
  • 자바스크립트에 추가구문을 추가하여 편집기와 긴밀한 통합을 지원하기 때문에 편집기에서 초기에 오류를 포착할 수 있다.
• 객체지향 프로그래밍 지원
  • ES6에서 새롭게 사용된 문법을 포함하고 있어 클래스, 인터페이스, 상속, 모듈등 객체지향 프로그래밍 패턴을 지원한다.
• 자바스크립트의 수퍼셋
  • 상위 확장이므로 자바스크립트의 모든 기능을 사용가능하다.
  • 타입스크립트는 자바스크립트가 실행되는 모든 곳에서 실행 가능하다.

변환 과정

타입스크립트에서 자바스크립트 전환

1. 타입스크립트 소스 -> TSC(타입스크립트 컴파일러)를 통해 파싱하여 타입스크립트 AST로 변환
2. 타입검사기(Typechecker)가 AST의 타입을 체크
3. 타입스크립트의 AST 코드 -> 자바스크립트 소스로 변환

자바스크립트 실행

4. 자바스크립트 소스 -> 자바스크립트 AST로 파싱
5. AST -> 바이트코드로 변환
6. 런타임이 바이트코드 평가(실행)

1~3은 TSC가 수행하며, 4~6은 브라우저, NodeJS, 기타 자바스크립트 엔진 등에서 수행한다.

AST(Abstract Syntax Tree): 추상 구문 트리. 구문이 추상적이라는 의미는 실제 구문에서 나타나는 세세한 정보를 나타내지는 않는다는 의미이다.

자바스크립트는 인터프리터 언어이므로 런타임 단계에서 오류가 발견되지만, 타입스크립트는 컴파일 언어이므로 컴파일 단계에서 타입을 검사하여 사전에 오류 발견이 가능하다.

TSC(TypeScript Compiler)의 동작

• root의 tsconfig.json을 읽는다.
• 파일의 root부터 import로 연결된 가능한 모든 파일을 찾는다.
• .ts로 작성된 파일을 신택스 트리로 변경한다.
• 변경된 신택스 트리를 기준으로 해당 트리에 있는 symbol을 indentifier로 변경한다.
• binder와 신택스 트리를 기준으로 타입을 체크한다.
• 신택스트리를 처음에 읽었던 tsconfig.json에 맞게 변경한다.
• 신택스 트리를 .js 등 파일로 변경한다.

참고

https://yceffort.kr/2022/05/how-typescript-compiler-works
https://adjh54.tistory.com/32
https://www.typescriptlang.org/ko/