I Learn || typescript를 지원하지 않는 라이브러리를 사용해야 할 때

자바스크립트로 구현한 프로젝트를 타입스크립트로 마이그레이션 할때 기존에 사용한 react-full-page 라는 라이브러리를 변경하면서 겪은 문제점입니다.

이 라이브러리를 자바스크립트에서 사용하다가 마이그레이션을 하던 도중에 아래와 같은 에러를 만났습니다.

ERROR in src/pages/about/About.tsx:12:33

TS7016: Could not find a declaration file for module 'react-full-page'. '/PROJECT-PATH/node_modules/react-full-page/lib/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-full-page` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-full-page';`
    10 | import AboutPartner from "./components/AboutPartner";
    11 | // library
  > 12 | import { FullPage, Slide } from "react-full-page";
       |                                 ^^^^^^^^^^^^^^^^^
    13 | import changeLanguage from "../../module/changeLanguage";
    14 | import { useMediaQuery } from "@mui/material";
    15 | import { english_about, korean_about } from "../../language/aboutData";

에러 메세지에서는 npm i --save-dev @types/react-full-page를 커맨드로 입력해서 타입스크립트를 지원하는 패키지를 설치하라고 했지만, 현재 react-full-page 는 타입스크립트를 지원하지 않는 것 같습니다.

해당 문제를 해결하기 위해서 패키지가 배포된 깃허브 이슈 부분을 찾아보았고, 해결하게 되었습니다.
(링크)

타입스크립트에서 에러를 띄우는것은 node_modules 안에 있는 패키지 디렉토리에서 타입을 지정해주는 부분이 누락되어 띄우는 것으로, 타입을 지정해주면 됩니다.

1. node_modules -> package 디렉토리 -> lib 로 이동

2. 이동한 디렉토리에 index.js 파일이 있습니다. 이 파일에 필요한 타입을 같은 경로에 index.d.ts 라는 파일을 생성해서 지정해줍니다.

3. 생성한 index.d.ts 파일안에 타입을 지정해 줍니다. 저는 깃허브 이슈란에 공유된 타입을 넣어주었습니다.
   ex) react-full-page

   declare module "react-full-page" {
     type ControlComponentsProps = {
       getCurrentSlideIndex: () => number;
       onNext: () => void;
       onPrev: () => void;
       scrollToSlide: (n: number) => void;
       slidesCount: number;
       children: React.ReactNode;
     };
   
     type FullPageProps = {
       initialSlide?: number;
       duration?: number;
       controls?: boolean | React.FC<ControlComponentsProps>;
       controlProps?: any;
       beforeChange?: () => void;
       afterChange?: () => void;
       scrollMode?: "full-page" | "normal";
       children: React.ReactNode;
     };
   
     type SlideProps = {
       children: React.ReactNode;
       style?: { maxHeight: string };
     };
   
     export const FullPage: React.FC<FullPageProps>;
   
     export const Slide: React.FC<SlideProps>;
   }

4. 지정한 뒤에 실행해보면 문제 없이 작동하게 됩니다.