onClick 이벤트의 타입을 React.MouseEvent<HTMLButtonElement> 로 지정했는데 e.target.innerText 부분에 에러가 발생했다.

에러메시지

Property 'innerText' does not exist on type 'EventTarget’

타입스크립트가 적절한 타입을 찾지 못해서 발생하는 오류로 타입스크립트에게 명시적 형변환을 해주면 해결된다.

해결

const eventTarget = e.target as HTMLElement;

전체 코드

const clickButton = (e: React.MouseEvent<HTMLButtonElement>) => {
    // console.log(eventTarget.innerText);
    // console.log(e.target.innerText); Property 'innerText' does not exist on type 'EventTarget’
    const eventTarget = e.target as HTMLElement; // 해결
    if (isNaN(Number(eventTarget.innerText))) {
      // 숫자가 아닌 기호를 클릭
      if (eventTarget.innerText === "C") {
        setScreen("");
      } else if (eventTarget.innerText === undefined) {
        setScreen(screen?.slice(0, -1)); // 지우기 클릭
      } else if (eventTarget.innerText === "=") {
        // 결과 값
        if (screen?.length !== 0) {
          let sum = new Function(`return ${screen}`);
          setScreen(sum().toString());
        }
      } else {
        if (screen) {
          if (isNaN(Number(screen[screen.length - 1]))) {
            setScreen((prevState) => prevState?.slice(0, -1));
            setScreen((prevState) => prevState + eventTarget.innerText);
          } else {
            setScreen(screen + eventTarget.innerText);
          }
        }
      }
    } else if (eventTarget.innerText?.length === 0) {
      setScreen(screen?.slice(0, -1));
    } else {
      setScreen(screen + eventTarget.innerText);
    }
  };