TypeScript 외부 라이브러리 모듈화

프로젝트를 진행하다 보면 수많은 외부 라이브러리들을 사용하게 된다.

타입스크립트에서 외부 라이브러리들을 사용하다 보면 axios 처럼 별도로 타입 지정을 하지 않아도 쓸수 있는 라이브러리가 있는 반면, 그렇지 않은 라이브러리들도 있을 것이다. 이 문제를 어떻게 해결해야 하는지 알아보도록 하겠다. 

 

 

Definitely Typed

 

Definitely Typed란 무엇일까?

먼저 정말 많은 자바스크립트 라이브러리가 존재하고 있는데 이런 라이브러리들을 타입스크립트에서 인식할 수 있도록 하려면 타입정의를 해야 한다. 별도로 타입이 지정되지 않았을 경우 개발자가 일일이 정의를 해야 하는데 그러면 그만큼 비용이 많이 들게 된다. 그래서 이런 타입 정의를 잘 만들어 놓은 형태로 오픈소스화 해놓은 것이 바로 Definitely Typed 이다.

 

For an npm package "foo", typings for it will be at "@types/foo". If you can't find your package, look for it on TypeSearch.

Definitely Typed 레파지토리에 가보면 @types/ 라는 prefix를 붙여서 사용하면 되고 찾지못할 경우 여기에서 직접 검색해볼 수 있다고 친절하게 알려준다.

 

 

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

 

1. 타입스크립트 설정 파일 (tsconfig.json) 에서 typeRoots 옵션을 먼저 지정해 주어야 한다. 

{
  "compilerOptions": {
    ... 
    "typeRoots": ["./node_modules/@types", "types"] // 기본 값 : ./node_modules/@types
  },
  ...
}

typeRoots는 타입정의를 참조할 곳을 지정하는 옵션이다. 설정하지 않았을 때 기본값은 ./node_modules/@types 이고 추가적으로 정의할 수 있다. 위 코드에서는 보통 사용하는 경로인 types 를 지정하였다.

 

2. 추가적으로 정의한 폴더인 types 하위에 타입을 정의하고자 하는 라이브러리 이름을 가진 폴더를 생성하고, 생성한 폴더에 실질적으로 타입을 정의하는 index.d.ts을 생성하여 타입을 정의하면 된다.

// index.d.ts
declare module '라이브러리 명' {
  // ...
  interface MyType {
    // ...
  }
};