[React, TS] onClick event에 타입 지정하는 방법

onClick에 타입 지정

const outModalCloseHandler = (event) => {
    if (closeSearch && !modalRef.current.contains(event.target)) setCloseSearch(false);
};

return (
  	  <HeaderBlock onClick={outModalCloseHandler}>...</HeaderBlock>
);

event에 마우스를 가져다 대면, 타입은 any로 나온다.
event에 어떤 타입을 설정해줘야 하는지 확인하는 가장 쉬운 방법은
이벤트 핸들러를 함수 표현식으로 따로 선언하지 않고, 인라인으로 작성한뒤 이벤트 핸들러의 event 매개변수 위로 마우스를 가져다 대면, TS는 이벤트 타입이 무엇인지 유추해서 표시해준다.

TS가 유추해준데로 타입을 지정해주면,

const outModalCloseHandler = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
    if (closeSearch && !modalRef.current.contains(event.target)) setCloseSearch(false);
};

return (
  	  <HeaderBlock onClick={outModalCloseHandler}>...</HeaderBlock>
);

event.target에서

Argument of type 'EventTarget' is not assignable to parameter of type 'Node'.
  Type 'EventTarget' is missing the following properties from type 'Node': baseURI, childNodes, firstChild, isConnected, and 43 more.

라는 에러가 난다...
사실, TS에서는 target말고 currentTarget을 사용한다고 알고 있었는데, 브라우저에서 console.log(event); 를 찍어보면 currentTarget에 null이다... TS는 null을 싫어하는데 왜 에러가 안나는 걸까?
currentTarget과 target의 차이점을 찾아보니

• 이벤트의 currentTarget 속성을 통해 '이벤트 리스너가 연결된 요소'에 액세스할 수 있습니다.

• 반면에 이벤트의 target 프로퍼티는 이벤트를 트리거한 요소(사용자가 클릭한 요소)에 대한 참조를 제공합니다.

그래서 target을 사용하니 위 에러가 나온것이다.
이 경우, event.target이 가르키는 대상이 확실하게 예상이 가능하고 null이 아니라면

const outModalCloseHandler = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
    if (closeSearch && !modalRef.current.contains(event.target as HTMLElement)) setCloseSearch(false);
};

return (
  	  <HeaderBlock onClick={outModalCloseHandler}>...</HeaderBlock>
);

as HTMLElement를 event.target 옆에 적어주면 에러는 없어진다!
스택오버 플로우에서는 Node라고 적어줬지만, 나는 HTMLElement로 적어줬다.

참고:
https://stackoverflow.com/questions/71193818/react-onclick-argument-of-type-eventtarget-is-not-assignable-to-parameter-of-t
https://stackoverflow.com/questions/71193818/react-onclick-argument-of-type-eventtarget-is-not-assignable-to-parameter-of-t
https://bobbyhadz.com/blog/typescript-react-onclick-event-type