Документация в TypeScript: как писать код, который говорит сам за себя

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Введение: почему документация — это не скучная обязанность, а суперсила

Представьте: вы возвращаетесь к своему проекту через полгода. Открываете файл с логикой авторизации — и видите море кода на TypeScript. Типы есть, интерфейсы прописаны, но что делает эта функция? Почему параметр называется opts и какие у него поля? Знакомо?

Документация в TypeScript — это не просто «комментарии для галочки». Это инструмент, который превращает ваш код в понятную историю. Хорошая документация экономит часы дебаггинга, ускоряет онбординг новичков и делает ваш API дружелюбным. В этой статье мы разберём лучшие практики документирования TypeScript-проектов: от базовых комментариев JSDoc до продвинутой генерации документации с TypeDoc. Поехали!

1. JSDoc и TSDoc: фундамент вашей документации

TypeScript унаследовал от JavaScript популярный формат JSDoc, а затем сообщество разработало TSDoc — стандартизированный синтаксис для TypeScript. Если вы пишете библиотеку или API, TSDoc — ваш выбор. Он строже, лучше интегрируется с редакторами и генераторами документации.

Базовые теги TSDoc

Вот минимум, который стоит знать каждому разработчику:

  • @param — описание параметра функции
  • @returns — что возвращает функция
  • @throws — какие исключения может выбросить
  • @example — пример использования
  • @deprecated — пометка устаревшего кода
/**
 * Вычисляет скидку на товар с учётом промокода.
 * 
 * @param price - Исходная цена товара (должна быть больше 0)
 * @param discountPercent - Процент скидки (от 0 до 100)
 * @param promoCode - Промокод, который может увеличить скидку
 * @returns Итоговая цена после применения скидки
 * @throws {Error} Если цена или процент некорректны
 * 
 * @example
 * // Пример: скидка 20% на товар за 1000 рублей
 * const finalPrice = calculateDiscount(1000, 20, 'SUMMER');
 * console.log(finalPrice); // 800
 */
function calculateDiscount(
  price: number,
  discountPercent: number,
  promoCode?: string
): number {
  if (price <= 0 || discountPercent < 0 || discountPercent > 100) {
    throw new Error('Некорректные параметры');
  }
  
  let discount = discountPercent;
  if (promoCode === 'SUMMER') {
    discount += 10; // дополнительная скидка
  }
  
  return price * (1 - discount / 100);
}

Совет: Всегда описывайте граничные случаи. Если параметр может быть undefined, укажите это в описании. TypeScript типы — это хорошо, но человеческий язык добавляет контекст.

2. Документируйте типы и интерфейсы

Одна из главных фич TypeScript — мощная система типов. Но даже самый строгий тип не объяснит назначение поля. Документируйте интерфейсы так же тщательно, как функции.

/**
 * Конфигурация для подключения к внешнему API погоды.
 */
interface WeatherApiConfig {
  /** Базовый URL API (например, https://api.weather.com) */
  baseUrl: string;
  
  /** Ключ аутентификации, полученный от провайдера */
  apiKey: string;
  
  /** 
   * Количество секунд ожидания ответа от сервера.
   * По умолчанию 5 секунд.
   */
  timeout?: number;
  
  /**
   * Версия API. Если не указана, используется последняя стабильная.
   * @deprecated Используйте поле `version` в URL
   */
  apiVersion?: string;
}

Обратите внимание: для timeout мы указали значение по умолчанию прямо в комментарии. Это избавляет разработчика от необходимости лезть в исходный код или тесты.

3. Генерация документации: превращаем комментарии в сайт

Писать комментарии — полдела. Нужно уметь превращать их в удобную документацию. Для TypeScript лучший инструмент — TypeDoc. Он парсит ваши TSDoc-комментарии и создаёт статический сайт с описанием всех типов, функций и классов.

Как настроить TypeDoc

Установка и базовый запуск:

npm install --save-dev typedoc

# Создать документацию в папке docs/
npx typedoc --out docs src/index.ts

Для продвинутой конфигурации создайте typedoc.json:

{
  "entryPoints": ["src/index.ts"],
  "out": "docs",
  "exclude": ["**/__tests__/**"],
  "theme": "default",
  "includeVersion": true,
  "categorizeByGroup": true,
  "categoryOrder": ["Functions", "Types", "Interfaces", "*"]
}

Важно: TypeDoc поддерживает не только функции, но и модули, классы, перечисления. Добавьте в корневой файл проекта комментарий к модулю:

/**
 * @packageDocumentation
 * Модуль для работы с платежами.
 * Содержит функции для создания, обработки и отмены транзакций.
 */

4. Пишите README как продакт-менеджер

Документация в коде — это хорошо, но первое, что видит разработчик — README.md. Сделайте его информативным и структурированным. Вот чек-лист:

  • Заголовок и описание: одной строкой объясните, что делает проект.
  • Установка: команды для npm/yarn/pnpm.
  • Быстрый старт: минимальный рабочий пример.
  • API Reference: ссылка на сгенерированную документацию.
  • Примеры: 2-3 реальных сценария использования.
  • Contributing: как помочь проекту.

Пример хорошего начала README:

# Weather SDK — TypeScript клиент для OpenWeatherMap

Простая и типобезопасная библиотека для получения данных о погоде.
Поддерживает текущую погоду, прогноз на 5 дней и исторические данные.

## Установка

```bash
npm install @myorg/weather-sdk
```

## Быстрый старт

```typescript
import { WeatherClient } from '@myorg/weather-sdk';

const client = new WeatherClient({ apiKey: 'YOUR_KEY' });
const weather = await client.getCurrentWeather('Moscow');
console.log(weather.temperature); // number
```

5. Документирование сложных сценариев: перегрузки функций и дженерики

TypeScript позволяет создавать перегруженные функции и дженерики. Документировать их нужно особенно тщательно, иначе пользователь запутается.

Перегрузки функций

/**
 * Создаёт пользователя в системе.
 * 
 * @param name - Имя пользователя (обязательно)
 * @param email - Email (обязательно)
 * @returns Объект пользователя                

Блоги

Рекомендаций по книгам