Programming/🧞‍♂️ React, TypeScript

[TypeScript] 외부 패키지 사용시, dev dependency 해결하기

남남이루 2023. 6. 7. 14:59

문제

canvas-confetti 패키지 사용하고 싶었다! 폭죽 효과

타입 추론이 안 되는 패키지의 함수는 바로 사용할 수 없음, 추론할 수 없다는 에러 발생

 

해결

  • yarn이나 npm 에 @types/{패키지나 라이브러리명} 추가해주기
yarn add -D @types/canvas-confetti
yarn add --dev @types/canvas-confetti

npm install -D @types/{패키지명}
npm install --save-dev @types/{패키지명}

(-D 옵션은 개발 빌드할 때만 쓰는 패키지를 설치할 때 쓴다,,~ 옵션 위치도 맨 뒤거나 명령어 다음이거나 상관없는듯, 맨 뒤에 써야겠다 다음엔)

  • 또는 root 디렉토리 (App.js, App.tsx 가 위치한..)에 {패키지명}.d.ts 파일을 수동으로 생성해서 모듈의 타입 선언해주기
    • declare module "canvas-confetti";
  • 해도 안 됐으면 yarn start 서버 돌리던거 재시작

참고

npm canvas-confetti

yarn canvas-confetti

Modules.d.ts TypeScriptlang.org