@input event의 타입

 타입스크립트를 사용하다보면 참 이런 이벤트들, 외부 라이브러리들 타입 주기가 참 어렵다.

 

@input이 반환하는 event의 타입은 InputEvent 이다.

 

 

InputEvent → UIEvent → Event 순으로 타고타고 찾아가다보면 target을 확인할 수 있다.

 

 

 

이때 target의 타입은 EventTarget 또는 null이다.

황당하고 놀랍게도 EventTarget에는 value가 없다….. (메서드만 가지고 있더라)

  const target = e.target as EventTarget

 

그래서 만약 이렇게 줘버리면 또 target.value 를 쓸 수 없게 된다.

 

EventTarget - Web API | MDN

 

 

그래서 HTMLInputElement 를 써줄 것이다.

HTMLInputElement - Web APIs | MDN

 

프로토타입으로 연결되어 있긴 하다.

 

근데 프로토타입 체이닝같은 경우는 일반적으로 하위에서 체이닝을 통해 상위의 속성을 참조하거나 메서드를 사용할 수 있다는 개념인데, 이 경우에는 target에 하위의 타입인 HTMLInputElement를 강제로 타입 단언하여 value를 사용한다는 것이 좀 어색하게 느껴졌다.

 

 

Composition API와 타입스크립트 | Vue.js

 

그러나 공식 문서도 타입 명시적으로 캐스팅하라고 하니 따르도록 한다.

 

 

▶ 결과

const getNewOptions = _.debounce(async (e: InputEvent) => {
  const target = e.target as HTMLInputElement;

  // 실행할 코드 (비공개)
}, 500);