curl を TypeScript に変換
curl2code は、fetch API を使用し、適切な型注釈を付けて curl コマンドを TypeScript コードに変換します。変換は WebAssembly を介してブラウザ内で実行されるため、データがデバイスの外に出ることはありません。プレーンな JavaScript については、curl to JavaScript 変換ツールを、サーバーサイドについては curl to Node.js をご覧ください。以下に、一般的なシナリオの型定義済みサンプルを示します。
ブラウザから curl をコピーする方法
- 1
デベロッパーツールを開く
F12 キーを押すか、Ctrl+Shift+Iを使用してブラウザのデベロッパーツールを開きます。
- 2
ネットワークタブに移動
ネットワークタブをクリックし、HTTP リクエストをトリガーするアクションを実行します。
- 3
cURL としてコピー
リクエストを右クリック → コピー → cURL としてコピー を選択します。その後、上に貼り付けてください。
よくある質問
curl2codeはTypeScript用に何を生成しますか？
curl2codeは、完全な型アノテーションを備えたブラウザネイティブのfetch APIを使用してTypeScriptコードを生成します。生成されたコードには、型定義されたリクエストオプション、適切なResponse処理、および型安全なJSONパースが含まれます。TypeScriptは、プレーンなJavaScriptで使用されるのと同じFetch APIにコンパイル時の安全性を提供します。
TypeScriptのfetchとJavaScriptのfetchの違いは何ですか？
実行時のAPIは同一ですが、TypeScriptは静的型チェックを追加します。型定義されたHeaders、RequestInit、Responseオブジェクトを利用できます。カスタムレスポンスの形状については、インターフェースを定義し、await response.json() as MyTypeのようにキャストします。サーバーサイドのTypeScriptについては、curl to Node.js コンバーターを確認してください。
TypeScriptで認証を処理するにはどうすればよいですか？
Fetchと同様に、型定義されたAuthorizationオブジェクトでHeadersInitヘッダーを渡します。型定義されたヘッダーヘルパーを使用すれば、TypeScriptがヘッダー名のスペルミスを防いでくれます。curl2codeは、curlの-uおよび-H 'Authorization: ...'フラグから適切に型付けされた認証ヘッダーを生成します。
TypeScriptでフォームデータを送信するにはどうすればよいですか？
ブラウザのFormData APIを使用します。TypeScriptにはそのための組み込み型定義があります。型定義されたパラメータを使用してformData.append('file', file)を呼び出します。コンパイラはビルド時に型の不一致を検出します。curl2codeは-Fフラグを適切に型付けされたFormData呼び出しに変換します。
TypeScriptで型安全にエラーを処理するにはどうすればよいですか？
try/catchと共にasync/awaitを使用します。catch句のエラーをunknownとして型付けし、instanceofで絞り込みます。パースする前にresponse.okを確認してください。API固有のエラー形式については、インターフェースで型定義されたエラーレスポンスを定義します。これにより、すべてのエラーパスが処理されていることをコンパイル時に保証できます。
TypeScriptでAPIレスポンスを型付けするにはどうすればよいですか？
期待されるレスポンス形状のインターフェースを定義し、const data: MyAPI = await response.json()を使用します。実行時のバリデーションには、zodやio-tsを組み合わせてください。このパターンにより、コードベース全体で型安全性が確保されます。他の言語での同様の型体験については、curl to Goまたはcurl to Rustをご覧ください。
TypeScriptでfetchのタイムアウトを設定するにはどうすればよいですか？
AbortControllerを使用します。TypeScriptにはAbort APIの完全な型定義が含まれています。const controller = new AbortController()を作成し、fetchにsignalを渡し、setTimeoutで中断（abort）させます。モダンなTypeScriptのlibターゲットでは、AbortSignal.timeout(ms)の短縮形も型定義されています。
TypeScriptでCORSを処理するにはどうすればよいですか？
CORSの処理はJavaScriptと同じです。これはブラウザのセキュリティ機能であり、TypeScriptの機能ではありません。必要に応じてmode: 'cors'やcredentials: 'include'を設定します。TypeScriptはRequestModeやRequestCredentialsの列挙値が正しいことを保証します。CORSが適用されないサーバーサイドのリクエストについては、curl to Node.jsをご覧ください。
TypeScriptでJSONボディを含むPOSTリクエストを送信する方法は？
curl2codeを使用して、curl -X POST -H "Content-Type: application/json" -d '{"key":"value"}' URLのようなcurlのPOSTコマンドをTypeScriptに変換します。生成されたコードではconst response: Response = await fetch(url, { method: 'POST', body: JSON.stringify(data) })を使用します。curl2codeはJSONコンテンツを含む-d/--dataフラグを自動的に検出し、fetchのコードに適切なContent-Typeヘッダーを設定します。
TypeScriptでBearerトークン認証を追加する方法は？
curl -H "Authorization: Bearer YOUR_TOKEN" URLをcurl2codeに渡すと、認証ヘッダーheaders: { Authorization: `Bearer ${token}` }を含むfetchのコードが生成されます。curl2codeは-H "Authorization: Bearer ..."と--oauth2-bearerフラグの両方からBearerトークンを検出します。Basic authの場合は、-u user:passを使用してください。
TypeScriptでContent-Typeヘッダーを設定する方法は？
curl2codeはcurl -H "Content-Type: application/json" URLを、適切なヘッダーheaders: { 'Content-Type': 'application/json' } as HeadersInitを含むfetchのコードに変換します。-dデータの場合、curlはデフォルトでapplication/x-www-form-urlencodedを使用し、-Fフォームアップロードの場合はmultipart/form-dataを使用します。curl2codeはそれぞれを正しいfetch APIにマッピングします。