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가
컴파일 시점
에 오류를 발생시킨다
결론
특정 타입의 호출자만이 해당 함수를 호출할 수 있도록 제약사항을 걸 수 있음