• 카테고리

    질문 & 답변
  • 세부 분야

    프로그래밍 언어

  • 해결 여부

    해결됨

안녕하세요. 질문 있습니다.

22.12.21 22:36 작성 22.12.21 23:01 수정 조회수 293

0

안녕하세요.

강의와 관련된 내용은 아니지 추가 공부중 이해하기 어려운 부분이 혼자 고민해봐도 확실한 답을 찾지 못해 질문 드립니다.

 

먼저 책 내용은 아래와 같았습니다.

위와 같은 이유로 라이브러리는 공통 함수 시그니처를 함수 타입으로 제공하기도 한다. 또한 공통 콜백 함수를 위한 타입 선언을 제공하는 것이 좋다. 예를 들어 리액트는 함수의 매개변수에 명시하는 MouseEvent 타입 대신 함수 전체에 적용할 수 있는 MouseEventHandler 타입을 제공한다.
만약 같은 타입 시그니처를 반복적으로 작성한 코드가 있다면 함수 타입을 분리해 내거나 이미 존재하는 타입을 찾아보자. 라이브러리를 직접 만든다면 공통 콜백에 타입을 제공해야한다.

 

그리고 관련된 타입은 아래와 같이 있었습니다.

type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];

type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;

onAuxClick?: MouseEventHandler<T> | undefined;
onAuxClickCapture?: MouseEventHandler<T> | undefined;
onClick?: MouseEventHandler<T> | undefined;
onClickCapture?: MouseEventHandler<T> | undefined;
onContextMenu?: MouseEventHandler<T> | undefined;
onContextMenuCapture?: MouseEventHandler<T> | undefined;
onDoubleClick?: MouseEventHandler<T> | undefined;
onDoubleClickCapture?: MouseEventHandler<T> | undefined;
onMouseDown?: MouseEventHandler<T> | undefined;
onMouseDownCapture?: MouseEventHandler<T> | undefined;
onMouseEnter?: MouseEventHandler<T> | undefined;
onMouseLeave?: MouseEventHandler<T> | undefined;
onMouseMove?: MouseEventHandler<T> | undefined;
onMouseMoveCapture?: MouseEventHandler<T> | undefined;
onMouseOut?: MouseEventHandler<T> | undefined;
onMouseOutCapture?: MouseEventHandler<T> | undefined;
onMouseOver?: MouseEventHandler<T> | undefined;
onMouseOverCapture?: MouseEventHandler<T> | undefined;
onMouseUp?: MouseEventHandler<T> | undefined;
onMouseUpCapture?: MouseEventHandler<T> | undefined;

제가 이해한건 onClick, onDoubleClick에 관련된 이벤트를 모두 만들지 않고 MouseEventHandler 하나로 타입을 지정 가능하도록 했다 라는 뜻으로 이해했는데 맞을까요?

그리고 공통 콜백 함수를 위한 타입 선언을 제공하는 것이 좋다 라는 문장은 저 MouseEventHandler 타입을 개발자에게 제공하여 편하게 사용하는 것이 좋다, onClick, onDoubleClick 같은 속성에 들어갈 함수를 위한 타입을 제공하는 것이 좋다 로 이해했는데 맞을까요??

마지막 문장은 해당 부분을 중괄호() 로 이해 했는데 맞을까요?? 같은 타입 시그니처를 반복적으로 작성한 코드가 있다면(MouseEventHandler 타입인 함수들) 함수 타입(MouseEventHandler)를 분리해내거나 이미 존재하는 타입(MouseEventHandler)를 찾아보자. 라이브러리를 직접 만든다면 공통 콜백에 타입을 제공(MouseEventHandler)해야한다.

 

제 질문 자체가 이상하면 솔직히 말해주시면 감사합니다ㅠㅠ 감사합니다!!

답변 1

답변을 작성해보세요.

0

const onClick = (e: MouseEvent): void => {};

하지 말고 const onClick: MouseEventHandler = (e) => {};

하라는 것 같습니다.

감사합니다 큰 도움 됐습니다!!