아이템 49) 콜백에서 this에 대한 타입 제공하기

• this 바인딩이 동작하는 원리를 이해해야합니다.
• 콜백 함수에서 this를 사용해야 한다면, 타입 정보를 명시해야 합니다.

declare function makeButton(props: { text: string; onClick: () => void }): void;
function addKeyListener(
  el: HTMLElement,
  fn: (this: HTMLElement, e: KeyboardEvent) => void
) {
  el.addEventListener("keydown", (e) => {
    fn.call(el, e);
  });
}

아이템 50) 오버로딩 타입보다는 조건부 타입을 사용하기

• 오버로드 타입보다는 조건부 타입을 사용하는 것이 좋습니다. 조건부 타입은 추가적인 오버로딩 없이 유니온 타입을 지원할 수 있습니다.

function double<T extends number | string>(
  x: T
): T extends string ? string : number;

위와 같이 조건부 타입을 사용하면 삼항연산자처럼 동작하게 됩니다.

(number | string) extends string ? string : number 
-> (number extends string ? string : number ) | 
(string extends string ? string : number) 
-> number | string 

조건부 타입은 다음처럼 동작하게 됩니다.

function double<T extends number | string>(
  x: T
): T extends string ? string : number;
function double(x: any) { return x + x; }
const num = double(12);  // number
const str = double('x');  // string

// function f(x: string | number): string | number
function f(x: number|string) {
  return double(x);
}

아이템 51) 의존성 분리를 위해 미러 타입 사용하기

• 필수가 아닌 의존성을 분리할 때는 구조적 타이핑을 사용하면 됩니다.
• 공개한 라이브러리를 사용하는 자바스크립트 사용자가 @types 의존성을 가지지 않게 해야합니다. 그리고 웹 개발자가 NodeJs 관련된 의존성을 가지지 않게 해야합니다.

아이템 52) 테스팅 타입의 함정에 주의하기

• 타입을 테스트할 때는 특히 함수 타입의 동일성(equality)과 할당 가능성(assignability)의 차이점을 알고 있어야 합니다.
• 콜백이 있는 함수를 테스트할 때, 콜백 매개변수의 추론된 타입을 체크해야 합니다. 또한 this가 API의 일부분이라면 역시 테스트해야 합니다.
• 타입과 관련된 테스트에서 any를 주의해야 합니다. 더 엄격한 테스트를 위해 dtslint 같은 도구를 사용해야 합니다.

출처

<이펙티브 타입스크립트> (댄 밴더캅 지음, 장원호 옮김, 인사이트, 2021)