[최종프로젝트] TailTales - typescript, react-full-page 적용 (2일차)

트러블 슈팅

문제

typescript에 react-full-page이 지원이 안되는 것 같다.

yarn add react-full-page

다시 패키지를 설치해도 계속 모듈이 없다고 나왔다.

 

 

 

해결

자꾸 모듈이 없다고 떠서 모듈을 만들어야하는 건가? 라고 생각했다.

 

 

1. src 폴더 안에 index.d.ts라는 파일 생성을 해준다.

그 안에 코드를 추가해준다.

// index.d.ts

declare module "react-full-page" {
  export interface ControlComponentsProps {
    getCurrentSlideIndex: () => number;
    onNext: () => void;
    onPrev: () => void;
    scrollToSlide: (n: number) => void;
    slidesCount: number;
    children: React.ReactNode;
  }

  export interface FullPageProps {
    initialSlide?: number;
    duration?: number;
    controls?: boolean | React.FC<ControlComponentsProps>;
    controlProps?: any;
    beforeChange?: () => void;
    afterChange?: () => void;
    scrollMode?: "full-page" | "normal";
    children: React.ReactNode;
  }

  export interface SlideProps {
    children: React.ReactNode;
    style?: { maxHeight: string };
  }

  export const FullPage: React.FC<FullPageProps>;

  export const Slide: React.FC<SlideProps>;
}

 

2. tsconfig.json 파일에 안에 있는 "include" 안에 "node_modules/react-full-page"를 추가해준다.

"include": ["src", "node_modules/react-full-page"]

 

 

---

느낀 점

typescript는 type만 지정하면 된다고 생각했는데 모듈까지 만들어야한다는 것을 알게되었다. 
typescript가 아직 익숙치 않아서 어렵게 느껴진다.

사용을 하면 배워 나가야겠다.