(TS) 타입스크립트의 동작 원리

Dragon·2024년 3월 23일

위클리 페이퍼

목록 보기
17/18

타입스크립트란?

  • 자바스크립트의 슈퍼셋(Superset)으로, 자바스크립트에 '타입' 을 부여한 언어를 의미.
  • 자바스크립트에서 발생하는 타입 관련 런타임 오류를 방지하여, 단위 테스트를 최소화하고 유지보수가 유용한 코드를 작성할 수 있다.

타입스크립트를 사용하는 이유

3 + []    // 숫자와 리스트 더하기

let obj = {}
obj.foo   // undefined

function a(b) {  
  return b/2
}

a("z")  // 문자열은 /2 불가
  • 위와 같은 예시들을 살펴보면, 분명히 유효하지 않은 코드인데도 불구하고 코드 실행 전에는 자바스크립트가 이러한 타입 관련 런타임 오류를 발견하지 못하기 때문에, 에러가 발생할지 개발자는 예상할 수 없다.
3 + []   // 에러 TS2365: '3'타입과 '[]' 타입에 연산자 '+' 적용할 수 없음

let obj = {}
obj.foo  // 에러 TS2339: '{}' 타입에 'foo' 프로퍼티 존재하지 않음

function a(b: number) {
  return b/2
}

a("z")   // 에러 TS2345: 'number' 타입의 매개변수에 "z" 인수 타입 할당할 수 없음
  • 하지만 타입스크립트를 사용하면 프로그램을 실행하기 전부터 이러한 타입 관련 런타임 오류들을 개발자에게 알려주기 때문에, 개발자는 빠르게 오류를 수정하고 코드 작성에 집중할 수 있게 된다.

타입스크립트의 동작 원리

  • TypeScript 로 작성된 코드는 바이트 코드로 컴파일 되기 전에, 먼저 JavaScript 코드로 변환되는 트랜스컴파일 과정을 먼저 거치게 되는데, 이 때 소스코드를 대상으로 '타입 검사' 를 수행하게 된다.

  • 타입 검사를 무사히 마친 소스코드는 JavaScript 코드로 컴파일되고, 이 소스코드는 타입 오류로부터 안전한 코드가 된다. 하지만 타입 검사에서 오류가 발생하면 이를 개발자에게 알리고 컴파일이 되지 않는다.

타입 검사 과정

  1. 타입 주석 및 타입 추론

    • TypeScript는 변수, 함수 매개변수, 함수 반환 값 등에 대한 타입을 명시적으로 지정할 수 있는데, 이러한 타입 주석을 사용하여 개발자가 코드에 타입 정보를 제공할 수 있다. 또한 TypeScript는 타입 추론을 통해 변수 초기화 및 함수 반환 값을 기반으로 타입을 추론할 수 있다.
  2. 정적 코드 분석을 통한 타입 검사

    • TypeScript 컴파일러는 1번 과정에서 소스 코드를 통해 타입 정보를 수집하고, 이를 바탕으로 정적으로 코드를 분석하여 타입 오류를 검출한다. 이 과정에서 변수 할당, 함수 호출, 객체 멤버 접근 등을 검사하여 타입 호환성을 확인하고, 타입 오류가 발생하는지 확인한다.
profile
2024년부터 시작하는 프론트엔드 개발 공부

0개의 댓글