メインコンテンツへスキップ
LibraTool logoLibraTool

無料JSON から TypeScript コンバーター

任意のJSONオブジェクトや配列からTypeScriptのインターフェースまたは型エイリアスを生成します。JSONを貼り付けるだけで、すぐに使えるTypeScript型を瞬時に取得できます。

読み込み後はオフラインでも動作
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

主な用途

  • APIレスポンスからTypeScriptタイプを生成API JSON応答を貼り付けて、フロントエンドコードをタイプセーフにするTypeScriptインターフェイスを即座に生成します。
  • 構成と設定オブジェクトのTypeScriptタイプJSON設定ファイルからTypeScriptインターフェイスを生成して、アプリケーション設定にタイプセーフティを追加します。
  • データベースレコードからTypeScriptタイプを生成JSON形式でエクスポートされたデータベースレコードまたはORM照会結果をTypeScriptインターフェイスに変換して、データレイヤータイピングを行います。
  • モックデータとテストフィクスチャをタイプJSONモックデータとテストフィクスチャからTypeScriptインターフェイスを生成して、ユニットテストとStorybookストーリーをタイプします。
  • タイプサードパーティAPIレスポンス公式タイプが不足しているか廃止されているサードパーティAPIレスポンスからTypeScriptインターフェイスを生成します。

使い方

このツールは、外部ライブラリを一切使わない手書きの再帰的型推論アルゴリズムを使用しています — JSON.parseで入力を検証・解析し、その後カスタムの走査ロジックがJSONツリー内のすべての値を巡り、ブラウザ内で直接TypeScriptのinterfaceまたはtype宣言を生成します。サーバーには何も送信されません。

  1. 1
    JSONが解析され検証される
    入力はJSON.parseに渡されます。失敗した場合、正確な解析エラーが入力のすぐ下に表示されます。解析が成功すると、変換の残りの処理を駆動する型付きの値ツリーが生成されます。
  2. 2
    再帰的な型推論
    再帰的なgetType関数がすべてのノードを走査します：プリミティブはstring、number、boolean、nullにマッピングされ、オブジェクトは新しい名前付きinterfaceをトリガーし、オブジェクトの配列はキーがすべての要素にわたってマージされるため、一部のアイテムにしか存在しないキーは任意になり、競合する値の型は|で結合されます。
  3. 3
    衝突を避けるinterfaceの命名
    ネストされた各オブジェクトはJSONキーから派生したPascalCaseの名前を取得します（snake_case、kebab-case、スペースはすべて正規化されます）。構造的に異なる2つのオブジェクトが同じ名前を共有してしまう場合、以前の定義を暗黙的に上書きするのではなく、数値のサフィックス（Data、Data2、…）が付加されます。
  4. 4
    出力が描画されダウンロード可能になる
    ネストされたinterfaceが先に出力され、その後選択に応じてexport interfaceまたはexport typeとして整形されたルート型が出力されます。結果はクリップボードにコピーするか.tsファイルとしてダウンロードできます — すべて標準のBlobで構築され、サーバーとのやり取りは発生しません。

関連ツール

📋

JSONスキーマからフォームを生成

JSONスキーマを貼り付けると、テキスト・数値・チェックボックス・ドロップダウン・リストフィールドを含む実際に動作するフォームが生成され、入力内容から生成されたJSONをコピーできます。APIリクエストボディのプロトタイピングに最適。ブラウザ内で動作します。

試してみる
⌨️

タイピング速度テスト (WPM)

タイマー、単語数、引用文、カスタム、禅モードのテストでタイピング速度（WPM）と精度を測定します。リアルタイムWPM、生速度、一貫性、結果グラフ、複数言語、文字単位のフィードバック — すべてブラウザ内で実行されます。

試してみる
📐

CSS クランプ() ジェネレーター

レスポンシブなタイポグラフィとスペーシングのための流動的なCSS clamp()値を生成します。最小・最大サイズとビューポート範囲を設定し、ライブプレビューを確認して、1行のCSSをコピーできます。

試してみる

よくある質問