0Pricing
TypeScript Academy · レッスン

OpenAPI Codegen：自動生成される型

OpenAPI仕様からTypeScriptの型を生成します。

「OpenAPI Codegen：自動生成される型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

ようこそ

OpenAPIのコード生成は、API仕様からTypeScriptの型とクライアントコードを生成し、手動での型のメンテナンスを不要にします。

コード生成を使う理由

大規模なAPIの型を手作業で記述すると、ミスが起こりやすく、実装とのずれも生じます。コード生成では、信頼できる唯一の情報源であるOpenAPI仕様から型を導出します。

openapi-typescript

openapi-typescriptは、OpenAPI仕様ファイルからTypeScriptの型を生成します。
npm install -D openapi-typescript
npx openapi-typescript ./api.yaml -o ./src/types/api.ts

生成される型

このツールは、パス、オペレーション、スキーマの型を生成します。
import type { paths } from './types/api';
type GetUserResponse = paths['/users/{id}']['get']['responses']['200']['content']['application/json'];

openapi-fetchクライアント

生成された型とopenapi-fetchを使って、完全に型付けされたクライアントを作成します。
import createClient from 'openapi-fetch';
const client = createClient<paths>({ baseUrl: 'https://api.example.com' });
const { data, error } = await client.GET('/users/{id}', { params: { path: { id: 1 } } });

Swagger Codegen

Swagger Codegenは、TypeScriptで完全なクライアントSDKを生成します。
npm install @openapitools/openapi-generator-cli -g
openapi-generator-cli generate -i api.yaml -g typescript-axios -o ./src/client

orval

orvalは、OpenAPI仕様からReact QueryのフックとZodスキーマを生成します。
npm install -D orval
orval --input api.yaml --output src/api

型の同期を保つ

CIでコード生成を実行し、仕様と生成された型のずれを検出します。

スキーマファーストのAPI開発

まずOpenAPI仕様を定義し、型とクライアントコードを生成してから、サーバーを実装します。

生成された型とMSW

テストで型安全なAPIモックを作成するために、生成された型とMock Service Workerを使用します。

型安全なURL構築

生成されたクライアントは、正しいパスパラメーターとクエリ文字列の形状を強制します。

確認問題

OpenAPI TypeScriptのコード生成を使う主な利点は何ですか？

まとめ

OpenAPIコード生成、自動生成された型：重要な概念とパターンを身につけました。

よくある質問

「OpenAPI Codegen：自動生成される型」レッスンは無料ですか？

はい。「OpenAPI Codegen：自動生成される型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「OpenAPI Codegen：自動生成される型」で何を学びますか？

OpenAPI仕様からTypeScriptの型を生成します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「OpenAPI Codegen：自動生成される型」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ジェネリックラッパーによるFetchレスポンスの型付け
  2. Zodによる実行時バリデーション
  3. OpenAPI Codegen：自動生成される型
  4. 型安全なtRPCクライアントの概要
← TypeScript Academyに戻る