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

typescript-json-file-import
INDEX

はじめに

初めてのTypeScriptを読みました。
その学習を記録します。

40036_learning_typescript_cvr

結論

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

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

使い方

準備

ディレクトリー構成

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

読み取る対象のJsonファイル

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

Jsonファイルを読み取るtsファイル

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

tsconfig.jsonの中身

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

Jsonファイルの全てを出力する

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

Jsonファイルのタイムスタンプを出力する

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

console.log(data.timestamp);
$ ts-node resolveJsonModule.ts
2019-01-01 12:00:00

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

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

console.log(data.data);
$ ts-node resolveJsonModule.ts
[ { id: 1, name: 'Michael' }, { id: 2, name: 'John' } ]

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

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

console.log(data.data[0].name);
$ ts-node resolveJsonModule.ts
Michael
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

Born in 1994
Engineer's career is from 2020.10
Skill: Next.js, TypeScript, Django, Python, HTML, CSS

INDEX