[Typescript] Property 'getBoundingClientRect' does not exist on type 'EventTarget'.ts(2339)

canvas의 viewport에 대한 상대적 위치를 알기위해 getBoundingClientRect를 구하면서 발생했다.

 

원래 코드는 아래와 같다.

const paddleThrottleHandler = (event: React.MouseEvent) => {
    if (event.clientY < event.target.getBoundingClientRect().top + player1.paddleHeight / 2) {
      updatePlayingInfoHandler({
        index: 1,
        uuid: '1',
        player1Y: inputName === 'player1' ? 0 : player1Y,
        player2Y: inputName === 'player2' ? 0 : player2Y,
      });
    }
...

 

발생 이유

오류가 발생한 이유는 event.target이 단순히 모든 이벤트 대상이 HTML 요소가 아닐 수 있기 때문이다. 예를 들어, XMLHttpRequest, FileReader, AudioNode, AudioContext등이 이벤트의 대상이 될 수 있다.

 

해결 방안

따라서 아래와 같이 event.target의 타입을 as를 통해 명확하게 지정해주어야한다. (나의 경우는 canvas여서 HTMLCanvasElement) 

const paddleThrottleHandler = (event: React.MouseEvent) => {
    const eventTarget = event.target as HTMLCanvasElement;
    if (event.clientY < eventTarget.getBoundingClientRect().top + player1.paddleHeight / 2) {
      updatePlayingInfoHandler({
        index: 1,
        uuid: '1',
        player1Y: inputName === 'player1' ? 0 : player1Y,
        player2Y: inputName === 'player2' ? 0 : player2Y,
      });
    }
 ...