EventTarget | null' 형식의 인수는 'Node | null' 형식의 매개 변수에 할당될 수 없습니다.

 

0. 상황

    - querySelector 이 사용된 퍼블리싱 적용 중 에러 발생

'EventTarget | null' 형식의 인수는 'Node | null' 형식의 매개 변수에 할당될 수 없습니다.

 

 

 

1. 해결과정

     - 혹시 Null 값이 문제인 것 같아 느낌표를 추가하였으나 해결되지 않음 

     - 타입스크립트의 느낌표가 뭔가요? 참고(https://velog.io/@jinyoung985/TypeScript-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EB%8A%90%EB%82%8C%ED%91%9C)

'EventTarget' 형식의 인수는 'Node' 형식의 매개 변수에 할당될 수 없습니다.

 

 

     1). any 타입 지정

     - EventTarget 타입의 인수가 문제이므로 event 타입을 any 로 지정

     - 각 변수에 타입을 할당하는 타입 스크립트의 장점을 무시하므로 좋은 방법이 아니다

// 다른 곳 클릭 시 셀렉트박스 닫기         document.addEventListener("click", (event: any) => {       if (!firstSelectBox.contains( event.target ))          firstSelectBox.classList.remove("open");            });

 

 

     2). HTMLInputElement 타입 지정
     - EventTarget 타입을 HTMLInputElement 으로 지정

     - 참고: DOM 이 무엇인지 (https://velog.io/@yejineee/DOM%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-DOM-Node%EC%99%80-Element%EC%9D%98-%EC%B0%A8%EC%9D%B4)

     -참고: EventTarget, Node, Element, HTMLElement (https://tak-fe.tistory.com/86)

// 다른 곳 클릭 시 셀렉트박스 닫기     document.addEventListener("click", (event: any) => {       const target = event.target as HTMLInputElement;       if (!firstSelectBox.contains( target ))         firstSelectBox.classList.remove("open");            });