Zenn
🪃

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

2024/09/22に公開
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
GitHubで編集を提案

Discussion