HTMLFormElement currentTarget 타입지정

 

타입스크립트를 사용하여 form 태그의 childElement에서 value를 가져올때 타입이 any로 가져와지는 문제가 있었다.

 

코드 구조는 name이 image_search인 form 태그,

 

안에는 name이 image_search__select인 select와 name이 image_search__input인 input이 있다.

 

event.currentTarget을 name 프로퍼티와 elemets로 접근할시  타입이 지정되지 않아 any로 추정되게 된다.

 

 

 

 

any로 타입을 지정해둔다면 타입스크립트를 사용하는 이점이 없어지기 때문에 form태그의 타입을 지정해주었다. 

 

form태그는 HTMLFormElement를 상속받고

 

elements 프로퍼티를 HTMLFormControlsCollection를 상속받아서 지정하였다.

 

 

 

위와 같이 form 태그의 타입을 지정해준후 Event의 제네릭으로 넘기면

 

새로 지정해준 elements 프로퍼티를 통해여 childElement의 value에 접근해도 오류가 나지 않게된다.

 

 

 

 

---

 

 

참고

TypeScript: Typing form events in React