[Solved] Property 'value' does not exist on type 'HTMLElement' (React Input Event Type)

React / Nextjs 에서 Typescript를 사용할 때, Input의 타입을 어떻게 지정해야 할지 알아보자.
위 에러는 제대로 타입을 지정하지 않아서 생기는 문제이다.
특히나, 여기에서는 as HTMLElement로 타입을 캐스팅 하지 않고, 제대로 타입을 지정해 해결하는 방법을 정리하고자 한다.

Error

 

[ Cause ]

원인은 에러 메시지 그대로이다.

내가 작성한 방식대로라면, 매개변수 event(e)는 EventTarget 타입을 가지게 되는데,
이때 EventTarget이라는 타입에 value라는 속성이 없기 때문이다. 

 

---

[ Solution ]

해결책은 간단하고, 크게 2가지가 있다.

 

1. as HTMLInputElement

구글링을 해보니, 가장 많은 답변은 as 를 이용하여 Type을 강제로 HTMLInputElement 로 Casting하라는 것이었다.

solution by "as"

분명, 해결은 되지만 이게 제대로 된 방법인지 의문이 들었다. 뭔가 캐스팅을 하지 않고 제대로 타입을 선언해서 해결하는 방법이 없을까?

 

---

2. as HTMLInputElement

사실 이게 이 글을 작성한 이유이다. 

solution by changeEvent

위 사진에서 볼 수 있듯이, React.ChangeEvent라는 타입을 사용하면, 타입을 강제로 캐스팅 하지 않고 간단하게 문제를 해결 할 수 있다.

 

 

 

---

 

해당 포스트에서 잘못된 점이 있거나, 궁금한 점이 있으면 언제든지 댓글로 말해주세요!