본문 바로가기
JavaScript/TypeScript

TypeScript - ECMAScript 표준과의 관계

by GangDev 2024. 12. 19.

ECMAScript 표준과의 관계

TypeScript가 ECMAScript 표준을 따르는 방식

타입스크립트는 ECMAScript 표준을 철저히 따르며, 이를 기반으로 확장됩니다:

  • ECMAScript 버전별로 타입스크립트 컴파일러 옵션을 선택할 수 있습니다.
  • ECMAScript 표준에 없는 기능은 타입스크립트만의 확장으로 구현됩니다.
  • ECMAScript 표준의 변화에 따라 타입스크립트도 지속적으로 업데이트됩니다.

예를 들어, tsconfig.json 파일에서 ECMAScript 버전을 지정할 수 있습니다:

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

이 설정은 ECMAScript 2020 표준을 대상으로 코드를 컴파일하도록 합니다.

최신 JavaScript 기능 지원

타입스크립트는 최신 ECMAScript 기능을 빠르게 채택하고 지원합니다:

  • ECMAScript 표준이 갱신될 때마다 타입스크립트도 해당 기능을 지원하도록 업데이트됩니다.
  • 일부 기능은 ECMAScript 표준화 이전에 실험적으로 지원되기도 합니다.
  • 타입스크립트의 타입 시스템은 최신 JavaScript 기능과 함꼐 사용될 수 있습니다.

예를 들어, ECMAScript 2020에서 도입된 Optional Chaining을 타입스크립트에서 사용할 수 있습니다:

interface User {
  address?: {
    street?: string;
  };
}

function getStreet(user: User | undefined): string | undefined {
  return user?.address?.street;
}

이 코드는 ECMAScript 2020의 Optional Chaining을 사용하여 안전하게 중첩된 객체 속성에 접근합니다.

타입스크립트만의 고유 기능 소개

타입스크립트는 ECMAScript 표준 외에도 여러 고유한 기능을 제공합니다:

  • 정적 타입 시스템: 변수, 함수 매개변수, 반환 값 등에 대한 타입 선언과 체크를 지원합니다.
  • 인터페이스: 객체의 구조를 정의하고 강제할 수 있는 문법을 제공합니다.
  • 제네릭: 재사용 가능한 컴포넌트를 만들 수 있게 해주는 기능입니다.
  • 데코레이터: 클래스와 멤버에 추가적인 동작을 부여하는 메타프로그래밍 기법입니다.

예를 들어, 타입스크립트의 인터페이스와 제네릭 기능을 함께 사용한 코드:

interface Container<T> {
  value: T;
}

class StringContainer implements Container<string> {
  constructor(public value: string) {}
}

class NumberContainer implements Container<number> {
  constructor(public value: number) {}
}

function processContainer<T>(container: Container<T>): void {
  console.log(container.value);
}

// 사용 예시
processContainer(new StringContainer("Hello"));
processContainer(new NumberContainer(42));

이 코드는 ECMAScript 표준에는 없는 타입스크립트만의 고유 기능인 인터페이스와 제네릭을 활용하여 강력한 타입 안전성을 제공합니다.

타입스크립트는 이러한 방식으로 ECMAScript 표준을 기반으로 하면서도 추가적인 기능과 타입 시스템을 통해 개발자에게 더 나은 개발 경험을 제공합니다. 이는 특히 대규모 애플리케이션이나 복잡한 프로젝트에서 큰 이점이 됩니다. 동시에, ECMAScript 표준과의 호환성은 타입스크립트를 학습하고 적용하기 쉽게 만듭니다.