📄 Item49 ~ 51

Item49. 콜백에서 this에 대한 타입 제공하기

(1) class 내에서의 this

class ResetButton {
  render() {
    return makeButton({ text: 'Reset', onClick: this.onClick });
  }
    
  onClick() {
    alert(`Reset ${this}`);
  }
}

• ResetButton 에서 onClick을 호출하면 this 바인딩 문제로 인해 "Reset이 정의되지 않았습니다"라는 경고가 뜬다.
• 일반적인 해결책은 생성자에서 메서드에 this를 바인딩시키는 것이다.

class ResetButton {
  constructor() {
    this.onClick = this.onClick.bind(this);
  }
    
  render() {
    return makeButton({ text: 'Reset', onClick: this.onClick });
  }
    
  onClick() {
    alert(`Reset ${this}`);
  }
}

• onClick메소드는 ResetButton.prototype의 속성을 정의한다.
  • 그러므로 ResetButton의 모든 인스턴스에서 공유된다.
• 그러나 생성자에서 this.onClick = ...으로 바인딩하면, onClick 속성에 this가 바인딩되어 해당 인스턴스에 생성된다.
  • 속성 탐색 순서에서 onClick 인스턴스 속성은 onClick 프로토타입 속성보다 앞에 놓이므로, render() 메서드의 this.onClick은 바인딩된 함수를 참조하게 된다.
• 조금 더 간단한 해결책으로 화살표 함수를 사용할 수 있다.

class ResetButton {
  render() {
    return makeButton({ text: 'Reset', onClick: this.onClick });
  }
    
  onClick = () => {
    alert(`Reset ${this}`); // "this"가 항상 인스턴스를 참조한다.
  }
}

(2) 콜백 함수의 매개변수에 this 넘기기

• 콜백 함수의 매개변수에 this를 추가하고, 콜백 함수를 call로 호출해서 해결

function addKeyListener (
  el: HTMLElement,
  fn: (this: HTMLElement, e: KeyboardEvent) => void
) {
  el.addEventListener('keydown', e => {
    fn.call(el, e);
  });
}

• 실 적용 예시

declare let el: HTMLElement;

// 만약 콜백을 화살표 함수로 작성하고 this를 참조하려고하면 타입스크립트가 문제를 잡아낼 것이다.
addKeyListener(el, function(e) {
  this.innerHTML; // 정상, "this"는 HTMLElement 타입
});

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

Item50. 오버로딩 타입보다는 조건부 타입을 사용하기

function double(x: number | string): number | string;
function double(x: any) { return x + x };

• 위와 같이 선언하면 모호한 부분이 있다.
  • number 타입을 매개변수로 넣으면 number 타입을, string 타입을 매개변수로 넣으면 string 타입을 반환하나 number 타입을 매개변수로 넣고 string 타입을 반환하는 경우도 포함되어 있다.
  • 그래서 제네릭을 사용하면 이러한 동작을 모델링할 수 있다.

function double<T extends number | string>(x: T): T;
function double(x: any) { return x + x };

const num = double(12); // 타입이 12
const str = double('x'); // 타입이 "x"

• 타입을 구체적으로 만들어 보려는 시도는 좋았으나 너무 과하다. 타입이 너무 과하게 구체적이다.
  • string 타입을 매개변수로 넘기면 string 타입이 반환되어야 한다.
• 그래서 이러한 경우를 해결하기 위해 여러 가지 타입 선언으로 분리할 수 있다.

function double(x: number): number;
function double(x: string): string;
function double(x: any) { return x + x };

const num = double(12); // 타입이 number
const str = double('x'); // 타입이 string

• string이나 number 타입의 값으로는 잘 동작하지만, 유니온 타입 관련해서 문제가 여전히 발생한다.
• 오버로딩 (string | number 타입)을 추가해서 추가하여 문제를 해결할 수 있지만, 가장 좋은 해결책은 **조건부 타입**을 사용하는 것이다.

function double<T extends number | string>(
  x: T
): T extends string ? string : number;
function double(x: any) { return x + x };

• T가 string의 부분 집합이면(string, 또는 문자열 리터럴, 또는 문자열 리터럴의 유니온), 반환 타입이 string이다.
• 그 외의 경우는 반환 타입이 number이다.
• 오버로딩 타입보다 조건부 타입을 사용하는 것이 좋다.
  • 조건부 타입은 추가적인 오버로딩 없이 유니온 타입을 지원할 수 있다.

Item51. 의존성 분리를 위해 미러 타입 사용하기

// Buffer의 타입 정의는 '@types/node'를 설치하면 얻을 수 있다.
function parseCSV(contents: string | Buffer): {[column: string]: string}[] {
  if (typeof contents === 'object') {
    // 버퍼인 경우
    return parseCSV(contents.toString('utf8'));
  }
  // ...
}

• @types/node는 devDependencies로 포함해야 하는데 이렇게 하면 두 그룹 사용자에게 문제가 생긴다.
  • @types와 무관한 자바스크립트 개발자
  • NodeJS와 무관한 타입스크립트 웹 개발자
• 그래서 각자가 필요한 모듈만 사용할 수 있도록 구조적 타이핑을 적용할 수 있다.
  • @types/node에 있는 Buffer 선언을 사용하지 않고, 필요한 메서드와 속성만 별도로 작성할 수 있다.

interface CsvBuffer {
  toString(encoding: string): string;
}

function parseCSV(contents: string | CsvBuffer): {[column: string]: string}[] {
 // ...
}

• CsvBuffer는 Buffer 인터페이스보다 훨씬 짧으면서도 실제로 필요한 부분만을 떼어 내어 명시했다.
• 만약 작성 중인 라이브러리가 의존하는 라이브러리의 구현과 무관하게 타입에만 의존한다면, 필요한 선언부만 추출하여 작성 중인 라이브러리에 넣는 것(미러링, mirroring)을 고려해 보는 것이 좋다.
• 다른 라이브러리의 타입이 아닌 구현에 의존하는 경우에도 동일한 기법을 적용할 수 있고 타입 의존성을 피할 수 있다.
  • 그러나 프로젝트의 의존성이 다양해지고 필수 의존성이 추가됨에 따라 미러링 기법을 적용하기가 어려워진다.
  • 다른 라이브러리의 타입 선언의 대부분을 추출해야 한다면, 차라리 명시적으로 @types 의존성을 추가하는 게 낫다.