[코드잇 스프린트 풀스택 4기] TypeScript의 동작 원리

TypeScript란

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 superset이다.

TypeScript는 정적 타입 시스템을 도입하여 코드 작성 시 타입 오류를 미리 확인할 수 있으며, 최종적으로 순수 JavaScript로 트랜스파일되어 실행된다.

이 과정은 JavaScript의 동적 타입 특성을 보완하면서, 개발자가 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있도록 도와준다.

 

TypeScript의 동작 원리

• 컴파일(트랜스파일) 과정
  TypeScript 코드는 TypeScript 컴파일러(tsc)를 통해 JavaScript 코드로 변환됩니다. 컴파일 단계에서 정적 타입 검사를 수행하여, 타입 불일치나 문법 오류를 미리 잡아낸다.
  • 정적 분석: 코드 작성 중 IDE나 컴파일러가 변수, 함수, 객체 등의 타입을 분석하여 오류를 사전에 경고
  • 트랜스파일: 타입 정보는 런타임에 필요하지 않으므로, 컴파일러는 이를 제거하고 순수 JavaScript 코드로 변환
• 런타임 동작
  트랜스파일된 JavaScript 코드는 기존의 JavaScript 엔진에서 실행된다.  즉, TypeScript의 타입 검사는 개발 단계에 한정되며, 실제 실행 시에는 JavaScript의 동적 타입 특성이 그대로 적용된다.

 

동적 타입 언어와 정적 타입 언어 비교

• JavaScript (동적 타입 언어)
  • 변수의 타입이 실행 시점에 결정되며, 자유롭게 변경 가능
  • 유연성은 높지만, 잘못된 타입 사용으로 인한 런타임 오류 발생 위험 있음
• TypeScript (정적 타입 언어의 특성 도입)
  • 변수와 함수에 타입을 명시하여, 컴파일 시점에 타입 불일치 검출 가능
  • 코드 작성 시 개발자가 타입 관련 오류를 미리 수정할 수 있어, 런타임 오류를 줄이고 코드 안정성 향상

이러한 정적 타입 시스템은 특히 대규모 애플리케이션 개발에서 유지보수성을 크게 향상시키는 역할을 함

 

TypeScript의 주요 기능

인터페이스 (Interfaces)

• 정의: 인터페이스는 객체의 구조(속성과 메서드의 형태)를 정의하는 계약(contract) 역할을 함
• 용도:
  • 클래스나 객체가 특정 구조를 따르도록 강제하여, 코드의 일관성과 예측 가능성 향상
  • 함수의 인자나 반환 타입 등에서 사용하여, 함수 사용 시 올바른 타입의 인자를 전달할 수 있게 함

예시:

interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: "Alice",
  age: 30,
};

제네릭 (Generics)

• 정의: 제네릭은 다양한 데이터 타입에 대해 재사용 가능한 컴포넌트를 작성할 수 있게 하는 기능
• 용도:
  • 함수나 클래스, 인터페이스 등을 특정 타입에 구애받지 않고 유연하게 사용할 수 있게 함
  • 타입 안정성을 유지하면서 코드의 재사용성을 높임

예시:

 

function identity<T>(arg: T): T {
  return arg;
}

const result = identity<string>("Hello World");

 

 

개발 도구 지원

 

• IDE 통합:
  Visual Studio Code, WebStorm 등 주요 IDE와 편집기는 TypeScript에 최적화된 자동 완성, 인텔리센스, 실시간 타입 검사, 코드 리팩토링 기능을 제공
• 디버깅:
  트랜스파일된 JavaScript 코드에 소스맵(source map)을 제공하여, 디버깅 시 원본 TypeScript 코드로 쉽게 매핑 가능
• 정적 분석 및 린팅:
  ESLint, TSLint(현재는 ESLint와 함께 사용) 등과 통합하여 코드 품질을 유지하고, 잠재적인 오류를 사전에 방지