Item 49 콜백에서 this에 대한 타입 제공하기

this

JS에서 this 키워드는 혼란스러운 기능이다.

let, const로 선언된 변수가 렉시컬 스코프(lexical scope)라면, this는 다이나믹 스코프(dynamic scope)이다. 다이나믹 스코프의 값은 '정의된' 방식이 아니라 '호출된' 방식에 따라 달라진다.

JS에서는 call을 사용해 명시적으로 this를 바인딩할 수 있다.

const c = new C()
const method = c.logSquares
method.call(c) // 제곱을 출력한다.

this 바인딩은 종종 콜백 함수에서도 쓰인다. 생성자에서 this를 바인딩하는 식으로 사용되곤 한다. 예를 들면 React의 onClick이 있다. 물론 this의 바인딩이 이것과는 다른 화살표 함수를 이용하면 간단하게 해결할 수 있다.

this 바인딩은 JS의 동작이므로, TS 역시 this 바인딩을 그대로 모델링한다. 만약 작성 중인 라이브러리에 this를 사용하는 콜백이 있다면, 콜백의 매개변수에 this를 추가하고, 매개변수 this에 타입 정보를 넣자.

Summary

• this 바인딩이 동작하는 원리를 이해하자.

• 콜백 함수에서 this를 사용해야 한다면, 타입 정보를 명시하자.