🛡

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

に公開
TypeScript
初心者向け
tech

はじめに

TypeScriptをより深く理解したく下記書籍を読みました。
下記書籍のJSONファイルを直接インポートする方法について学びがあったので、記事として記録します。

結論

準備

1. ディレクトリ構成の確認

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

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. JSON ファイルを読み取る ts ファイルの編集

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

4. tsconfig.json の編集

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

出力確認

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' } ]
}

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. 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' } ]

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

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

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

実行結果を確認する

$ ts-node resolveJsonModule.ts
Michael

Discussion