0Pricing
TypeScript Academy · Урок

Генерация кода OpenAPI: автоматически создаваемые типы

Создавайте типы TypeScript из спецификаций OpenAPI

«Генерация кода OpenAPI: автоматически создаваемые типы» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Добро пожаловать

OpenAPI codegen создаёт типы TypeScript и код клиента по спецификациям API, устраняя необходимость вручную поддерживать типы.

Зачем нужна генерация кода

Ручное написание типов для больших API приводит к ошибкам и рассинхронизации. Codegen выводит типы из единого источника истины — спецификации OpenAPI.

openapi-typescript

openapi-typescript создаёт типы TypeScript из файла спецификации OpenAPI.
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 создаёт полноценные клиентские SDK на TypeScript.
npm install @openapitools/openapi-generator-cli -g
openapi-generator-cli generate -i api.yaml -g typescript-axios -o ./src/client

orval

orval создаёт хуки React Query и схемы Zod по спецификациям OpenAPI.
npm install -D orval
orval --input api.yaml --output src/api

Синхронизация типов

Запускайте codegen в CI, чтобы выявлять расхождения между спецификацией и сгенерированными типами.

Разработка API по схеме

Сначала определите спецификацию OpenAPI, затем сгенерируйте типы и код клиента и после этого реализуйте сервер.

MSW со сгенерированными типами

Используйте Mock Service Worker вместе со сгенерированными типами для типобезопасной имитации API в тестах.

Типобезопасное построение URL

Сгенерированные клиенты обеспечивают корректность параметров пути и структуры строки запроса.

Быстрая проверка

Каково главное преимущество использования генерации кода TypeScript по OpenAPI?

Итоги

Генерация кода OpenAPI: автоматически созданные типы: вы освоили основные понятия и паттерны.

Часто задаваемые вопросы

Урок «Генерация кода OpenAPI: автоматически создаваемые типы» бесплатный?

Да — полный текст урока «Генерация кода OpenAPI: автоматически создаваемые типы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Генерация кода OpenAPI: автоматически создаваемые типы»?

Создавайте типы TypeScript из спецификаций OpenAPI Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Генерация кода OpenAPI: автоматически создаваемые типы»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типизация ответов Fetch с обобщёнными обёртками
  2. Проверка во время выполнения с Zod
  3. Генерация кода OpenAPI: автоматически создаваемые типы
  4. Обзор типобезопасного клиента tRPC
← Назад к TypeScript Academy