타입스크립트 IntrinsicAttribute 에러 해결

// Button.tsx

type ButtonProp = {
  children: string | ReactNode;
  _onClick?: (e: React.FormEvent<HTMLFormElement>) => void;
};

type ButtonStyleProp = {
  isValidate?: boolean;
};

export const Button = (
  { children, _onClick }: ButtonProp,
  props: ButtonStyleProp
) => {
  return (
    <ElButton onClick={() => _onClick} {...props}>
      {children}
    </ElButton>
  );
};

회원가입 페이지(Register.tsx)에서 다음처럼 Button 컴포넌트를 활용하던 중 isValidate(주황색)에 빨간 줄이 쳐지며 IntrinsicAttribute~ 에러가 발생했다.

 <Button isValidate={isValidate} _onClick={handleSubmit}>
              {isLoading ? (
                <LoadingSpinner>
                  <div className='spinner'></div>
                </LoadingSpinner>
              ) : (
                '회원가입'
              )}
            </Button>

에러 메시지

Type '{ children: string | Element; isValidate: boolean; _onClick: (e: FormEvent) => void; }' is not assignable to type 'IntrinsicAttributes & ButtonProp'.

ButtonProp이 ButtonStyleProp(isValidate?: boolean 부분)을 포함을 하지 않아서 발생한 에러였다.

ButtonProp의 type을 interface로 바꾸고 extends로 ButtonStyleProp을 상속하게 했더니 해결되었다.

해결 코드

// Button.tsx

interface ButtonProp extends ButtonStyleProp { // 여기 한 줄 수정
	children: string | ReactNode;
	_onClick?: (e: React.FormEvent<HTMLFormElement>) => void;
}

type ButtonStyleProp = {
	isValidate?: boolean;
};