기존 .js 로 만든 과제 파일을 타입스크립트로 하나씩 마이그레이션 하는 도중 오류 발생.

...

const LinkSearchInput = ({
	onSubmit
}: {
	onSubmit: (keyword: string) => void;
}) => {

    ...
  
	const handleSubmit = (e: SubmitEvent) => {
		e.preventDefault();
		onSubmit(searchValue);
	};

	return (
	  <LinkSearchInputWrapper onSubmit={handleSubmit}>
      ...
      </LinkSearchInputWrapper>
	);
};

...

Error

• LinkSearchInputWrapper 컴포넌트는 form 태그로 만든 스타일드 컴포넌트인데, 여기 지정한 onSubmit 프롭에서 오류 발생.
  • No overload matches this call.
    Overload 1 of 2, '(props: PolymorphicComponentProps<"web", FastOmit<DetailedHTMLProps<FormHTMLAttributes, HTMLFormElement>, never>, void, void, {}, {}>): Element', gave the following error.
    Type '(e: SubmitEvent) => void' is not assignable to type 'FormEventHandler'.
    Types of parameters 'e' and 'event' are incompatible.
    Type 'FormEvent' is missing the following properties from type 'SubmitEvent': submitter, cancelBubble, composed, returnValue, and 8 more.
    Overload 2 of 2, '(props: FastOmit<DetailedHTMLProps<FormHTMLAttributes, HTMLFormElement>, never>): ReactNode', gave the following error.
    Type '(e: SubmitEvent) => void' is not assignable to type 'FormEventHandler'.ts(2769)

• overload가 무엇인지 알아봐야...

시도

• 스타일드 컴포넌트 코드를 인식하지 못해서 그런 것인지 싶어 npm i @types/styled-components 로 타입을 설치해봤지만 변화가 없었다.

해결

import { ChangeEvent, FormEvent, useState } from "react";

...

const LinkSearchInput = ({
	onSubmit
}: {
	onSubmit: (keyword: string) => void;
}) => {

    ...
  
	const handleSubmit = (e: FormEvent) => {
		e.preventDefault();
		onSubmit(searchValue);
	};

	return (
	  <LinkSearchInputWrapper onSubmit={handleSubmit}>
      ...
      </LinkSearchInputWrapper>
	);
};

...

• handleSubmit 함수의 매개변수의 타입을 SubmitEvent에서 FormEvent로 변경.
• FormEvent는 react에서 import

onChange 프롭의 타입은 ChangeEvent고
onClick 프롭은 MouseEvent인거면
대충 onSubmit은 SubmitEvent일 줄 알았는데 FormEvent가 맞았다.
에러메세지에서 힌트를 얻었다.

Type 'FormEvent' is missing the following properties from type 'SubmitEvent': submitter, cancelBubble, composed, returnValue, and 8 more.