문제 상황

interface를 작성해서, 배열을 만들었고, 그렇게 만든 배열을 props로 다른 컴포넌트에 전달했다.
이런 경우 Typescript에서는 props를 전달받는 컴포넌트에도 별도로 타입을 지정해줘야하는데, 다시 전부 작성하는 귀찮은 상황을 막기 위해서 export, import를 사용한다.
그런데...왜 계속 못 받아오는 에러가 발생하는걸까?

원인

Typescript가 3.8 버전으로 업데이트 되면서 import를 하는 방식이 변경되었다고 한다.
export 사용법에는 변화가 없는 것으로 보인다.

적용

// HeaderNav.tsx
export interface DropMenuProps {
  where: string;
  whereLink: string;
}

// 위 코드에서 export를 제거하고 아래처럼 작성해도 된다.
// export { DropMenuProps };

const drop1Menu: DropMenuProps[] = [
  {
    where: "도쿄",
    whereLink: "https://www.japan.travel/ko/destinations/kanto/tokyo/",
  },
  {
    where: "교토",
    whereLink: "https://www.japan.travel/ko/destinations/kansai/kyoto/",
  },
  {
    where: "오사카",
    whereLink: "https://www.japan.travel/ko/destinations/kansai/osaka/",
  },
  {
    where: "홋카이도",
    whereLink: "https://www.japan.travel/ko/destinations/hokkaido/hokkaido/",
  },
  {
    where: "오키나와",
    whereLink: "https://www.japan.travel/ko/destinations/okinawa/okinawa/",
  },
];


<DropdownMenu dropMenu={drop1Menu} />

// DropdownMenu.tsx
import type { DropMenuProps } from "./HeaderNav";

interface PropsType {
  dropMenu: DropMenuProps[];
}

function DropdownMenu({dropMenu}: PropsType) {
  return (
    //...생략
  );
}

export default DropdownMenu;

결론

Typescript에서 export된 interface나 type을 사용하고 싶다면
import 하는 곳에서

import type {interface나type이름} from "파일 경로"

이런 식으로 사용해주면 된다. 중괄호를 잊지말자.

참고 자료

참고 자료