Typescript Cannot find name 'target' 이벤트 객체 오류 해결

자바스크립트를 하다보면 항상 이벤트를 줄떄가 많다. 이벤트를 사용하면 event 객체를 이용해 조작을 많이하는데

typescript 에서는 이벤트에 타입을 지정해줘야 오류 없이 이용할수 있다. 이벤트에 타입을 지정하는 방법과 내가 사용하면서 헤결한 오류를 확인해보려합니다.

 

1. 이벤트 객체

document.querySelector(selecter).addEventListener('click', (event) => {});

위에 코드처럼 이벤트를 주는데 ts에서는 event에 타입을 지정해주면된다. 

document.querySelector(selecter).addEventListener('click', (event: Event) => {});

여러가지 이벤트들이있지만 우선 Event로 타입을 지정해주면된다.

 

 

2. 이벤트 객체 옵션

document
  .querySelector(selecter)
  .addEventListener('click', (event: Event) => {
    console.log(event.target.value)
  });

event.target.value는  event.targrt의 타임을 지정해주지 않아서 null이라고 나온다.

이떄 해결 방법은 두가지 있는데 

event.target as HTMLElement;      뒤에 as HTMLElement라고 지정해주는 방식

<HTMLElement>event.target ;      앞에  HTMLElement  을 지정하는 방식이 있다.

 

여기서 한가지 더 오류가 있는데 value의 옵션은 input의 속성이기 떄문에 HTMLInputElement로 작성해주어야한다