event.target property 접근_as를 통한 타입 단언(Type Assertion)

문제

화면에 랜더링 된 각 리스트를 누르면 해당 리스트의 상세 페이지로 이동하는 기능을 구현하기 위해 다음과 같이 각 리스트에 고유 아이디 값을 dataset에 할당해주었고 해당 id값을 path query parameter에 할당해주었다.

const LinkPage: FC<LinkPageProps> = ({ itemInfoList }: LinkPageProps) => {
  const navigate = useNavigate();

  const moveToDetailPage = (
    e: React.MouseEvent<HTMLParagraphElement, MouseEvent>
  ) => {
    const id = (e.target as HTMLParagraphElement).dataset.id;
    navigate(`/detail?id=${id}`);
  };

	( ... )

  return (
             <LinkTitle
               data-id={itemInfo.key}
               onClick={moveToDetailPage}
               >
               {itemInfo?.sent ? itemInfo.sent.subject : "무제"}
              </LinkTitle>
  );
};

 

하지만 다음과 같이 타입 에러가 발생하는 문제가 발생하였다.

'EventTarget' 형식에 'dataset' 속성이 없습니다. ts(2339)

 

문제해결

TypeScript 컴파일러가 타입을 실제 런타임에 존재할 변수의 타입과 다르게 추론하거나 너무 보수적으로 추론하는 경우에 위와 같은 문제가 발생한 것인데, 이를 해결하기 위해 as 문법을 사용하였다.

 

다음과 같이 e.target는 p 태그 기반인 엘리먼트이기 때문에 type 값이 HTMLParagraphElement이며, 안정적으로 event.target의 특정 property에 접근하기 위해 as 구문을 사용하여 해당 type으로 타입 단언(Type Assertion) 을 선언해 주었다.

 const moveToDetailPage = (
    e: React.MouseEvent<HTMLParagraphElement, MouseEvent>
  ) => {
    const id = (e.target as HTMLParagraphElement).dataset.id;
    navigate(`/detail?id=${id}`);
  };

 

Reference

https://stackoverflow.com/questions/42066421/property-value-does-not-exist-on-type-eventtarget

Property 'value' does not exist on type 'EventTarget'