타입이 정의되지 않은 외부라이브러리 모듈의 타입을 정의해보자.
기본적으로 자바스크립트로 만들어진 라이브러리이기 때문에 타입스크립트로 인식할 수 있는 형태로 타입을 정의해주어야 한다.
axios같은 와부 라이브러리의 경우에는 이미 관리가 잘 되어 있기 때문에 따로 타입을 지정하지 않아도 index.d.ts에 속성이나 메소드가 잘 정의되어 있다.
하지만 이외에 타입 선언 라이브러리가 제공되지 않는 외부 라이브러리를 사용한다면 어떻게 해야될까?
chart.js를 예시로 사용하여 직접 정의해보자.
유용한 라이브러리 중 하나로 차트기능을 사용할 수 있게 해준다. 자바스크립트만으로도 가능하지만 몇백줄 이상을 코드가 필요하다고 한다.
chart.js도 타입 정의 라이브러리를 설치하면 에러가 해결되지만 없다는 가정 하에 진행해보자.
외부라이브러리를 사용할 때마다 사용자가 타입을 정의해준다면 귀찮아지기 때문에 타입을 오픈소스화 해놓은 것을 말한다. (@types/chart.js)
Definitely Typed
import Chart from 'chart.js';
// 오류와 함께 npm을 설치하거나 모듈의 새로운 선언을 하라는 설명이 주어진다.
tsconfig.json
에서 typeRoots
를 설정하는 것이다.{
"compilerOptions": {
...
//[node_modules 안에 있는 @types 폴더들을 탐색해서 가져오는 것, 직접 정의하는 폴더명]
"typeRoots": ["./node_modules/@types", "./types"]
},
//index.d.ts
declare module 'chart.js' {
// 타입 정의
};