React Typescript 외부 라이브러리 사용 관련 정리

1. @types/... 타입 스크립트 지원 안하는 라이브러리 사용법

• root/types 폴더 생성 후 'index.d.ts'파일 생성

declare module 'react-date-range';

• 해당 파일에 위와 같이 명시해주면 됌.

  [Typescript] @type이 없는 외부 라이브러리 사용 방법

2. 외부 라이브러리 커스텀이 필요한 경우 - 'patch-package' 사용

• package.json - scripts에 추가

"postinstall": "patch-package"

• install 'patch-package'

npm i patch-package

• node_modules의 해당 dist 폴더 파일 수정
• 패치 파일 생성

npx patch-package <package name>

• 'patches' 폴더 생성 후(위 명령어 수행시 자동 생성 됌) 수정사항 반영 확인

모듈 수정 적용 방법
patch-package git
[patch-package] 오픈소스 라이브러리 간단하게 커스텀하기

3. node_modules 파일 수정 했는데 적용 안되는 경우 해 볼 것들

• (typescript 지원 안하는 외부 라이브러리인 경우)
  --> types/해당 패키지명/index.d.ts 파일의 경로 수정해보기

declare module "react-mobile-datepicker"; //기존 경로
declare module "react-mobile-datepicker/dist/react-mobile-datepicker"; //수정 경로

• 빌드후 재시작 해보기

//package.json scripts
npm run build
npm run start