JSON を TypeScript interface に変換するには？

JSON サンプルを貼り、ルート名を付け、生成 interface をコピー。ブラウザ内変換。ネストは名前付き interface、配列は全要素、配列 item 間で欠けるキーは ? optional。

optional (?) と nullable (| null) の違いは？

Optional は一部配列 item でキーがなかった。Nullable はキーがあり値が JSON null。email?: string は省略可。note: string | null はキー必須。サンプルが両方示さない限り email?: string | null に潰しません。

interface と type alias どちらを出力？

ファイル跨ぎ extend/merge するオブジェクト形状は interface。union、intersection、mapped type は type alias。典型 API レスポンスはどちらも可; 本ページは JSON モデルの慣習で interface デフォルト。

unknown[] や Record になる理由は？

空配列は要素 inspect 不可で unknown[]。空オブジェクトはキーなしで Record 。具体型やネスト interface には中身のある例を貼る。

quicktype の代替？

いいえ。quicktype.io が多言語 codegen と runtime validator。本ページは貼り付けペイロード向け私的クライアント側 JSON to TypeScript - インストール・アカウント不要、optional と JSON null を分離するレポート付き。

JSON はアップロードされる？

いいえ。解析と推論はブラウザ内のみ。社内 API、トークン、PII に安全。DevTools Network でリクエストなしを確認。

JSON 配列から型を生成できる？

はい。キーが行ごとに変わるなら推奨。レコード配列は1 interface にマージ、欠落キーは optional。ルート Users なら interface User と type Users = User[]。User ならペイロードは User[]。

開発者ツール

JSON から TypeScript インターフェース変換

サンプルを試す

JSONサンプル

変換はブラウザで実行されます。JSONがこのデバイスから離れることはありません。

ルート名

トップインターフェースのPascalCase名。Users という名前のJSON配列は User と type Users = User[] を出力します。

出力形式

interface は一般的なAPIレスポンス形状で宣言マージをサポートします。type alias はユニオンと mapped type に適しています。

インターフェース

オプションキー

Nullableキー

ユニオン

? は一部の配列項目でキーが欠けていたことを意味します。| null はサンプルに JSON null が含まれていたことを意味します。同じではありません。

推論メモ

JSONルートは配列です。ペイロードを Root[]（または複数形名を使った場合はリストエイリアス）として型付けしてください。

User.lastLogin は常に null でした。非null型を推論するにはサンプルに実値を追加してください。

推論プロパティレポート
インターフェース	キー	型	フラグ
Address	city	string	required
Address	postcode	string	optional ?
User	id	number	required
User	name	string	required
User	role	string	required
User	email	string	optional ?
User	address	Address	required
User	lastLogin	null	optional ? \| null
User	tags	string[]	optional ?

TypeScript

export interface Address {
  city: string;
  postcode?: string;
}

export interface User {
  id: number;
  name: string;
  role: string;
  /** Email string */
  email?: string;
  address: Address;
  lastLogin?: null;
  tags?: string[];
}

JSON から TypeScript インターフェース変換について

ブラウザで JSON サンプルから TypeScript interface を生成 - アカウント、upload、codegen CLI 不要。API レスポンス、できればレコード配列を貼り付け。ネストオブジェクトは名前付き interface、配列は全要素から型付け（先頭のみではない）、同一形状は重複排除。ウォーカーは欠落キーと JSON null を混同しません: 一部 item で省略されたキーは optional (`?`); 存在するが null は `T | null`。`.ts` にコピーまたはダウンロード。minify 済みなら JSON Minifier、1フィールド確認なら JSONPath Tester と組み合わせ。

JSON から TypeScript インターフェース変換の使い方

JSON を貼る（レコード配列は単一オブジェクトより optional 推論が正確）。optional と nullable の違いを見るならサンプルを読み込み。
ルート名 (User、Order、ApiResponse) を設定。interface（デフォルト）または type alias。
推論レポート: 宣言数、optional、nullable、union。空配列、空オブジェクト、全 null フィールド、引用キーを警告。
TypeScript をコピーまたは .ts をダウンロード。types/ に置き `fetch` / TanStack Query をルート名で注釈。
サーバー送信なし。無効 JSON は行・列を報告。

JSON から TypeScript インターフェース変換の例

レコード配列から optional キー

[{"sku":"A1","qty":2},{"sku":"B7","qty":1,"gift":true}] は gift?: boolean 付き Order。最初の item が省略したため optional - null 値ではありません。

Nullable と optional

1行目 email 欠落、他行 note が null なら email?: string と note: string | null。多くのコンバーターが混同する欠落キーと JSON null を分離。

ネスト名前付き interface

{"user":{"address":{"city":"London"}}} は Address、User、Root の順。ネストは PascalCase キー名で Address 単体 import 可能。

引用キーと空コンテナ

{"content-type":"application/json","items":[],"meta":{}} は content-type を引用、items は unknown[]、meta は Record<string, unknown>。より rich なサンプル貼り付けを警告。

interface vs type alias

API レスポンス形状は interface（declaration merging、やや良いエラー）。union や mapped type なら type alias。実行時出力は同じ。

一般的な使用例

React、Vue、Next.js で fetch() や axios レスポンスを型付け
実ペイロードから TanStack Query / SWR ジェネリクスを生成
webhook 本文 (Stripe、GitHub、Slack) を型付きイベントに
OpenAPI 前の fixture 向け型ドラフト
JSON 設定 blob をエディター完結 TypeScript に

JSON から TypeScript インターフェース変換に関するよくある質問

JSON を TypeScript interface に変換するには？: JSON サンプルを貼り、ルート名を付け、生成 interface をコピー。ブラウザ内変換。ネストは名前付き interface、配列は全要素、配列 item 間で欠けるキーは ? optional。
optional (?) と nullable (| null) の違いは？: Optional は一部配列 item でキーがなかった。Nullable はキーがあり値が JSON null。email?: string は省略可。note: string | null はキー必須。サンプルが両方示さない限り email?: string | null に潰しません。
interface と type alias どちらを出力？: ファイル跨ぎ extend/merge するオブジェクト形状は interface。union、intersection、mapped type は type alias。典型 API レスポンスはどちらも可; 本ページは JSON モデルの慣習で interface デフォルト。
unknown[] や Record<string, unknown> になる理由は？: 空配列は要素 inspect 不可で unknown[]。空オブジェクトはキーなしで Record<string, unknown>。具体型やネスト interface には中身のある例を貼る。
quicktype の代替？: いいえ。quicktype.io が多言語 codegen と runtime validator。本ページは貼り付けペイロード向け私的クライアント側 JSON to TypeScript - インストール・アカウント不要、optional と JSON null を分離するレポート付き。
JSON はアップロードされる？: いいえ。解析と推論はブラウザ内のみ。社内 API、トークン、PII に安全。DevTools Network でリクエストなしを確認。
JSON 配列から型を生成できる？: はい。キーが行ごとに変わるなら推奨。レコード配列は1 interface にマージ、欠落キーは optional。ルート Users なら interface User と type Users = User[]。User ならペイロードは User[]。

JSON Minifier & Formatter

無料オンライン JSON minifier と formatter。JSON を minify してペイロードを縮小、または beautify（pretty-print）で2スペースインデント。入力検証 - アップロード不要。

JSONPath テスター

ブラウザで JSONPath をオンラインテスト。JSON からフィールド抽出、フィルター例、正規化パスのコピー - アップロードなし。

JSONスキーマジェネレーター

ブラウザで無料のJSONスキーマジェネレーター。サンプルJSONを貼り付け、型と形式を推測し、Draft-07または2020-12スキーマをコピーします。何もアップロードされません。

JSON から CSV 変換

ブラウザで JSON と CSV を双方向変換。ネストオブジェクトのフラット化、ドットキーの Unflatten、NDJSON、Excel EU プリセット、RFC 4180。アップロードなし。