"'EventTarget' 형식에 'parentElement' 속성이 없습니다."에 관한 타입에러

api 함수가 실행되었을때 e.target.parentElement의 속성을 사용하려고 했는데 타입에러가 발생 했다.

const handleDeleteApi = (itmeId: string | number | ObjectId , e:React.MouseEvent<HTMLElement, MouseEvent>) => {
  fetch("/api/delete/deleteItem", {
    method: "DELETE",
    body: itmeId.toString(),
  })
    .then((res) => {
      if (res.status === 200) {
        return res.json();
      } else {
        console.log("에러코드", res.status);
      }
    })
    .then((res) => {
    // 타입에러 발생
      e.target.parentElement.style.opacity = 0
    })
    .catch(() => {
      return new Error("에러");
    });
};

이러한 타입에러는 DOM 요소의 특정 속성에 대한 정보가 없기 때문에 발생한다. 그렇기 때문에 EventTarget 타입의 객체에서 parentElement 속성을 사용하려고 하면 위와 같은 에러가 발생한다.

이 문제를 해결하려면 EventTarget을 더 구체적인 타입으로 타입 단언(type assertion)하는 것이 일반적으로 지금과 같은 경우 e.target을 HTMLElement타입으로 단언하게 되면 parentElement속성을 사용할 수 있게 된다.

.then((res) => {
      (e.target as HTMLElement).parentElement.style.opacity = 0
    })

이렇게 수정하게 된다면 parentElement속성을 사용할 수는 있지만 개체가 'null'인 것 같습니다.라는 에러가 나오게 된다. 그래서 parentElement가 null인지 확인하는 코드를 추가해준다.

.then((res) => {
      const parent = (e.target as HTMLElement).parentElement;
      if (parent) {
        parent.style.opacity = 0;
      }
    })

마지막으로 CSS 스타일 속성은 항상 문자열 형식으로 들어와야 하기 때문에 숫자 0을 문자열 0으로 변경 해주면 문제를 해결할 수 있다.

.then((res) => {
      const parent = (e.target as HTMLElement).parentElement;
      if (parent) {
        parent.style.opacity = '0';
      }
    })