타입스크립트

Typescript 공부하기 13일차 (2022.10.30)

개발자A입니다 2022. 10. 31. 02:33

Typescript를 적용하려고 할 때 심적 진입 장벽을 만드는 요소가 하나 있다.

그건 바로 tsconfig.json 파일!!

 

예시 프로젝트를 보고 복붙을 하자니 성격상 이해하지 못한 많은 사항들이 마음에 걸려서 그냥 넘어갈 수가 없었다.

결국 아래와 같이 타겟과 모듈만 지정하고 시작했다.

"compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }

1) target

타겟은 바로 사용할 수 없는 ts 파일을 js파일로 컴파일링 할 때 적용할 js 버전을 뜻한다. 

처음에 당연히 최신 버전이 기능도 많고 좋지 않을까? 하는 생각에 esnext를 입력 했었다. 

하지만, macOS Ventura 13.0 버전이 나왔지만 불안해서 못쓰는 내 자신이 생각나서 검색을 해봤다.

역시나!

최신 버전일 수록 지원하는 브라우저 종류가 적고, 사용자의 환경이 구버전만 지원하는 경우 공들여 만든 서비스가 정상 적으로 작동하지 않을 위험이 있는 설정이었던 것이다.

그래서 기능과 호환성을 적당히 만족할 수 있는 타협점으로 es5버전을 선택했다.

 

2) module

모듈은 공식 문서에서 아래와 같이 언급하고 있다.

Sets the module system for the program. See the Modules reference page for more information. You very likely want "CommonJS" for node projects.
Changing module affects moduleResolution which also has a reference page.

한국어 버전을 선택해도 모듈 파트는 번역이 안되어 있었다ㅠㅠ

하지만 친절하게 쉬운 영어로 강조한 부분이 있었다.

You very likely want "CommonJS" for node projects.


내 멋대로 번역을 하자면,

"TS에 대해서는 한개도 몰라서 공식 문서에서 모듈을 찾아본 당신이 node 프로젝트를 한다면 분명 "CommonJS" 를 상당히 매우 많이 무척 좋아할 것이다.

 

그래서 공식 문서가 정해준 취향에 나를 맞추었다:)

역시 공식 문서 최고!

 

2) esModuleInterop

이 정도만 설정하고 진행하는 예제들이 많아서 별 생각없이 바로 index.ts, app.ts 코딩을 시작했다. 

그런데,

왜 첫 줄에서 express를 불러 오는 것부터 오류가 발생하는가!!!!!

 

진짜 첫 줄만 작성 하고 바로 "어?"라는 소리가 육성을 나왔다.

 

싸늘하다. 

가슴에 비수가 날아와 꽂힌다. 

예제에서 TS가 쉬운 것처럼 나에게 밑장을 주어도 나에게는 평경장 사수가 있.. 

아니지, "한국어 버전 공식문서"라는 든든한 사수가 있다.

By default (with esModuleInterop false or not set) TypeScript treats CommonJS/AMD/UMD modules similar to ES6 modules. In doing this, there are two parts in particular which turned out to be flawed assumptions:
  • a namespace import like import * as moment from "moment" acts the same as const moment = require("moment")
  • a default import like import moment from "moment" acts the same as const moment = require("moment").default
This mis-match causes these two issues:
  • the ES6 modules spec states that a namespace import (import * as x) can only be an object, by having TypeScript treating it the same as = require("x") then TypeScript allowed for the import to be treated as a function and be callable. That’s not valid according to the spec.
  • while accurate to the ES6 modules spec, most libraries with CommonJS/AMD/UMD modules didn’t conform as strictly as TypeScript’s implementation.

하아..

한국어 버전의 공식 문서인데.. 왜 내가 궁금한 것들만 번역이 안되어 있을까ㅠㅠ

쓰윽 보니, 내가 공식 문서의 추천으로 선택한 CommonJS 모듈에서는 import나 require로 불러올 때 미스매치가 발생하는 문제가 있나보다. 자세한 예제는 공식 문서에서 소개하고 있다.

그래서 결국 CommonJS 모듈을 사용하는 나는 아래와 같이 설정해야 했다.

"esModuleInterop": true

아니, 공식 문서에서 CommonJS 모듈을 추천할 거라면, "esModuleInterop"의 기본 값은 당연히 true로 해줘야하는게 아닐까?

라고 생각했다ㅎㅎㅎㅎㅎ

 

나만 그렇게 생각하나?ㅎㅎㅎㅎㅎ

 

아무튼, ts는 세팅부터 공식 문서를 열어서 영어 해석을 해야할 정도의 난이도 였다. 

ts란 녀석.. 쉽지않을 수도 있겠다.. 라는 생각이 강하게 든다ㅠㅠ

 

그래도 화이팅!

빡코딩!!!