[에러 일지] 'EventTarget' 형식에 '...' 속성이 없습니다. ts(2339)

이벤트에 타입 적용 시 event.target에 어떤 속성이 없다는 에러가 종종 발생한다.

이럴 때에는 event 파라미터에서 모든 타입을 해결하려고 하지 말고, event와 target을 분리해서 각각의 타입을 지정해주면 된다.

기존

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  // checked 속성이 없다며 에러 발생
  if (event.target.checked) allCheckAction(true);
  else allCheckAction(false);
};

...

<Checkbox
  checked={checked}
  onChange={handleChange}
  onClick={handleClick}
  />

변경

event의 타입과 target의 타입을 분리해서 적용해주면 해결된다.

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  // target 분리
  const target = event.target as HTMLInputElement;
  if (target.checked) allCheckAction(true);
  else allCheckAction(false);
};