ts 환경에서 외부 라이브러리 사용시 주의할 점 (+ typeRoots, esmoduleinterop)

1) 정의 파일이 없는 경우(index.d.ts)

Could not find a declaration file for module 'xxxx'. 에러를 만나게 된다. 모듈 Joi에 대한 정의 파일을 찾을 수 없다는 것이다. vscode의 추천으로는 definitelyTyped를 설치해보거나, 스스로 정의 파일을 만들어보라고 한다. 실제로 하면 된다.

 

 

* 스스로 정의 파일을 만들고 싶은데 어떻게 해야 하나요?

chart.js는 @types/chart.js를 제공하기 때문에 사용자가 별도로 정의 타입을 만들어줄 필요는 없지만, 굳이 사용자가 스스로 만든다고 가정해보자. 

 

- 우선, tsconfig.json에서 typeRoots를 다음과 같이 바꿔주자.

기본값으로 ./node_modules/@types를 가지고, 우리도 직접 여기에 폴더를 만들어서 진행할 수도 있지만, 폴더의 깊이가 깊고 찾기가 불편해서 선호되지는 않는다.

"typeRoots": ["./node_modules/@types", "./types"], // 난 ./types 폴더에 정의 타입을 만들거야

 

- 지정한 폴더 내에 타이핑하고자 하는 라이브러리의 이름을 가진 폴더를 만들고, index.d.ts 를 생성한다.

- 이제 정의하면 됩니다. 아래와 같이요.

declare module 'chart.js' {
  // ... 뭔가 정의함
}

 

2) export 꼴로 되어 있어 import * as [이름] from [모듈] 꼴로 사용해야 하는 경우

Module '"[프로젝트 경로]/node_modules/[모듈이름]/lib/index"' can only be default-imported using the 'esModuleInterop' flag 에러를 만나게 된다.

 

정의 파일(index.d.ts)를 살펴보니 다음과 같은 방식으로 export 되어 있어서 그렇다.

이 방식은 CommonJS 모듈 방식인데, ES6 모듈 기반인 타입스크립트에서  import 문으로 불러오기 때문에 발생하는 문제이다.

export = Joi;

아래와 같은 방식으로 가져올 수 있지만, esModuleInterop 을 tsconfig.js에서 true로 설정하면 된다.

import * as Joi from 'joi';

 

* commonJS module이랑 es6 module이랑 뭐가 다른데요

 

commonJS (Node 기본 환경)

const jwt = require("jwt")

 

The TypeScript Handbook says

"When importing a module using export =, TypeScript-specific `import module = require("module")` must be used to import the module." 

 

ES2015(ES6) 모듈 시스템 (워낙 많이 쓰다보니 사용 방법 설명은 생략)

import jwt from "jwt" => export default
import {someMethod} from "jwt" => export

 

참고한 글)

https://blog.bigfont.ca/import-m-require-module-vs-import-as-m-from-module/

import m = require("m") vs import * as m from "m"