あの手この手でTypeScriptからJSON形式データをimportする

はじめに

この記事はLIFULL その2 Advent Calendar2018の19日目の記事です。
TypeScriptを使用した際に、外部ファイル化したJSON形式のデータをどのようにimportすれば良いのかを何パターンか表してみました。
(あくまで思いついたもののみとなります。)

JSON形式で管理する

ハッシュ形式のデータはJSON形式で管理したいというケースになります。

▶︎ 型定義ファイルで拡張

TypeScriptの型定義ファイルをJSON用に作成します。
この定義ファイルにより、JSON形式のデータをimportできるようになります。
汎用性のため、anyで定義しているので補完や型は使用できません。

補完	型
×	×

ディレクトリ構成

├── index.ts
├── data
│   ├── comment.json
│   └── user.json
└── typings
    └── json.d.ts

ソースコード

~/data/user.json

{
  "id": 0,
  "name": "Taro"
}

~/typings/json.d.ts

declare module '*.json' {
  const data: any;

  export default data;
}

index.ts

import user from '~/data/user.json';

console.log(user.id); // 0
console.log(user.name); // Taro

▶︎ それぞれの型定義ファイルで拡張

先ほどとは異なり、JSONファイル個々に型定義ファイルを作成します。
これにより、JSONファイルの形式を型定義できるので補完が効くようになります。

補完	型
◯	◯

ディレクトリ構成

├── index.ts
├── data
│   ├── comment.json
│   └── user.json
└── typings
    ├── commentJson.d.ts
    └── userJson.d.ts

ソースコード

~/data/user.json

{
  "id": 0,
  "name": "Taro"
}

~/typings/userJson.d.ts

declare module '~/data/user.json' {
  interface UserData {
    id: number;
    name: string;
  }

  const data: UserData;

  export default data;
}

index.ts

import user from '~/data/user.json';

console.log(user.id); // 0
console.log(user.name); // Taro

▶︎ どうしても型定義ファイルとデータファイルは同じ場所で管理したい

先ほどとほぼ同様ですが、型定義ファイルとJSONデータファイルが別々の場所にあると管理しづらいと言った場合に一つのディレクトリにまとめます。

補完	型
◯	◯

ディレクトリ構成

├── index.ts
└── data
    └── user
        ├── index.js
        ├── index.d.ts
        └── data.json

ソースコード

~/data/user/data.json

{
  "id": 0,
  "name": "Taro"
}

~/data/user/index.d.ts

interface UserData {
  id: number;
  name: string;
}

declare const data: UserData;

export default data;

~/data/user/index.js

var json = require('./data.json');

module.exports = json;

index.ts

import user from '~/data/user';

console.log(user.id); // 0
console.log(user.name); // Taro

JSON形式以外で管理する

ハッシュ形式のデータの管理は、JSON形式でなくとも良いケースになります。

▶︎ JSで定義

JavaScriptでデータを定義します。
補完も利用でき、型推論により型も参照できます。

補完	型
◯	◯

ディレクトリ構成

├── index.ts
└── data
    ├── comment.js
    └── user.js

ソースコード

~/data/user.js

const data = {
  id: 0,
  name: 'Taro'
};

export default data;

index.ts

import user from '~/data/user';

console.log(user.id); // 0
console.log(user.name); // Taro

▶︎ TSで定義

TypeScriptでデータを定義します。
interfaceを定義しているので、補完も型も使用できます。

補完	型
◯	◯

ディレクトリ構成

├── index.ts
└── data
    ├── comment.ts
    └── user.ts

ソースコード

~/data/user.ts

interface UserData {
  id: number;
  name: string;
}

const data: UserData = {
  id: 0,
  name: 'Taro'
};

export default data;

index.ts

import user from '~/data/user';

console.log(user.id); // 0
console.log(user.name); // Taro

おわりに

TypeScriptからJSON形式データをimportする方法をいくつかあげてみました。
これだけではないかも知れませんが、お好きな方法を使用してみてください！