[에러 일지] event의 타입은?

event의 타입은?

function Home() {
  const handlePageMove = (e) => {
    // Err: 'e' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.
  };
  
  return(
  ...
    <EngButton onClick={handlePageMove}>login</EngButton>
  )
}

event는 대체 타입이 뭘까...?

event의 타입을 onClick에 바로 함수를 담아주었더니 event의 타입이 이미 정의되어있음을 확인했다

function Home() {
  const handlePageMove = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  };
}

그대로 타입을 지정해주니 에러가 해결되었다!

e.target.innerText가 왜 없을까...

우와~ 방금 에러 해결했는데 1초 만에 다시 만났다~

innerText가 없다고 한다!
EventTarget에 대체 뭐가 들었는 지 확인하러 lib.dom.d.ts 파일을 뜯어보았다.

확인해보니 정말 없다
innerText만 없는 게 아니라 value, className 등등 원래 내장 되어 있던 그 수많은 속성들이 전부 없었다!

찾아보니 innerText는 HTMLElement라는 인터페이스 안에 정의되어 있었다.

innerText가 어디에 정의되어 있는 지는 찾았다!
그래서 이걸 어떻게 적용해야 하나 찾아보니 타입 단언을 통해 적용이 가능하다는 것을 알아냈다.

타입 단언

개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식
타입스크립트에서 특별히 타입을 체크하지 않고, 데이터의 구조도 신경쓰지 않는다.

1. 앵글 브라켓(angle-bracket, <>) 문법을 사용하는 방법

let shouldString: any = 'hi';
let stringLength: number = (<string>shouldString).length;

2. as 문법을 사용하는 방법 ⇒ JSX와 함께 사용하는 경우 as 문법만 허용된다!

let shouldString: any = 'hi';
let stringLength: number = (shouldString as string).length;

const handlePageMove = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  console.log((e.target as HTMLElement).innerText); // login
};

콘솔 창에서 login이 잘 찍히는 것을 확인할 수 있었다!!

HTMLElement에 마우스 호버해보니 Any HTML element라고 적혀 있었다.

console.log((e.target as HTMLButtonElement).innerText)

// 변수에 담아 사용할 수도 있다.
const eventTarget = e.target as HTMLButtonElement;
console.log(eventTarget.innerText)

타겟이 button이기 때문에 확실히 명시해주는 게 좋지 않을까? 싶어서 HTMLButtonElement으로 변경해보니 역시 정상적으로 작동하였다!

분명 니코쌤이 수퍼수퍼쿨하다고 했는데 대체 언제 수퍼수퍼쿨해지는 건지 모르겠따. . .

참고
타입스크립트 핸드북 - 타입 단언