[Typescript/타입스크립트] declare 모듈 타입 & 전역 타입 typeRoots 와 paths

0. 목차

1. 개요

2. 모듈 타입

3. 전역 타입

1. 개요

typescript를 쓰면서 가장 불편한 부분은
외부 라이브러리를 설치해서 사용 할 때이다.

사용하려는 라이브러리의 사용도가 높다면 사실 크게 문제가 되지 않는다.
@types/[라이브러리] 를 통해 타입을 사용할 수 있기 때문이다.

 

그런데 사용도가 낮은 라이브러리이거나, 기능이 약한 라이브러리라면 모듈 정의가 안되어 있는 경우도 빈번하다.

 

또한 여러 문서에서 반복적으로 사용되는 타입을 매번 import로 가져오는 것도 매우 번거로운 일인데,

이 모든것을 해결할 수 있는 것이 declare 와 *.d.ts 파일이다.

2. 모듈 타입

위에서 말했든 사용도가 높다면 크게 고민할 필요가 없다.
하지만 그렇지 않은 라이브러리 일수록 모듈정의가 안되어 있을 확률이 높다.

 

그런 경우에는 직접 모듈 정의를 해주면 된다.

 

hex-to-binary 라는 라이브러리가 있다.

16진수를 2진수로 변환해주는 라이브러리인데,
물론 이 정도는 직접 구현도 가능하지만,
만들어둔 사람의 성의를 생각해서 라이브러리를 사용하면 편-안함을 느낄 수 있다.

 

npm install 'hex-to-binary' 로 설치를 하고,

 

import hexToBinary from 'hex-to-binary'

 

import를 해오면

 

모듈 'hex-to-binary'에 대한 선언 파일을 찾을 수 없습니다. '/Users/donghunlee/Documents/dev/kyungil/block-chain/220609/node_modules/hex-to-binary/index.js'에는 암시적으로 'any' 형식이 포함됩니다.
해당 항목이 있는 경우 'npm i --save-dev @types/hex-to-binary'을(를) 시도하거나, 'declare module 'hex-to-binary';'을(를) 포함하는 새 선언(.d.ts) 파일 추가ts(7016)

 

이런 에러가 발생한다.

기도하는 마음으로 npm i --save-dev @types/hex-to-binary를 시전해보지만, 그런거 없단다.

그럼 직접 모듈정의를 해줘야 한다.

 

친절한 typescript는 'declare module 'hex-to-binary';'을(를) 포함하는 새 선언(.d.ts) 파일 추가ts(7016)
라고 알려준다.

 

시키는 대로 하면 된다.
우선 루트 디렉토리리에 @types라는 디렉토리를 생성해주고,

그 디렉토리 안에 hex-to-binary.d.ts 라는 파일을 만들어주자.

 

// @types/hex-to-binary.d.ts

declare module 'hex-to-binary';

라고 작성해주면 마법같이 빨간줄이 사라진다.

 

그리고 tsconfig.json 파일의 compilerOptions에 option을 추가해주면 되는데...

 

공식문서도 마찬가지고, 다른 여타 블로그들을 찾아봐도 마찬가지로

typeRoot 에다가 types의 상대 경로를 적어주면 된다고 한다.

 

{
  "compilerOption":{
      "typeRoots":["./node_modules/@types", "./@types"]
  }
}

 

이렇게.

근데 에러가 뜬다.

 

TS7016: Could not find a declaration file for module 'hex-to-binary'. '/Users/donghunlee/Documents/dev/kyungil/block-chain/220609/node_modules/hex-to-binary/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/hex-to-binary if it exists or add a new declaration (.d.ts) file containing declare module 'hex-to-binary';

왤까...

여기저기 뒤져보다가 path 설정을 추가하라는 내용을 stackoverflow에서 발견했다.

 

{
  "compilerOptions": {
    "baseUrl": "./"
    "paths": {
      "*": ["@types/*"]
    },
    "typeRoots": ["./node_modules/@types", "./@types"],
  }
}

 

이렇게 해줬더니 잘 실행된다.

그런데 여기서 드는 의문점은 typeRoots option에 "./@types" 을 지워도 잘돌아간다...
왤까..

 

{
  "compilerOptions": {
    "baseUrl": "./"
    "paths": {
      "*": ["@types/*"]
    },
    "typeRoots": ["./node_modules/@types"],
  }
}

 

이렇게 해도 잘 돌아감...

typeRoots는 default로 "./node_modules/@types" 가 설정 되어있으니까 현상황에선 아예 없어도 된다;

 

{
  "compilerOptions": {
    "baseUrl": "./"
    "paths": {
      "*": ["@types/*"]
    },
  }
}

 

이렇게만 있어도 잘돌아간다.. 왤까..

일단은 되니까.. 좋긴한데 왜되는질 전혀 모르겠다.