JSONをio-ts型に変換 — Numio

JSON サンプルから io-ts の実行時コーデックを生成します。先頭に import * as t from "io-ts" が付きます。ネストしたオブジェクトはそれぞれコーデックになり、それを使うコーデックより前に宣言されます。配列の一部の要素にしかないキーは t.partial に入ります。

fp-ts と io-ts を使う TypeScript アプリで、API レスポンスを実行時に検証する。

JSON

IO TS

こんなときに使えます

fp-ts と io-ts を使う TypeScript アプリで、API レスポンスを実行時に検証する。
使う前に検証が必要な JSON 設定ファイルのコーデックの下書きを作る。

使い方

JSON オブジェクトを貼り付けます。省略可能なキーがある場合は配列要素を複数含めます。
生成されたコーデックを確認します。ルートは RootInterface で、ネストしたものはキー名から命名されます（settings は Settings になります）。
コードをコピーし、必要なコーデックを export して、t.TypeOf で型を導出します。

JSON 入力

{
  "id": "u_1",
  "name": "Ada",
  "age": 36,
  "nickname": null,
  "settings": { "theme": "dark", "fontSize": 14 },
  "posts": [
    { "title": "Notes", "draft": true },
    { "title": "Engine" }
  ]
}

io-ts コーデック

import * as t from "io-ts"

const Settings = t.type({
  theme: t.string,
  fontSize: t.number,
})

const Posts = t.intersection([
  t.type({
    title: t.string,
  }),
  t.partial({
    draft: t.boolean,
  }),
])

const RootInterface = t.type({
  id: t.string,
  name: t.string,
  age: t.number,
  nickname: t.null,
  settings: Settings,
  posts: t.array(Posts),
})

仕様と制限

サイト独自のジェネレーターでブラウザ内で生成され、Prettier で整形されます。設定項目はなく、サーバーへのリクエストもありません。

コーデックは依存先から順に出力されるため、どの const も RootInterface が参照する前に定義されます。

数値は整数も小数も t.number になります。null は t.null、他のサンプルに値があれば t.union([X, t.null]) になり、空配列は t.array(t.unknown) になります。

配列の一部の要素にしかないキーは t.partial に入り、t.intersection で必須キーと組み合わされます。

FAQ

TypeScript の型も作られますか？

直接は作られません。type Root = t.TypeOf<typeof RootInterface> を追加すると、各コーデックから静的な型を導出できます。

省略可能なフィールドや null 許容フィールドはどう扱われますか？

配列の一部の要素にしかないキーは t.partial に入り、一部の要素で null のキーは t.union([type, t.null]) になります。単一オブジェクトの最上位のキーは常に必須です。

ルートが JSON 配列の場合はどうなりますか？

要素が要素の形を表す 1 つの RootInterface コーデックにマージされ、配列全体を表す const RootInterfaceList = t.array(RootInterface) が追加されます。

仕様を確認する

io-ts on GitHub