[TypeScript] 외부 라이브러리 모듈화 (axios)

 

 axios 라이브러리

 

// 라이브러리 로딩
import 변수명 from '라이브러리 이름'
// 변수, 함수 임포트 문법
import {} from '파일 상대 경로';

터미널에 -D 또는 --dev--save없이 axios를 설치해주면

package.json의 dependencies(devDependencies가 아닌)에 생긴다.

npm i axios // i는 install과 마찬가지

그리고 라이브러리를 import해오면 axios에 대한 타입 오류가 사라진다.

import axios from 'axios';

 

 타입 선언 외부 라이브러리

 

axios는 타입정의가 잘 되어있는 라이브러리지만 그렇지 않은 외부 라이브러리같은 경우에는 어떻게 해야할까?

chart.js로 알아보자.

npm install chart.js // --save는 기본과 마찬가지

그리고 import 해오면 Could not find a declaration fil for module 'chart.js'과 같은 오류가 뜬다.

 

axios

chart.js

axios와 달리 chart.js는 타입에 대한 정의파일 .d.ts가 없다.

 

'npm install @types/chart.js'가 존재한다면 시도하고 또는 직접 .d.ts 파일에서 정의해야 한다.

위와 같이 존재해서 node_modules에 index.d.ts declaration 선언파일을 들고와서 모듈을 해석해준다.

import * as Chart from 'chart.js';

만약 ts(2339) 오류가 뜨면 chart.js는 uninstall 해준다.

 

Definitely Typed

 

@types 아래로 정의되어 있는 Type Definition Library이다.

https://www.typescriptlang.org/dt/search?search= 

Search for typed packages

위의 사이트에서 @types로 정의된 npm 패키지들을 검색할 수 있다.

npm으로 관리하는 것이 아닌 CDN으로 되어있는 경우에는 모듈의 개념을 탑재해서 내용을 인식할 수 있게 모듈화를 한 다음에 타입스크립트에 대한 정의를 해야한다.

 

 타입 선언 라이브러리가 제공되지 않는 외부 라이브러리

 

타입 선언 라이브러리 @types/ 라이브러리가 제공되지 않는 외부 라이브러리같은 경우에는 아래와 같이 한다.

// tsconfig.json

{
    "compilerOptions": {
        ...
        "typeRoots": ["./node_modules/@types", "./types"]
    },
    "include": ["./src/**/*"] //src폴더 모든 파일 대상 포함
}

tsconfig.json에 typeRoots라는 속성을 이용해 기본적으로 node_modules밑의 @types 해석을 하거나 임의로 정의할 수도 있다. 프로젝트 폴더에서 임의로 정의한 types/chart.js 폴더를 생성한다음 index.d.ts를 만든다.

// types/chart.js/index.d.ts

declare module 'chart.js';

// 또는

declare module 'chart.js' {
 // ... 인터페이스, 메서드 선언 추가
}