typescript
this type 정의

this type 정의

this 의 타입을 정의하여 호출 컨텍스트에 제약을 걸 수 있다

예를 들어 보자

class AudioPlayer {
  private audioElement: HTMLAudioElement;
  private isPlaying: boolean = false;
  
  constructor(audioSrc: string) {
    this.audioElement = new Audio(audioSrc);
  }
  
  // this 타입 지정으로 의도 명확화
  togglePlay(this: AudioPlayer) {
    if (this.isPlaying) {
      this.audioElement.pause();
    } else {
      this.audioElement.play();
    }
    this.isPlaying = !this.isPlaying;
  }
}
 
const player = new AudioPlayer("music.mp3");
const playButton = document.getElementById("playBtn");
 
// 잘못된 사용 - TypeScript가 오류 표시
playButton.addEventListener("click", player.togglePlay); // 오류!
 
// 올바른 사용 - 의도한 컨텍스트 유지
playButton.addEventListener("click", player.togglePlay.bind(player));

위 예시에서 togglePlay 메서드는 AudioPlayer 인스턴스의 컨텍스트에서 호출되어야 한다.

this 타입을 명시적으로 AudioPlayer로 지정함으로써:

  • 이 함수는 AudioPlayer 객체의 컨텍스트에서 호출되어야 한다는 의도가 코드에 명확히 표현된다
  • 잘못된 컨텍스트에서 호출하려고 하면 TypeScript가 컴파일 시점에 오류를 발생시킨다

결론

특정 타입의 호출자만이 해당 함수를 호출할 수 있도록 제약사항을 걸 수 있음