React TypeScript @types 가 없는 모듈 오류 해결 방법

react + ts 개발환경에서 개발을 하다보면 npm에서 많은 모듈을 찾아와서 쓰게 된다.

하지만 typescript환경에서 npm 모듈을 사용하려면 @types/모듈이름이 있어야하는데 많은 npm 모듈들이 이를 지원한다.

 

npm install 모듈이름 << 을 하고 난 후에 제대로 동작하지 않는다면 

npm install @types/모듈이름 << 을 시도해보면 무언가 라이브러리가 설치되고 문제가 해결될 것이다.

 

나 또한 이런 방법으로 오류를 해결하곤 했는데 가끔 @types를 지원해주지않는 모듈이 있다.

처음 이 모듈을 만났을때 상당히 당황하고 절망했었다.

엥..? 이거 지원 안 해주면 내가 직접 만들어야하는건가? 아니면 이제와서 jsx 파일로 바꿔야하는건가

 

하지만 구글링은 위대했다. 이미 사람들은 문제를 해결하는 방법을 알고 있었다!

 

node_modules 폴더에 가면 @types 라는 폴더가 있다(없다면 만들면 되는 것 같다.)

이곳에 본인이 사용하고자하는 모듈 이름의 폴더를 만들고 index.d.ts 파일을 생성한다.

node_modules/@types/모듈이름폴더/index.d.ts

그리고 이 폴더 안에 다음과 같이 작성해준다.

 

declare module "모듈이름"

bootpay 모듈로 작성한 예시

이제 import 문에서 오류가 뜨지 않을것이다!

 

참조 : https://velog.io/@yyeonjju/TypeScript-types-%EC%97%86%EB%8A%94-%EB%AA%A8%EB%93%88-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95