[TIL] 20.10.13 export default와 import

김지욱·2020년 10월 14일
0

Project BIBA

목록 보기
4/10

코드스테이츠 4주 프로젝트 다이어리

오늘로 SR이 거의 끝났다. 주말이 포함되어 있어서 그런가 생각보다 오래 걸린 느낌이었지만 지난번 보다 완성도가 훨씬 좋게 나오지 않았나 하는 생각이든다. 우리팀의 능력자분께서 만든 프레임 워크를 보고 정말 감탄을했다. 지난 프로젝트에서 우리가 만들었던 와이어 프레임은 대체 뭐였던 걸까.

오늘 한 일

  • 서버 플로우 차트 마무리
  • MVC 패턴으로 백엔드 기본 구조 짜기

Typescript에서 import as 문제

서버쪽 기본 구조를 자바스크립트로 완료하고 타입스크립트로 다시 변환하는 과정에서 예상치 못한 문제가 발생했었다.

발생한 문제

// app.ts
import * as express from 'express';

typescript 를 사용할 때 위에 처럼 *as 를 사용해서 모듈을 가져 온다고 알고 있었는데 에러 메시지가 출력되었다.
type 'typeof e' has no call signatures.

원인

// app.ts
import express from 'express';
  • *as 없이 사용하려면 가져오는 from 파일에서 export default 가 있어야한다.
  • 우리는 @types/express 를 설치해서 사용하고 있는데 이 패키지의 타입 정의 파일에서는 export default 를 사용하고 있지 않다.
    파일 경로 ⇒ /node_modules/@types/express/index.d.dts
  • 즉 해당 라이브러리는 export로 내보내는 것이 없기 때문에 해당 폴더 내용 전체(*)를 가져오는 방식을 사용해야 한다.

전체(*)를 가저오는 방식을 사용하지 않고 import express from 'express' 이러한 방식으로 사용하기 위해서는 아래와 같은 옵션을 설정하면 된다.

// tsconfing.json
{
	"compilerOptions": {
		......
    "esModuleInterop": true 
   }
}

위와 같은 옵션을 설정하고, import 할때는 전체(*)를 가져오려고 했기 때문에 문제가 생겼었다.

어떤 설정인지 제대로 파악하지 못하고 사용해서 발생한 문제였다.

해결

"esModuleInterop": true 옵션을 사용하지 않고 전체를 가져오는 방법으로 통일하기로 결정했다.

0개의 댓글