여기에는 className과 몇개의 children이 있는 자식 컴포넌트가 있습니다.

interface ButtonProps {
  className: string;
  children: React.ReactNode;
}

export const Button = ({ children, className, onChange }: ButtonProps) => {
  return (
    <button onChange={onChange} className={className}>
      {children}
    </button>
  );
};

Challenge

onChange prop을 어떻게 입력할지 결정하고 그에 따라 ButtonProps를 업데이트 하는 것입니다.

Choose the Correct Event Handler Type

이 솔루션은 우리가 전에 배운 교훈을 되새기게 합니다.

먼저 onClick 위에 마우스를 가져갑니다.

몇 가지가 표시되지만, 가장 주목해야 할 것은 onClick이 React.MouseEventHandler 또는 undefined 로 정의되는 옵셔널 prop이라는 점입니다.

// hovering over onClick
globalThis.React.DOMAttributes<HTMLButtonElement>.onClick?:React.MouseEventHandler<HTMLButtonElement> | undefined

타입을 복사하여 interface에 추가합니다.

interface ButtonProps {
  className: string;
  children: React.ReactNode;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

이제 onClick에 React의 MouseEventHandler가 있고, 여기에 HTMLButtonElement를 전달합니다.

타입을 살펴보면 HTMLButtonElement 가 DOM 타입에서 들어온 것을 알 수 있습니다. HTMLDivElement와 같은 다른 엘리먼트를 전달하려고 하면 MouseEventHandler<HTMLDivElement> 타입은 MouseEventHandler<HTMLButtonElement>에 할당할 수 없기 때문에 typescript에서 에러가 발생합니다.

하지만 좀 더 일반적인 방법으로 타입 argument를 제거하고 대신 React.MouseEventHandler 를 사용할 수 있습니다.

이제 onClick 핸들러가 있는 Button을 만들면 e 프로퍼티에 자동완성 기능이 생깁니다.

const Parent = () => {
  return (
    <Button className="=" onClick={(e) => {
      // autocomplete works here
      e.currentTarget

Summary