[typescript]Cannot find namespace 'EmotionJSX' 에러 해결

상황

버튼들을 만들 때 코드 가독성을 위해 버튼 내 들어갈 내용을 객체로 만든 뒤 버튼 하나하나에 할당 하기로 구상했다.

버튼 안에 들어갈 내용들 : 아이콘, URL, 설명

나머지는 string으로 타입 설정 해주면 되지만 아이콘은 다른 타입이다.

interface btns {
  icon: string;
  name: string;
  description: string;
  url: string;
}

type btnType = btns[];

export default function HomeMainMenu() {  
  const icon1 = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="#000000"
      height="60%"
      width="60%"
      viewBox="0 0 490 490"
    >
      <g>
        <path d="M224.777,305.082H405.12c3.99,0,7.599-2.372,9.181-6.036l74.88-173.406c1.335-3.09,1.024-6.644-0.825-9.457   c-1.849-2.814-4.989-4.507-8.355-4.507H129.393l-20.676-63.188c-1.345-4.11-5.179-6.891-9.504-6.891H10c-5.523,0-10,4.478-10,10   c0,5.522,4.477,10,10,10h81.964l77.413,236.595c1.345,4.11,5.18,6.891,9.504,6.891h23.403l-28.482,54.688   c-3.65-0.958-7.48-1.473-11.428-1.473c-24.841,0-45.051,20.21-45.051,45.052c0,24.843,20.21,45.055,45.051,45.055   c21.402,0,39.356-15.011,43.916-35.055h176.654c4.561,20.044,22.511,35.055,43.912,35.055c24.845,0,45.058-20.212,45.058-45.055   c0-24.842-20.213-45.052-45.058-45.052c-21.4,0-39.352,15.009-43.912,35.052H206.29c-2.193-9.639-7.481-18.108-14.766-24.309   L224.356,306C224.514,305.698,224.653,305.391,224.777,305.082z M266.737,131.675h53.877l-28.801,66.698h-53.877L266.737,131.675z    M216.152,198.374h-53.871l28.794-66.698h53.877L216.152,198.374z M313.599,198.374l28.801-66.698h53.873l-28.801,66.698H313.599z    M358.835,218.374l-28.805,66.708h-53.873l28.805-66.708H358.835z M283.177,218.374l-28.805,66.708h-53.875l28.804-66.708H283.177z    M398.546,285.082h-46.73l28.805-66.708h46.731L398.546,285.082z M435.987,198.374h-46.73l28.801-66.698h46.731L435.987,198.374z    M169.292,131.675l-18.975,43.951l-14.381-43.951H169.292z M164.304,218.374h43.213l-24.584,56.934L164.304,218.374z    M162.374,428.404c-13.813,0-25.051-11.239-25.051-25.055c0-13.813,11.237-25.052,25.051-25.052   c13.812,0,25.049,11.238,25.049,25.052C187.423,417.165,176.186,428.404,162.374,428.404z M426.856,378.297   c13.816,0,25.058,11.238,25.058,25.052c0,13.815-11.241,25.055-25.058,25.055c-13.81,0-25.045-11.239-25.045-25.055   C401.811,389.536,413.047,378.297,426.856,378.297z" />
      </g>
    </svg>
  );

  const rectangles: btnType = [
    {
      icon: icon1,
      name: "사기",
      description: "블록체인으로 기록되는 안전한 거래를 이용해 보세요!",
      url: "/",
    },
    ...
    ...

이 때 아이콘 타입은

EmotionJSX.Elemnet 타입이다.

문제

EmotionJSX 라는 타입을 아무리 해도 임포트가 되지않는다.

치트키발동

하지만
type/emotion 은 npm에 등록되지 않았다고 나온다.

해결

export namespace jsx {
  namespace JSX {
    interface Element extends EmotionJSX.Element {}
    interface ElementClass extends EmotionJSX.ElementClass {}
    interface ElementAttributesProperty
      extends EmotionJSX.ElementAttributesProperty {}
    interface ElementChildrenAttribute
      extends EmotionJSX.ElementChildrenAttribute {}
    type LibraryManagedAttributes<C, P> = EmotionJSX.LibraryManagedAttributes<
      C,
      P
    >
    interface IntrinsicAttributes extends EmotionJSX.IntrinsicAttributes {}
    interface IntrinsicClassAttributes<T>
      extends EmotionJSX.IntrinsicClassAttributes<T> {}
    type IntrinsicElements = EmotionJSX.IntrinsicElements
  }
}

emotion 내부의 index파일을 보면 너무나 친절하고 가독성 좋게 나와있다.

import { jsx } from "@emotion/react";
interface btns {
  icon: jsx.JSX.Element;
  name: string;
  description: string;
  url: string;
}

너무나 쉽게 해결

배운점 : 무작정 검색하기전에 파일 구조 부터 보는 습관을 기르자.