✅ Typescript에서 Json 파일을 불러오고 싶을 때

✅ Typescript에서 Json 파일을 불러오고 싶을 때

To import a JSON file in TypeScript:

1. tsconfig.json 파일에가서 resolveJsonModule 옵션을 true로 한다.
2. tsconfig.json 파일에가서 esModuleInterop 옵션을 true로 한다.
3. Vscode 를 껏다 킨다.
4. Json 파일을 import 해본다.

{
  "compilerOptions": {
    "esModuleInterop": true  /* import 코드 변환  */
    "resolveJsonModule": true /* json 파일을 import하는 환경 설정*/,
}

기본적으로 TypeScript의 esModuleInterop이 false입니다. 기본적으로 TypeScript는 CommonJS/AMD/UMD 모듈을 ES6 모듈과 유사하게 처리합니다. 이를 수행하는 과정에서 특히 잘못으로 판명된 두 부분이 있습니다.

import * as moment from "moment" 와 같은 네임스페이스 가져오기는 const moment = require("moment") 와 동일하게 작동합니다.

import moment from "moment"와 같은 기본 가져오기는 const moment = require("moment").default와 동일하게 작동합니다.

이로 인해 다음 두 가지 문제가 발생합니다.

• ES6 모듈 사양에 따르면 네임스페이스 가져오기(import * as x)는 TypeScript에서 = require("x")와 동일하게 처리하도록 하고 TypeScript에서 가져오기를 함수로 처리하고 호출 가능하게합니다.
• ES6 모듈 사양에 정확하지만 CommonJS/AMD/UMD 모듈이 있는 대부분의 라이브러리는 TypeScript의 구현만큼 엄격하게 준수하지 않았습니다.

esModuleInterop을 켜면 TypeScript에 의해 변환된 코드에서 이 두 가지 문제가 모두 해결됩니다.

첫 번째는 컴파일러의 동작을 변경하고
두 번째는 내보낸 JavaScript에서 호환성을 보장하기 위해 shim을 제공하는 두 개의 새로운 함수로 수정됩니다.

심shim은 이미 존재하는 코드의 동작을 바로잡는 데 사용되는 코드 모음

출처

• https://www.typescriptlang.org/tsconfig#esModuleInterop