타입스크립트 기능보다는 ECMAScript 기능을 사용하기

• 일반적으로 타입스크립트 코드에서 모든 타입 정보를 제거하면 자바스크립트가 되지만, 열거형, 매개변수 속성, 트리플 슬래시 임포트, 데코레이터는 타입 정보를 제거한다고 자바스크립트가 되지는 않습니다.

• 타입스크립트의 역할을 명확하게 하려면, 열거형, 매개변수 속성, 트리플 슬래시 임포트, 데코레이터는 사용하지 않는 것이 좋습니다.

  • 자바스크립트와 타입스크립트에서 동작이 다르기 때문에 문자열 열거 형은 사용하지 않는 것이 좋습니다. 열거형 대신 리터럴 타입의 유니온을 사용 하면 됩니다.

  • 매개변수 속성은 타입스크립트의 다른 패턴들과 이질적이고, 초급자에게 생소한 문법이라는 것을 기억해야 합니다.

    // 일반적인 패턴
    class Person {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
    }
    
    // 매개변수 속성을 사용한 패터
    class Person {
      constructor(public name: string) {}
    }

  • 트리플 슬래시 임포트와 module 키워드는 호환성을 위해 남아 있을 뿐이며, 이제는 ECMAScript 2015 스타일의 모듈(import와 export)을 사용해야 합니다.

    namespace foo {
      function bar() {}
    }
    
    // <reference path=,,other.ts">
    foo.bar();

  • 데코레이터는 처음에 앵귤러 프레임워크를 지원하기 위해 추가되었으며 tsconfig에 experimentalDecorators 속성을 설정하고 사용해야 합니다

  • 데코레이터가 표준이 되기 전에는 타입스크립트에서 데코레이터를 사용하지 않는게 좋습니다.

객체를 순회하는 노하우

• 객체를 순회할 때, 키가 어떤 타입인지 정확히 파악하고 있다면 let k: keyof T와 for-in 루프를 사용합시다. 함수의 매개변수로 쓰이는 객체에는 추가적인 키가 존재할 수 있다는 점을 명심합시다.

const obj = {
  one: 'uno',
  two: 'dos',
  three: 'tres',
};

for (const k in obj) {
  const v = obj[k];
  // obj에 인덱스 시그니처가 없기 때문에
  // 엘리먼트는 암시적으로 'any' 타입입니다.
}

let k: keyof typeof obj; // "one" | "two" | "three" 타입
for (k in obj) {
  const v = obj[k]; // 정상
}

• 객체를 순회하며 키와 값을 얻는 가장 일반적인 방법은 Object.entries를 사용하는 것입니다.

DOM 계층 구조 이해하기

• 자바스크립트를 사용할 때는 신경 쓰지 않았겠지만, DOM에는 타입 계층 구조가 있습니다. DOM 타입은 타입스크립트에서 중요한 정보이며, 브라우저 관련 프로젝트에서 타입스크립트를 사용할 때 유용합니다.
• Node, Element, HTMLElement, EventTarget 간의 차이점, 그리고 Event와 Mouse Event의 차이점을 알아야 합니다.
  • UIEvent: 모든 종류의 사용자 인터페이스 이벤트
  • MouseEvent: 클릭처럼 마우스로부터 발생되는 이벤트
  • TouchEvent: 모바일 기기의 터치 이벤트
  • WheelEvent: 스크롤 휠을 돌려서 발생되는 이벤트
  • KeyboardEvent: 키 누름 이벤트
• DOM 엘리먼트와 이벤트에는 충분히 구체적인 타입 정보를 사용하거나, 타입스크립트가 추론할 수 있도록 문맥 정보를 활용해야 합니다.

정보를 감추는 목적으로 private 사용하지 않기

• public, protected, private 접근 제어자는 타입 시스템에서만 강제될 뿐입니다. 런타임에는 소용이 없으며 단언문을 통해 우회할 수 있습니다. 접근 제어자로 데이터를 감추려고 해서는 안 됩니다.
  • 자바스크립트의 # 키워드를 사용하면 됩니다.
• 확실히 데이터를 감추고 싶다면 클로저를 사용해야 합니다.

소스맵을 사용하여 타입스크립트 디버깅하기

• 원본 코드가 아닌 변환된 자바스크립트 코드를 디버깅하지 맙시다. 소스맵을 사용해서 런타임에 타입스크립트 코드를 디버깅 합시다.
• 소스맵이 최종적으로 변환된 코드에 완전히 매핑되었는지 확인합시다.
• 소스맵에 원본 코드가 그대로 포함되도록 설정되어 있을 수도 있습니다. 공개되지 않도록 설정을 확인합시다.