TypeScript JSON 모듈 import 사용 방법

TypeScript 2.9에는 새로운 기능이 도입되었습니다. --resolveJsonModuleTypeScript 컴파일러 옵션으로 JSON 모듈을 가져올 수 있게 되었습니다.

#require 호출로 JSON 모듈 가져오기

TypeScript로 작성된 Node 애플리케이션이 있다고 가정하고 다음 JSON 파일을 가져온다고 가정합니다.

{
  "server": {
    "nodePort": 8080
  }
}

Node에선 다음처럼 사용할 수 있습니다.

require를 CommonJS 모듈 사용할 때와 같은 방법으로 JSON 파일을 import 합니다.

const config = require("./config.json");

JSON은 자동으로 일반 JavaScript 객체로 역직렬화됩니다. 이를 통해 구성 객체의 속성에 쉽게 액세스할 수 있습니다.

"use strict";

const express = require("express");
const config = require("./config.json");

const app = express();

app.listen(config.server.nodePort, () => {
  console.log(`Listening on port ${config.server.nodePort} ...`);
});

여기까진 그런대로 잘 됩니다.

정적 import 선언을 통해 JSON 파일 가져오기

이제 CommonJS 모듈 대신 기본 ECMAScript 모듈을 사용한다고 가정합니다. 즉, require 호출을 정적 import 선언으로 변환합니다.

// We no longer need the "use strict" directive since
// all ECMAScript modules implicitly use strict mode.

import * as express from "express";
import * as config from "./config.json";

const app = express();

app.listen(config.server.nodePort, () => {
  console.log(`Listening on port ${config.server.nodePort} ...`);
});

이렇게 하면, 2번 라인에서 타입 오류가 발생합니다. TypeScript를 사용하면 JSON 모듈을 바로 가져올 수 없습니다. 이것은 TypeScript 팀이 의도한 디자인 결과 때문입니다. 큰 JSON 파일을 가져오면 많은 메모리가 소비되므로 --resolveJsonModule 컴파일러 플래그를 활성화한 뒤 해당 기능을 선택해야 합니다.

사람들이 의도적으로 선택하도록 유도하는 것 = 그것은 사용자가 비용 발생을 이해한다는 것을 의미합니다.

tsconfig.json 파일에 resolveJsonModule 옵션을 활성화하세요.

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true
  }
}

--resolveJsonModule 활성화하면 TypeScript 파일에 타입 에러가 발생하지 않습니다. 더 좋은 것은 타입 체크와 자동 완성 기능이 제공된다는 것입니다!

영상 내용 : app.listen(config.server.nodePort 자동 완성

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

위에 표시된 컴파일러 옵션으로 TypeScript 파일을 컴파일하면 다음과 같은 JavaScript 출력을 확인할 수 있습니다.

"use strict";

Object.defineProperty(exports, "__esModule", { value: true });

const express = require("express");
const config = require("./config.json");
const app = express();

app.listen(config.server.nodePort, () => {
    console.log(`Listening on port ${config.server.nodePort} ...`);
});

출력 내용은 초기 require 버전과 거의 똑같습니다.

"use strict";

const express = require("express");
const config = require("./config.json");
const app = express();

app.listen(config.server.nodePort, () => {
  console.log(`Listening on port ${config.server.nodePort} ...`);
});