Skip to content

Latest commit

 

History

History
217 lines (148 loc) · 5.04 KB

File metadata and controls

217 lines (148 loc) · 5.04 KB
title Занятие 12
description Документирование кода - работа с типами и JSDoc. TypeScript

OTUS

Javascript / TypeScript

Зачем документировать код?

  • Не про комментарии, а про описание интерфейсов и API
  • Повышает читаемость и сопровождение
  • Улучшает работу команды и вхождение в проект
  • Используется IDE и автокомплитом

Что включает хорошая документация?

  • Назначение модуля/функции
  • Типы входных и выходных данных
  • Примеры использования
  • Указание особенностей или ограничений

Именование: основа читаемости

  • Функции: глаголы (getUser, calculateTotal)
  • Модули: предметная область (authService, logger)
  • Переменные:
    • булевы: isValid, hasPermission
    • коллекции: users, items
    • константы: MAX_LENGTH, DEFAULT_TIMEOUT

Примеры наименований

Плохо Хорошо
data() fetchUserData()
check() isAuthorized()
calc() calculatePrice()

Что такое JSDoc

Определение и цели

  • JSDoc — способ аннотировать JS-код для понимания структуры и типов
  • Не требует TypeScript!
  • Работает в любом .js файле

Пример JSDoc

/**
 * Складывает два числа
 * @param {number} a Первое число
 * @param {number} b Второе число
 * @returns {number} Сумма
 */
function add(a, b) {
  return a + b;
}

Основные теги JSDoc

  • @param — параметры функции
  • @returns — возвращаемое значение
  • @example — пример использования
  • @typedef — объявление типа
  • @deprecated, @see, @throws и др.

Как работает в редакторе

  • Подсказки и типы при наведении
  • Автокомплит параметров и возвращаемых значений
  • Можно использовать без TS!

TypeScript и JSDoc

Чем TypeScript лучше JSDoc

JSDoc TypeScript
Простота ❌ требует настройку
Проверка ограничена ✅ строгая проверка
IDE-помощь 👍 🔥 лучшее качество
Рефакторинг ❌ (часто ломается) ✅ надёжный

Пример JSDoc и TS

JSDoc:

/** @param {string} name */
function greet(name) {
  return "Hi, " + name;
}

TypeScript:

function greet(name: string): string {
  return "Hi, " + name;
}

Гибридный режим

  • .js + JSDoc + tsconfig.json
  • Получаем линтинг и автотипизацию без перехода на .ts

Генерация документации

С помощью JSDoc

npm install --save-dev jsdoc
npx jsdoc src -r -d docs
  • Генерирует HTML-документацию по комментариям

С помощью TypeDoc (для TS)

npm install --save-dev typedoc
npx typedoc src
  • Создаёт красивую документацию с ссылками между типами и интерфейсами

TypeScript для линтинга JS

Пример tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "strict": true
  },
  "include": ["src"]
}

Что даёт checkJs

  • TypeScript проверяет .js файлы
  • Учитывает типы из JSDoc
  • Показывает ошибки типов до выполнения

Пример ошибки:

/** @param {number} x */
function double(x) {
  return x * "2"; // ❌ ошибка типов
}

Выводы

  • Документация = ясное API, а не просто комментарии
  • JSDoc помогает даже без TypeScript
  • TS усиливает надёжность и масштабируемость
  • Документацию можно генерировать автоматически
  • TypeScript умеет проверять .js-файлы с JSDoc

Вопросы? 🙋‍♀️🙋‍♂️