this 바인딩 선택

this 고정 전략

일반 함수의 this는 호출 방식으로 정해지고, 화살표 함수의 this는 바깥 스코프를 따른다. 타입스크립트의 this 매개변수는 이 기대값을 타입으로 적어 호출 실수를 줄인다.

function

동적 this

setTimeout(function () {
  this.greeting
});

콜백으로 분리되어 호출되면 객체 메서드의 this가 유지되지 않을 수 있다.

arrow

렉시컬 this

setTimeout(() => {
  this.greeting
});

화살표 함수는 자신만의 this가 없어서 메서드가 실행될 때의 this를 그대로 쓴다.

this param

명시적 this 타입

handleClick(
  this: ButtonHandler,
  event: Event
)

실제 매개변수로 컴파일되지는 않지만, 함수가 기대하는 this 타입을 검사한다.

콜백 전달

메서드의 this를 유지해야 하면 화살표 함수

setTimeout, 이벤트 핸들러 래퍼, 배열 메서드 콜백처럼 나중에 실행되는 함수는 선언 위치의 this를 쓰는 편이 안전하다.

호출 컨텍스트 필요

호출자가 this를 제공해야 하면 일반 함수

객체 메서드, 라이브러리 콜백, DOM 이벤트처럼 호출 주체가 중요한 패턴은 일반 함수와 this 타입 명시가 더 적합하다.

메서드

일반 함수 우선

객체가 호출 주체라면 `this`가 그 객체를 가리키는지 확인한다.

콜백

화살표 검토

바깥 클래스 인스턴스가 필요하면 렉시컬 this가 실수를 줄인다.

타입 검사

this 매개변수

호출 방식까지 안전하게 제한해야 할 때 첫 매개변수로 선언한다.

bind

명시적 고정

일반 함수를 그대로 넘겨야 한다면 `bind`로 this를 고정한다.

타입 안전성 결론

함수가 실행될 때의 호출자를 따라야 하면 일반 함수, 작성된 위치의 인스턴스를 유지해야 하면 화살표 함수, 호출 컨텍스트까지 검증해야 하면 this 타입 명시를 사용한다.