256 Tools

JSON to TypeScript

TypeScript 出力
export interface Root {
  id: number;
  name: string;
  active: boolean;
  tags: string[];
  profile: Profile;
}

export interface Profile {
  age: number;
  city: string;
}
出力形式

関連する外部ツール

一部のリンクはアフィリエイトリンクを含みます。

JetBrainsIntelliJ IDEA・WebStorm・PyCharm・Riderなど人気IDEを手がける開発ツール専門企業。高度なコード補完・リファクタリング支援・組み込みデバッガが強み。全製品を使えるAll Products Packサブスクリプションも提供。Amazonショッピング・家電・書籍・ソフトウェアなどを扱う世界最大級のオンラインマーケットプレイス。迅速な配送・簡単な返品・膨大な商品ラインナップが日常の買い物に便利。Primeなら動画配信・送料無料・限定セールも楽しめる。

関連ツール

JSON整形ツール貼り付けるだけで JSON を読みやすく整形、または1行に圧縮できます。壊れた JSON は何行目・何列目がおかしいかをハイライト表示。Base64 変換テキストと Base64 を相互変換。日本語・絵文字も文字化けしない（UTF-8 対応）、URL セーフ Base64、画像を data URL に変換。ブラウザ完結・送信なし。正規表現テスター正規表現をその場でテスト。マッチのハイライト・キャプチャグループ・フラグ・置換プレビューに対応。ブラウザ完結・送信なし。パスワード生成暗号論的に安全な乱数で強いパスワードを生成。ランダム文字列＆覚えやすいパスフレーズに対応。紛らわしい文字除外・各種別最低1文字保証。送信なし・履歴なし。

JSON を TypeScript の型に一発変換。API レスポンスや任意の JSON オブジェクトを貼り付けるだけで、ネストしたオブジェクト・配列・オプショナルフィールドを自動処理した interface や type alias を即座に生成します。すべてブラウザ内で処理、アップロードなし。

使い方

  1. 入力ボックスに JSON を貼り付けます。
  2. ルート型名を設定し、interface か type、null の扱い方を選びます。
  3. 生成された TypeScript をプロジェクトにコピーします。

型の推論方法

各オブジェクトはそれぞれの interface になり、ネストしたオブジェクトは独自の名前付き interface が生成されます。オブジェクトの配列は1つの型にまとめられ、一部のアイテムに存在しないキーはオプショナルになります。null 値は nullable 型またはオプショナルプロパティとして扱えます。

JSON が TypeScript interface に変換される図JSON→interface

機能

ネストしたオブジェクト

深くネストした JSON を、参照し合う明確な interface に分割します。

配列の型の統合

オブジェクトの配列を1つの型にまとめ、アイテム間で異なるフィールドをオプショナルにします。

オプショナル・null 許容フィールド

null 値を nullable 型にするか、オプショナルプロパティにするかを選べます。

interface か type か

コードベースのスタイルに合わせて、名前付き interface か type エイリアスかを選択できます。

カスタムルート名

User や ApiResponse など、トップレベルの型に任意の名前を付けられます。

こんな時に便利

API レスポンスの型付け

サンプルレスポンスを貼り付けて、アプリ全体で使える型を取得します。

モック・フィクスチャから型生成

サンプルデータから型を生成して、コードを型安全に保ちます。

設定ファイル・データファイル

JSON 設定ファイルやコンテンツファイルの型を数秒で作成します。

TypeScript の学習

実際の JSON が TypeScript の interface やユニオン型にどう対応するかを確認できます。

注意点

  • 型は貼り付けたサンプルから推論されるため、必要なフィールドをすべて含めてください。
  • 空の配列は推論できるアイテムがないため unknown[] になります。
  • 本番環境で使用する前に、ユニオン型やオプショナルの出力を必ず確認してください。
  • すべてデバイス上で処理されます。サーバーへの送信は一切ありません。

よくある質問

ネストしたオブジェクトにも対応していますか？
はい。ネストした各オブジェクトに独自の名前付き interface が生成され、親がその名前で参照します。
配列はどのように型付けされますか？
オブジェクトの配列は1つの interface にまとめられ、一部のアイテムにないキーはオプショナルになります。プリミティブが混在する配列は (string | number)[] のようなユニオン型になります。
null 値はどのように扱われますか？
デフォルトでは null は nullable 型になります。null をオプショナルプロパティとして扱うよう切り替えることもできます。
interface と type はどちらを使うべきですか？
どちらも機能します。コードベースに合わせて選んでください。オブジェクトの形状には interface が一般的で、ユニオン型など柔軟な表現には type エイリアスが向いています。
JSON はアップロードされますか？
いいえ。ジェネレーターはすべてブラウザ内で動作します。サーバーへの送信やアカウント登録は不要です。

広告と解析のために Cookie を使用します。