Command Palette

Search for a command to run...

JS

JSON から TypeScript

JSON サンプルから TypeScript インターフェイスを生成します。 ネストされた型を推測し、オブジェクトの配列を単一のインターフェイスにマージし、null 許容キーと欠落キーをオプションとしてマークし、クリーンなエクスポート可能なコードを発行します。 100% クライアント側。

Style:
Indent:
Category:data
Mode:Offline
Version:1.0.0
Access:Free

JSON から TypeScript へのコンバーターとは何ですか?

JSON to TypeScript interface on Toolz.dev - Generate TypeScript interfaces from any JSON sample. Infers nested types, merges arrays of objects into a single interface, marks nullable and missing keys optional, and emits clean exportable code. 100% client-side.

JSON から TypeScript へのコンバータは、サンプル JSON 値 (API レスポンス、構成ファイル、データベース レコード) を読み取り、それを記述する TypeScript インターフェイスを書き込みます。ネストされたオブジェクトは独自の名前付きインターフェイスになり、オブジェクトの配列は広大な結合ではなく単一の要素インターフェイスにマージされ、一部のレコードからヌルまたは欠落しているキーはオプションとしてマークされます。すでに持っているデータを貼り付けます。手書きで書くタイプを取得します。

手で API レスポンスを入力するのは面倒で、特定の方法でエラーが発生しやすい: エンドポイントが実際に返したものではなく、* 思う* と思う* ものを入力します。 気付かなかったフィールドは省略されます。整数は null である場合があり、「number」と入力され、エディタではなく、実稼働時にエラーが発生します。 実際のペイロードから直接型を生成すると、そのギャップが解消されます。これは、コンパイルしたシェイプがサーバーが実際に送信した形状であるためです。

すべてブラウザで実行されます。推論エンジンは依存関係のない TypeScript であり、リモート サービスのラッパーではないため、アクセス トークン、顧客レコード、内部 ID を日常的に保持するペイロードはページから決して離れることはありません。インターフェイスまたは型エイリアスを選択し、`export` キーワードと `readonly` モディファイアを切り替えて、インデントの幅を選択し、出力をコピーするか、.ts ファイルをダウンロードします。

生成されたインターフェイスは、呼び出している API ではなく、提供したサンプルを記述します、そしてその区別はリスク全体です サンプルのすべてのオブジェクトにたまたま存在するフィールドは、サーバーが時々省略しても必須とマークされ、サンプル内の null であるフィールドは、常に null であるフィールドと区別できません 空の配列が最も明確なケースです: 要素のない配列は、その中に含まれるものについての情報を与えません。 配列のマージは、リスト内のすべてのオブジェクトを 1 つのインターフェイスに結合し、一部のエントリに欠けているキーをオプションとしてマークすることで、ここで役立ちます。そのため、より大きく多様なサンプルは、より正直なタイプを生成します。 API がスキーマまたは OpenAPI ドキュメントを持っている場合、代わりにそこから生成し、文書化されていない応答を探索するために使用します。

JSON から TypeScript へのコンバーターの使い方

1

json を貼り付けます

API 応答、フィクスチャ ファイル、または JSON 値をドロップします。 ネストされたオブジェクト、配列、および null フィールドがどのように処理されるかを確認する場合は、最初にサンプルをロードします。

2

ルートタイプに名前を付ける

ルート タイプ名 (通常は User や Invoice などのリソース) を設定します。ネストされたインターフェイスはキーから自動的に名前が付けられ、配列要素名が特異化されます (リリースはリリースになります)。

3

出力スタイルを選択してください

インターフェイスまたはタイプ エイリアスを選択し、各宣言をエクスポートするかどうかを決定し、コードベースが不変の形状を好む場合は readonly モディファイヤを追加して、インデントを 2 または 4 のスペースに設定します。

4

生成してから、コピーまたはダウンロード

[生成] を押します。 推測されたオプションとユニオンを確認してから、コードをクリップボードにコピーするか、タイプ フォルダーにドロップできる .ts ファイルとしてダウンロードします。

主な機能

ネストされたインターフェイス抽出

ネストされたすべてのオブジェクトは、インラインの匿名シェイプではなく、名前付き再利用可能な独自のインターフェイスになるため、内部型を個別にインポートおよび参照できます。

スマートアレイのマージ

オブジェクトの配列が 1 つの要素インターフェイスにマージされます。 一部のレコードには存在するキーはオプションになりますが、他のレコードには存在しないものになります。これは、実際のページ分割された API データの動作方法です。

あなたがコントロールする null 可能な処理

null 値がキーがオプションであることを意味するか、または null がユニオンに属しているかを選択します。 どちらもよくある規則です。このツールはコードベースに強制的には使用しません。

インターフェイスまたはタイプ エイリアス

`interface user {}` または `type user = {}` を発行して、既存の Lint ルールに一致させ、オプションの `export` および `readonly` 修飾子をすべての宣言に一貫して適用して、それを適用します。

Frequently Asked Questions

JSONをエディタに貼り付け、ルートタイプ名を設定し、生成を押します ツールはすべてのキーのタイプを推測し、ネストされたオブジェクトを独自のインターフェイスに抽出し、.tsファイルに直接コピーできるコードを出力します サインアップもアップロードもしない - ブラウザで推論が実行されます。

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

json to typescriptjson to typescript interfaceconvert json to typescriptjson to interface generatortypescript type generatorjson to typegenerate typescript from jsonapi response typestypescript interface from apijson schema to typescript