타입스크립트(with Recoil, Next.js)

타입스크립트(with Recoil, Next.js)

1. 일단 타입스크립트는 기본적으로 전역으로 관리한다.
   아래처럼 map.d.ts를 만들어주자
   

2. 다음 사용할 interface를 지정해주자.
   각각의 항목은 console.log를 찍어보면서 안에 있는 값이 어떤건지 확인을 직접 해줘야한다.

declare interface IData {
  address_name: string;
  category_group_code: string;
  category_group_name: string;
  category_name: string;
  distance: string;
  id: string;
  phone: string;
  place_name: string;
  place_url: string;
  road_address_name: string;
  x: string;
  y: string;
}

declare interface IDisplayCenterInfo {
  address_name: string;
  code: string;
  region_1depth_name: string;
  region_2depth_name: string;
  region_3depth_name: string;
  region_4depth_name: string;
  region_type: string;
  x: number;
  y: number;
}

declare interface IMarkerData {
  address: string;
  city: string;
  clickCounter: number;
  content: string;
  createdAt: number;
  creator: string;
  id: string;
  imgUrl: string;
  lat: number;
  long: number;
  nickname: string;
  title: string;
  town: string;
}

declare interface ISearchCategory {
  address_name: string;
  code: string;
  region_1depth_name: string;
  region_2depth_name: string;
  region_3depth_name: string;
  region_4depth_name: string;
  region_type: string;
  x: number;
  y: number;
}

3. 이렇게 원하는 부분에 해당 interface를 끌어다가 쓰면 된다.

4. Input과 Form은 아래와 같이 타입을 잡아주면 된다.

  const onchange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputText(e.currentTarget.value);
  };

  const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
    e.preventDefault();
    setPlace(inputText);
    setInputText('');
  };

4. 만약 prop을 받아온 state를 타입잡아야한다면 아래처럼 하면 된다.

interface IModalMapsMarkerProps {
  item: IMarkerData;
  isOpen: any;
  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const ModalMapsMarker = ({
  item,
  isOpen,
  setIsOpen,
}: IModalMapsMarkerProps) => {
  return (