メインコンテンツにスキップ

JSONからTypeScriptへの変換ツール

JSONのサンプルをTypeScriptのインターフェースまたは型エイリアスに変換します。プリミティブ型・配列・入れ子のオブジェクト型を推定し、オブジェクトの配列を任意キー付きの1つのインターフェースに統合します。ルート型の名前も指定できます。

入力

最上位のインターフェース/型の名前です。PascalCaseに変換されます。

JSONのnullをどう型付けするか。空の配列は常にunknown[]になります。

出力

TypeScript出力
 
役に立ちましたか?

ガイド

JSONのサンプルを貼り付けるだけで、その形を表すTypeScriptのインターフェースまたは型エイリアスを生成します。コンバーターがJSONを読み取り、すべての値の型を推論し、入れ子構造に名前を付けてくれます。手作業の型付けも推測も不要です。APIレスポンスや設定ファイル、フィクスチャを型付きコードに変換する最速の方法です。

できること

ツールはJSONを読み取り、対応するTypeScriptの型定義を生成します。

  • プリミティブstringnumberboolean にマッピングされます。
  • 入れ子のオブジェクトは、親から参照される名前付きのinterfaceになります(例: address: Address)。
  • プリミティブの配列T[] になります。異種混在の配列は (number | string)[] のようなユニオン型になります。
  • オブジェクトの配列は、全要素に現れるすべてのキーを統合した単一のinterfaceにまとめられます。少なくとも1つの要素に欠けているキーは key?: でオプションになります。
  • null の値は、出力を壊さずに null(またはお好みで undefined)に広げられます。
  • 空の配列は推論できないため unknown[] になります。

使い方

  1. 入力欄にJSONを貼り付けるか入力します。
  2. ルート型の名前を設定します。最上位のinterfaceの名前になります(デフォルト Root、PascalCaseに変換)。
  3. 出力スタイルを選びます: interface または type エイリアス。
  4. null値の扱いを選びます(null または undefined)。
  5. 生成されたTypeScriptをコピーするか、interfaces.ts としてダウンロードします。

編集するたびに出力が自動更新されるので、JSONを調整しながら型の変化をリアルタイムで確認できます。

interface と type、どちらを選ぶべき?

インターフェースはオブジェクトの形の定番で、宣言のマージに対応しています。型エイリアスは、ユニオンやユーティリティ型と組み合わせて形を構成・エクスポートしたいときに便利です。生成されるメンバーは同じなので、コードベースに合う方を選んでください。いつでも切り替えられます。

オブジェクトの配列はどう処理されますか?

配列内のすべてのオブジェクトが走査され、キーが1つのinterfaceに統合されます。一部の要素にしかないキーはオプション(key?:)になります。これは、レコードが完全に均一ではない実際のAPI配列で一般的に望ましい動作です。

混在・空の配列はどうなりますか?

[1, "two"] のような混在配列は、(number | string)[] というユニオン要素型になります。空の配列は調べる要素がないため、unknown[] になります。安全かつ明示的で、後で絞り込みやすい型です。

深く入れ子になったJSONに対応していますか?

はい。入れ子の各オブジェクトはキーに基づいた名前の独自interfaceを持ち、それらのinterfaceはルート型と一緒に出力されるため、構造全体が完全に型付けされます。

プライバシー

このコンバーターは完全にブラウザ内で動作します。JSONはお使いの端末上で解析・変換され、サーバーにアップロードされたり、記録されたり、保存されたりすることはありません。機密性の高いペイロードにも使え、ページを読み込んだ後はオフラインでも作業できます。

jsontypescriptinterfacetypedevelopercodegen

Use it from code

From 3 credits per call

REST API

curl -X POST https://api.iotools.cloud/v1/tool/json-to-typescript-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "jsonInput": "{\"id\":1,\"tags\":[\"admin\",\"user\"],\"scores\":[95,87]…",
    "rootName": "Root",
    "exportStyle": "interface",
    "nullType": "null"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `json-to-typescript-converter` tool (JSON to TypeScript Converter) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

ワークフローの一部

すべてのコレクション

ツールが気に入りましたか?広告をなくしましょう。

1回のお支払いでアカウントから広告が完全になくなります。サブスクリプションも追跡もありません。