JSONからTypeScript・Zodへの変換ツール
JSONからTypeScriptとZodへ
JSONからTypeScriptインターフェース + Zodスキーマ変換 | We.Inc
JSONを貼り付けるだけで、TypeScriptのインターフェースとZodスキーマを同時に生成します。配列はマージされ、欠けたフィールドはオプションになります。データはブラウザーの外に出ません。
任意のJSONサンプルを貼り付けると、コンパイル時チェック用のTypeScriptインターフェースと、実行時にデータを検証するためのZodスキーマを書き出します。ネストしたオブジェクトにはそれぞれ名前付きの型が作られ、オブジェクトの配列はマージされて一部の項目にないフィールドはオプションになります。変換はローカルで行われるため、非公開のデータが手元のマシンから出ることはありません。
JSONの値と型の対応
- number[]
- z.array(z.number())
- a: number を持つインターフェース
- z.object({ a: z.number() })
- 配列の一部の項目にないキー
- key?: type
- .optional()
型の質はサンプル次第です。想定するすべてのフィールドが含まれたレスポンスを、できれば配列の項目を複数入れて貼り付けてください。ルート型の名前を変えたり、インターフェースと型エイリアスを切り替えたりして、どちらの出力もコピーできます。
型とスキーマ、どちらが必要か
- TypeScriptの型はコンパイルすると消えます。エディターを助け、自分のコードのミスは見つけてくれますが、数値を期待した場所にAPIが文字列を送ってきたことは教えてくれません。
- Zodスキーマは実際に動くコードです。受け取ったデータにparseを呼ぶと、問題のフィールド名を示すエラーが投げられます。またz.inferで同じスキーマからTypeScriptの型を得られるため、両者がずれることはありません。アプリの外から来るデータには、スキーマのほうが安全です。
変換ツールの推測結果を読み解く
- サンプルでnullだったフィールドは、ほかに手がかりがないためnull型になります。中身がわかったら string | null（Zodでは .nullable()）に変更するか、nullのフィールドをオプションにする設定にチェックを入れてください。
- 空の配列も同じ理由でunknown[]になります。日付はJSONでは文字列として届くため、文字列のままです。形式がわかれば、Zodでは z.string().datetime() などで厳しくできます。
- 型名はキーから付けられます。staff配列からはStaff、addressオブジェクトからはAddressが作られます。2つのキーが同じ名前になる場合は番号が付きます。
- ボックスにJSONを貼り付けるか、サンプルのまま動作を確認します。
- ルート型の名前を設定します。ネストしたオブジェクトにはキーから名前が付きます。
- インターフェースか型エイリアスか、プロパティをreadonlyにするかを選びます。
- TypeScript、Zodスキーマ、またはその両方をコピーします。JSONにエラーがあれば、パーサーのメッセージを表示します。
- オプションのフィールドを検出できるよう、各配列には2〜3個の項目を入れて貼り付けましょう。
- 生成した型を共有する前に機密性のある値は削除しましょう。ツール自体は何もアップロードしません。
- スキーマはデータを取得するコードのそばに置き、コンポーネントの奥ではなく、その境界でparseしましょう。
- エラーを投げずにわかりやすいメッセージを表示したいときは、parseの代わりにsafeParseを使いましょう。
よくある質問
インターフェースと型エイリアス、どちらを使うべきですか？
ここではどちらもオブジェクトの形を同じように表現できます。同名のインターフェースはマージされるため、ライブラリの型を拡張するときに便利です。型エイリアスはマージできませんが、ユニオン型に名前を付けられます。コードベースでどちらかに統一しましょう。
ZodスキーマからTypeScriptの型を得るには？
type User = z.infer<typeof UserSchema> を使います。生成されるZodの出力には各スキーマの下にこの行がすでに含まれているため、別途インターフェースを管理する必要はありません。
フィールドがnull型になるのはなぜですか？
サンプルのその場所がnullだったため、ほかに推測できるものがなかったからです。実際の型とnullを組み合わせたもの、例えば string | null や、スキーマでは z.string().nullable() に置き換えてください。
JSONはサーバーに送信されますか？
いいえ。解析と生成はこのページ上のJavaScriptで行われます。ページを読み込んだ後にオフラインにしても動作します。
出力の使い方
生成したスキーマでレスポンスを検証する
safeParseはエラーを投げる代わりに、成功または問題の一覧を返します。エラー状態を表示すべきfetch処理に向いています。
同じ形を通常のインターフェースで
データがすでに信頼できる場合に、propsや関数の引数に型を付けるのに便利です。
JSONを貼り付けて型を生成
サンプルのレスポンスを貼り付けてください。TypeScriptのインターフェースと対応するZodスキーマを並べて書き出します。配列のすべての項目をマージするため、一部の項目にないフィールドはオプションになります。
ルート型の名前
宣言スタイル
readonlyプロパティ
nullのフィールドをオプションにする
サンプルを読み込む
有効なJSONではありません：{msg}
Zodスキーマ
コピー
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る