ts에서 js라이브러리 사용하기 -index.d.ts 모듈

바다·2023년 7월 9일
npmtypescript
1

typescript

목록 보기
1/1
post-thumbnail

typescript로 프로젝트를 진행하면서 필요한 라이브러리가 js로 만든 버전일 경우를 종종 만나게 된다.
그럴 경우 보통은 typescript를 지원하는 다른 라이브러리를 찾지만 다른 라이브러리가 없거나 typescript를 지원하지 않는 이 라이브러리를 사용해야하는 경우라면 어떻게 해야 js라이브러리가 typescript환경에서도 사용할 수 있을까?

1. js 라이브러리를 typescript에서 사용할 경우 발생하는 오류와 해결 방법

오류 문구

js 라이브러리를 typescript에서 사용할 경우 위의 사진처럼 해당 라이브러리명을 가진 모듈에 대한 선언 파일을 찾을 수 없다는 오류 메세지가 뜬다.

오류 해결 방법

해당 오류를 해결하는 방법들에는 다음이 있다.

  • @types/라이브러리 해당 모듈을 설치
  • index.d.ts 파일을 추가

typescript를 지원하는 라이브러라면 해당 모듈을 다운로드 하면 된다.
그러나 지금은 typescript를 지원하지 않는 라이브러리를 사용하는 경우를 가정하기 때문에 우리는 index.d.ts. 파일을 추가해서 오류를 해결해야 한다.

잠깐! node_modules/@types 폴더는 뭐야 🤔?

node_modules의 하위 폴더인 @types는 typescript에서 사용하는 타입 정의 파일들이 모여 있는 곳으로 "@types/라이브러리"에는 해당 라이브러리에서 사용하는 타입 정의 파일이 담겨 있다.
TypeScript 컴파일러는 이런 타입 정의 파일들을 참고해서 라이브러리나 모듈의 타입을 검사하고, 코드 힌팅이나 자동 완성 등을 제공해준다.

2. index.d.ts 파일 추가

step1. root/types/라이브러리명 폴더 만들기

node_modules의 @types안에 라이브러리명 폴더를 만들어주어도 된다.
그러나 나는 모듈 파일을 찾는 경로를 보다 단순하게 하고 직접 만든 모듈 파일들과 라이브러리 내에서 지원하는 모듈 파일들을 분리해서 관리할 수 있도록 하기 위해 root폴더에 types라는 하위 폴더를 만들고 types에 라이브러리와 같은 이름인 폴더를 만들어 그곳에 index.d.ts를 추가했다.

만약 직접 만들 npm 패키지명이 다른 패키지와 겹치지 않기 위해 "@유저명/패키지프로젝트명"과 같이 작성할 경우라면 index.d.ts는 "root/types/@유저명/패키지명" 의 경로로 존재해야한다.

step2. tsconfig.json 수정

index.d.ts 파일을 컴파일러라 내가 사용하고자하는 라이브러리의 모듈에 대한 파일일하는 것을 알도록 하기 위해서 tsconfig.json의 일부 옵션들을 다음과 같이 설정해야한다. 

{
"compilerOptions":{
	"typeRoots" :["./types ", "./node_modules/@types"],
	 "declaration": true,
   "declarationDir": "./types",
   "allowJs": true,
.....
},
....
}

  • typeRoots

    • 타입 선언 파일이 위치한 디렉토리에 대한 설정이다.
    • node_modules/@types는 기존에 설정되어 있을 수 있다
    • index.d.ts가 들어가는 types폴더의 경로를 넣어주면 된다.
    • index.d.ts가 들어있는 폴더가 "root/types/@유저명/패키지명"경로일 경우, "./types"로만으로는 index.d.ts를 찾기 못하는 오류가 발생하기도 한다.그러면 경로를 "./types/@유저명"으로 보다 자세하게 설정해주면 된다.

  • declaration

    • 컴파일러가 타입 선언 파일을 생성하도록 하는 지 여부에 대한 설정이다.

  • declarationDir

    • 타입 선언 파일이 생성될 디렉토리 설정이다.

  • allowJs

    • js파일을 컴파일 대상에 포함시키는 지 여부에 대한 설정이다.

    step3. index.d.ts

    index.d.ts를 간편하게 작성하는 방법은 다음과 같다.

  • index.d.ts

declare module "라이브러리명";

위의 3가지 단계를 모두 거치면 typescript를 지원하지 않는 라이브러리를 typescript에서도 사용할 수 있다.

😄👏👏👏👏

비하인드

그러나 라이브러리를 직접 만들어시 이를 사용한 실제 내 프로젝트에서는 props로 주는 함수의 타입이 설정되지 않아 생기는 오류를 해결하기 위해typescript를 지원하는 라이브러리를 추가로 만들어야했다.

그래도 좋은 경험이였어...
역시 타입스크립트 지원하는 라이브러리가 좋아

profile
바다
🐣프론트 개발 공부 중 (우테코 6기)

0개의 댓글