function ButtonHandler(){
	const showAlert = (<u>**event:**</u> string) => {
		console.log(event)
	}
	return <button onClick={showAlert}>SHOW</button>

매개변수 event를 맞지 않는 type으로 넘겨주면,

에러문구가 출력이 된다.

<aside> ✏️ ‘(event: string) ⇒ void’ 형식은 ’MouseEventHandler<HTMLButtonElemet>’ 형식에 할당할 수 없습니다. ’event’ 및 ‘event’ 매개 변수의 형식이 호환되지 않습니다.

⭐️ ’MouseEvent<HTMLButtonElement, MouseEvent>’ 형식은 ‘string’ 형식에 할당할 수 없습니다.

</aside>

에러문구에서 올바른 type형식을 추론해 볼 수 있다.

interface MouseEvent<T = Element, E = MouseEvent>

<T = Element>는 제네릭이라고 부른다.

제네릭 안에 정의된 type은 event를 달고 있는 tag의 정보가 되는 것이다.

즉, MouseEvent의 대상이 되는 Tag 값이다.

function ButtonHandler(){
	const showAlert = (event: MouseEvent<HTMLButtonElement>) => {
		console.log(event)
	}
	return <button onClick={showAlert}>SHOW</button>

🔥 But

vue.js에서는 EventHandler Type에서 제네릭 타입을 받지 않는다.

react가 정의한 EventHandler Type은 조금 더 react화 한 type이고(react 라이브러리 내부에 정의),

vue는 DOM에 특화된 범용적인 type이라 볼 수 있다.