[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는 타입에 대한 정의파일 .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=
위의 사이트에서 @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' {
// ... 인터페이스, 메서드 선언 추가
}