Nuxt.js + TSで読み込むJSONデータの型を定義

外部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などでも、定義された型で参照することができるようになる。