外部API、もしくは自データのJSONをTypeScriptで型定義して読み込む方法
動作環境
JSON
次のようなJSONを読み込むとする
[
{
"id": "25Wlc36nhO0sd8mNOQbOv1",
"category": "dayprogram",
"title": "昼の放送 #27",
"count": 12,
"total": 3397723,
"cassetteType": 1
},
{
"id": "33ewifXD4g0t1KfiGkzSlb",
"category": "dayprogram",
"title": "昼の放送 #26",
"count": 11,
"total": 2864799,
"cassetteType": 2
},
{
"id": "3fwnwowsaDzdW6GEZuU2r2",
"category": "dayprogram",
"title": "昼の放送 #25",
"count": 11,
"total": 2441976,
"cassetteType": 1
}
]
JSONファイルなどを置く場所は、/data
以下に置く
型指定
次にJSONに含まれる配列内のオブジェクトの型について定義する。
export interface Playlist {
id: string
cassetteType?: number
category: string
title: string
count: number
total: number
}
ここでは、Playlist
というインターフェースを定義している。
定義されたプロパティは、基本的に必須になるが、
cassetteType?: number
という様に、プロパティ名の後ろに?
を付けると、非必須項目になり、省略することができる。
JSONと型定義の関連付け
次に、読み込まれるJSONファイルの型宣言をし、型定義と関連付けを行う。
import { Playlist } from '~/lib/playlist'
declare module '~/data/playlists.json' {
const data: Playlist[]
export default data
}
このJSONは、Playlist型の配列を持つJSONなので、
const data: Playlist[]
と記述し、Playlistの配列であることを定義する。
JSONファイルのインポート
実際に、スクリプト内にJSONを読み込むには、
<script lang="ts">
...
import playlistJson from '~/data/playlists.json'
...
</script>
の様な形でインポートする。こうすることによって、IDEなどでも、定義された型で参照することができるようになる。