[TypeScript] Jsonファイルを直接インポートする

はじめに

この記事では、Jsonファイルを直接インポートする方法 をまとめております。

参考資料

結論

tsconfig.json の "resolveJsonModule": true, を追加する

{
  "compilerOptions": {
    "resolveJsonModule": true
    // 他のオプション...
  }
}

0. 前提条件：ディレクトリー構成

.
├── data.json
├── resolveJsonModule.ts
└── tsconfig.json

1. tsconfig.json の設定

"resolveJsonModule": true,を追加する

tsconfig.json

{
  "compilerOptions": {
    "resolveJsonModule": true,
    // 他のオプション...
  }
}

2. 読み取る対象の Json ファイルの作成

data.json

{
  "func_name": "get_users",
  "timestamp": "2019-01-01 12:00:00",
  "status": 200,
  "data": [
    {
      "id": 1,
      "name": "Michael"
    },
    {
      "id": 2,
      "name": "John"
    }
  ]
}

3-1. Json ファイルの全てを出力する

resolveJsonModule.ts

import * as data from './data.json';

console.log(data);

実行結果を確認する

$ ts-node resolveJsonModule.ts
{
  func_name: 'get_users',
  timestamp: '2019-01-01 12:00:00',
  status: 200,
  data: [ { id: 1, name: 'Michael' }, { id: 2, name: 'John' } ]
}

3-2. Json ファイルの全てを出力する

resolveJsonModule.ts

import * as data from './data.json';

console.log(data.timestamp);

実行結果を確認する

$ ts-node resolveJsonModule.ts
2019-01-01 12:00:00

3-3. Json ファイルの data の配列を出力する

resolveJsonModule.ts

import * as data from './data.json';

console.log(data.data);

実行結果を確認する

$ ts-node resolveJsonModule.ts
[ { id: 1, name: 'Michael' }, { id: 2, name: 'John' } ]

3-4. Json ファイルの data の配列の 0 番目を出力する

resolveJsonModule.ts

import * as data from './data.json';

console.log(data.data[0].name);

実行結果を確認する

$ ts-node resolveJsonModule.ts
Michael