React x TypeScript의 귀신 중 하나는'props에 기술된 EventCallback의 적절한 작법을 모른다'는 것이다.그렇다면 이 구성 요소의 type Props 유형을 어떻게 정의해야 합니까?

const View: React.FC<Props> = props => (
  <form onSubmit={props.onSubmit}>
    <input
      type="text"
      onClick={props.onClick}
      onChange={props.onChange}
      onKeyPress={props.onkeypress}
      onBlur={props.onBlur}
      onFocus={props.onFocus}
    />
    <div onClick={props.onClickDiv} />
  </form>
)

'특별한 어려움이 없다'고 타협한 적 있나요?부분적인 타협도 TypeScript의 장점이지만 얻기 어려운 기회이기 때문에 잘하고 싶어요.

type Props = {
  onClick: (event: any) => void
  onChange: (event: any) => void
  onkeypress: (event: any) => void
  onBlur: (event: any) => void
  onFocus: (event: any) => void
  onSubmit: (event: any) => void
  onClickDiv: (event: any) => void
}

하지만 Event Callback 장르가 다양해요. 어떤 게 좋을지 처음 보는데... 헷갈리죠.자신이 평소에 VSCODE를 사용하기 때문에 길을 잃을 때 VSCODE의 코드 힌트에 의존한다.다음 포착은 onClick에 마우스가 onClick에 멈췄을 때 비어 있는 것입니다.

답안은 모두 형식 추리에 쓰여 있다!이렇게 하면 지정된 방법을 알 수 있기 때문에 복제한다.

type Props = {
  onClick: (event: React.MouseEvent<HTMLInputElement>) => void
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void
  onBlur: (event: React.FocusEvent<HTMLInputElement>) => void
  onFocus: (event: React.FocusEvent<HTMLInputElement>) => void
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
  onClickDiv: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
}

Generics가 지정한 모델은 무엇입니까?

그렇다면 React.MouseEvent<XXX>형과 React.ChangeEvent<XXX>형처럼 Generics에서 지정한 HTMLInputElement형과 HTMLDivElement형 등 다양한 유형이...
import도 하지 않았습니다. 이 모델은 어디에서 왔습니까? 도대체 이 지정들은 무엇을 바꿉니까?HTMLInputElement 금형의 내용을 살펴보자.몰드 위에 마우스를 올려 놓고 Option 키를 누른 채 마우스를 클릭하여 평소와 같이 몰드 정의로 이동합니다.
@types/react/global.d.ts

interface HTMLDivElement extends HTMLElement { }
interface HTMLDListElement extends HTMLElement { }
interface HTMLEmbedElement extends HTMLElement { }
interface HTMLFieldSetElement extends HTMLElement { }
interface HTMLFormElement extends HTMLElement { }
interface HTMLHeadingElement extends HTMLElement { }
interface HTMLHeadElement extends HTMLElement { }
interface HTMLHRElement extends HTMLElement { }
interface HTMLHtmlElement extends HTMLElement { }
interface HTMLIFrameElement extends HTMLElement { }
interface HTMLImageElement extends HTMLElement { }
interface HTMLInputElement extends HTMLElement { }
interface HTMLModElement extends HTMLElement { }
interface HTMLLabelElement extends HTMLElement { }
interface HTMLLegendElement extends HTMLElement { }
interface HTMLLIElement extends HTMLElement { }

지면 때문에 생략했는데, 이렇게 많아... 나왔어!자세히 보니까대부분extends HTMLElement { }이다.이름만 다르고 다 똑같은 거 아니에요?원래 @types/react/global.d.ts형은 어디서 왔을까...

캡처 오른쪽과 같이 목록에 표시됩니다.HTMLInputElement 및 lib.dom.d.ts에 정의되어 있습니다.global.d.ts는 @types/react에서 제공하는 정의이고, global.d.ts는 TypeScript에서 제공하는 정의입니다.
"lib.dom.d.ts 뭐 넣었는지 기억이 안 나요"라고 생각할 수도 있습니다. 이것은 tsconfig의lib가 지정한 것입니다.tsconfig의lib가 지정되지 않으면 다른 지정한 내용 (target 등) 에 따라import의 적당한 기본lib가 됩니다. 따라서 이렇게 됩니다.출처불명lib.dom형은 이렇게 인터페이스의 과부하 구조로 반복적으로 칠한 것이다.

필요에 따라 추상도를 확정하다

여러 유형(예: Div 태그 버튼 태그)에 HTMLInputElement을 적용하려면 세부 유형onClick 또는 HTMLInputElement 유형을 지정하면 일반적이지 않을 수도 있고 불편할 수도 있습니다.이럴 때는 상속원HTMLDivElement형 등 추상적인 형만 지정하면 된다.

type Props = {
  onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
}

EventCallback의 매개 변수형을 즐기고 싶은 경우 유형 추리 같은 내용을 사용하세요.

type Props = {
  onClickButton: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
}