TIL | TypeScript (제네릭, 이벤트 객체 타입 지정 ...)

23.08.01

1. TypeScript

1-1. 제네릭

제네릭(Generics) : 클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 프로그래밍 기법
(JavaScript와 같은 동적 타입 언어에서는 생소한 개념이지만, TypeScript는 정적 타입 언어라 제네릭을 지원)

참고 문서

1-2. 타입스크립트에서 이벤트 객체 타입 지정

타입스크립트에서는 이벤트 객체에도 타입 지정을 해줘야 함

// 예시
  const handler = (e: React.MouseEvent<HTMLButtonElement>) => {
  };

위 코드처럼 evnet를 사용하려면 MouseEvent이런 식으로 해당 event에 맞는 타입을 지정해줘야 함
또한 html 요소가 있다면 < > 안에 html 요소의 타입도 지정해줘야 함

위 사진처럼 다양한 Event 객체에 대한 타입이 존재함

참고 블로그

1-3. onClick, onSubmit 등 이벤트 타입 찾는 방법

<form onSubmit={event=>{}}>...</form>

event에 커서를 올리시면 event에 대한 타입이 나옴

1-4. 타입 지정시 : vs <>

• : : 함수나 타입을 만들 때 ?
• <> : 사용할 때 타입이 결정됨 ? 제네릭을 사용하겠다는 의미