1. 이벤트 매개변수 타입 설정

• 매개변수로 우선 이벤트를 받는데, 여기서는 change 이벤트이기에 ChangeEvent 타입을 사용한 후, input태그에서 발생하므로 HTMLInputElement를 제네릭으로 넘겨준다.

  // onChange 이벤트 예제
  const updateValue = (e: React.ChangeEvent<HTMLInputElement>) => { // 1
  	setEmail(e.target.value);
  };
  
  //생략
  
  <input onChange={updateValue} />
  

• click, change, scroll 등의 이벤트 타입은 리액트에서 제공하는 것으로 사용하면 된다.

  • 일반적으로 타입 이름은 "이벤트타입Event"으로 ChangeEvent, FormEvent, TouchEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent 등

2. JSX.Element 타입 지정

• 변수에 JSX를 할당하는 경우도 똑같이 해주면 된다.

  const WarningText: JSX.Element = <p>다시 확인해주세요.</p>
  

3. 전역 변수 타입 지정

• 타입스크립트에서는 window 객체에 추가된 외부라이브러리라 할지라도 사용하기 위해 타입을 정의하지 않으면 에러메시지가 뜬다.

  Property 'kakao' does not exist on type 'Window & typeof globalThis'.

• window에 외부 라이브러리 변수를 추가하려면 해당 라이브러리에서 사용하는 전역 변수명을 추가한다.

  declare global {
  	interface Window {
  		kakao: any;
  	}
  }
  

  • 이제 kakao로그인을 위한 라이브러리는 window.kakao로 접근하면 된다.