React / TypeScript Property 'id' does not exist on type 'EventTarget' in TS 오류

엘리먼트 요소에 변수로 id를 할당하고 엘리먼트를 클릭했을 때 id값을 함수 인자로 보내거나 state에 저장하고 싶었다.

 

<Box 
    id={date}  // id 속성을 추가
    onClick={(e) => {
    	getDailytask(e.target.id)	// Box를 클릭하면 getDailytask의 인자로 보내주고 싶었다
   }}>

 

위처럼 쓰면 TypeScript가 콘솔창 가득 에러메시지를 보낸다

 

Property 'id' does not exist on type 'EventTarget' in TS ...

 

EventTarget interface는 id라는 속성을 가지고 있지 않기 때문에

이벤트가 발생하는 엘리먼트의 타입선언(type assertion)을 해줘야 한다. 

 

예) HTMLInputElement, HTMLButtonElement...

 

위 코드를 아래처럼 바꾸면 더 이상 오류 메시지 없이 엘리먼트의 속성 값을 사용할 수 있다.

<Box 
    id={date}  // id 속성을 추가
    onClick={(e) => {
    	const target = e.target as HTMLDivElement -> div요소를 타입선언
		console.log(target.id) 
        getDailytask(target.id)
   }}>

+ 

 

// inline으로 선언해줘도 된다
const result = (e.target as HTMLDivElement).value  
console.log(result)