YAML入力

TypeScript出力

YAMLをTypeScriptにとは?

TypeScriptは構造にインターフェースと型を使用します。このツールはYAMLからTypeScriptインターフェースを生成し、パースされた設定やデータに型を付けられます。YAML 1.2仕様が入力形式を定義しています。

変換はブラウザ内で行われます。サーバーには何も送信されません。生成された型はjs-yamlyamlパッケージなどのパーサーで動作します。JSONをTypeScriptにするにはJSONをTypeScriptにを使用してください。

YAMLをTypeScriptの例

YAMLからTypeScriptインターフェースを生成します。テレコムテーマの例:

例:加入者レコード

YAML入力

TypeScript出力:

TypeScript出力

上のサンプルボタンをクリックして、エディターにより多くの例を読み込んでください。

このツールの使い方

1

YAMLを貼り付けまたはアップロード

YAMLをコピーして左のエディターに貼り付けます。<strong>アップロード</strong>をクリックして<code>.yaml</code>または<code>.yml</code>ファイルを読み込むこともできます。<strong>サンプル</strong>ボタンでサンプルデータを読み込みます。無効なYAMLはエラーを表示します。

2

TypeScript出力を確認

右のパネルに生成されたTypeScriptインターフェースが表示されます。js-yamlyamlパッケージで設定をパースして型付けするのに使用できます。オプションフィールドには必要に応じて?またはユニオン型を調整してください。

3

コピーまたはダウンロード

<strong>コピー</strong>または<strong>ダウンロード</strong>を使用してください。JSONをTypeScriptにするにはJSONをTypeScriptにを、YAMLのフォーマットにはYAMLフォーマッターを使用してください。

YAMLをTypeScriptが役立つ場面

YAML設定を読み込むNode.jsやフロントエンドアプリ(例:<code>config.yml</code>、Kubernetesマニフェスト、CIワークフロー)を開発するとき、パースされたデータ用の型付き構造が必要です。ここにサンプルを貼り付けると、js-yamlやyamlパッケージで使用できるTypeScriptインターフェースが得られます。複雑なネストされたYAMLの型を手動で書くのは面倒です;このツールはサンプルから構造を推論します。

application.ymlやGitHub Actionsワークフローなどの設定ファイルは深いネストを持つことが多いです。生成された型はタイポの検出やIDEでのオートコンプリートに役立ちます。大きなYAMLから特定の値を抽出するには、まずJSONに変換してjqを使用してください。

よくある質問

TypeScriptでYAMLをパースするには?

js-yamlまたはyamlパッケージを使用してください。YAML文字列をパースして生成された型に代入:const config = yaml.parse(str) as MyConfig。ランタイム検証にはZodやio-tsを検討してください。

js-yamlとyamlパッケージの違いは?

js-yamlは広く使われています。yamlパッケージは異なるAPIとより良いコメント保持を持っています。どちらも生成された型で動作します。

データはプライベートですか?

はい。生成は完全にブラウザ内で行われます。YAMLやコードはサーバーに送信されません。

オプショナルと必須フィールドは?

ジェネレーターはサンプルから推論します。オプショナルフィールドにはインターフェースプロパティに?を追加してください。厳密なランタイム検証には、生成された型を参照としてZodなどを使用してください。

AngularやReactで使えますか?

はい。生成された型はどのTypeScriptプロジェクトでも動作します。ビルド時またはランタイムでYAMLを読み込み、生成されたインターフェースにキャストしてください。環境設定には、ConfigサービスでYAMLを読み込むことを検討してください。

関連ツール

TypeScriptドキュメントYAML仕様js-yamlJSON仕様MDN