はじめに
この記事は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する方法をいくつかあげてみました。
これだけではないかも知れませんが、お好きな方法を使用してみてください！