[TS] 타입 설정 예시(interface, select event, 함수, 객체, undefined)

제네릭 타입(Generic)

: 클래스 외부에서 타입을 정하는 것

import { FC } from 'react'

interface DogsProps {
  status: string;
  message: string[]; // 문자열이 담긴 배열
}

function GetDogs: FC<DogsProps> ({ status, message }) {
  ...
}

 

select event

interface SelectProps {
  handleOnChange: (event: ChangeEvent<HTMLSelectElement>) => void;
  ...
}

 

함수

(매개변수 타입) => void(리턴이 없는 경우)
(매개변수 타입) => 반환값의 타입(리턴이 있는 경우)

 

객체

interface ObjProps {
  objVal: {} // 이렇게 지정해도 오류 나지 않음
  objVal: Record<string, string[]> // 객체 더 명확하게 명시하기
}

 

값이 안들어오는 경우도 undefined로 처리

interface AlbumProps {
  bind: {
    data: {
      status: string,
      message: string[]
    } | undefined
    isError: boolean,
    isLoading: boolean
  }
}

 

 

 

 

2023.04.20