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

badahertz52·2023년 7월 9일

typescript

목록 보기

1/2

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