답변

TypeScript에서 this의 타입은 함수 시그니처에서 명시적으로 지정할 수 있습니다. 이는 객체 및 클래스의 메서드에서 호출 컨텍스트의 올바른 타입 지정을 보장하기 위해 사용됩니다.

this의 타입을 지정하는 예시:

interface Person {
  name: string;
  greet(this: Person): void;
}
const person: Person = {
  name: 'Max',
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

함수의 경우 this 타입을 명시적으로 지정할 수 있습니다 — 이 경우 첫 번째로 명명되지 않은 매개변수로 들어갑니다:

function showName(this: { name: string }) {
  console.log(this.name);
}

화살표 함수의 특징:

• 화살표 함수는 자신의 this 컨텍스트를 가지지 않습니다. this의 값은 주변 스코프에서 가져옵니다.
• 따라서 화살표 함수의 this 타입을 명시적으로 지정할 수 없습니다 — 시그니처는 무시됩니다.

그 필요성은 무엇인가요? 객체 메서드를 잘못 사용할 때 오류를 잡을 수 있게 해주며, 실시간 "바인딩"을 보장하는 데 도움을 줍니다 (예: 이벤트 핸들러에서).

함정 질문

화살표 함수에서 this의 타입을 명시적으로 지정할 수 있나요? 함정은 무엇인가요?

답변: 불가능합니다. 화살표 함수는 외부 컨텍스트에서 this를 캡처하며, ECMAScript 명세는 그 내부에서 this의 고유한 값을 가질 수 없도록 되어 있습니다.

const foo = (this: any) => {} // 컴파일 오류

this를 제어해야 할 경우 — 일반 함수(function)를 사용하십시오.

주제에 대한 미세한 점으로 인한 실제 오류 예시

---

이야기

웹 애플리케이션에서 이벤트 핸들러 메서드를 화살표 함수로 작성하였습니다. TypeScript가 바인딩 오류를 잡아줄 것으로 기대했지만, 화살표 함수는 자체 this를 가지지 않았습니다. 결과: 컨텍스트 손실, DOM 핸들러 작업 중 이상한 버그.

이야기

클래스에서 메서드를 일반 함수로 this 타입을 명시하여 선언했지만, 메서드를 콜백으로 전달할 때 (setTimeout(obj.method, 1000)) this가 소실되어 런타임 오류가 발생했습니다. bind 또는 화살표 함수를 통해 컨텍스트를 고정하는 것을 잊었습니다.

이야기

데이터 모델 작업을 위한 라이브러리에서 인터페이스 메서드의 this 타입을 지정하는 것을 잊었습니다. TypeScript는 잘못된 컨텍스트에서 메서드를 호출할 때 오류를 표시하지 않았지만, production에서는 존재하지 않는 속성에 접근할 때 애플리케이션이 중단되었습니다.