Типизация параметров

Navigo — это легковесная библиотека для маршрутизации на стороне клиента в JavaScript, предоставляющая удобный способ работы с URL и параметрами маршрутов. Одним из ключевых аспектов работы с маршрутизатором является типизация параметров, которая позволяет контролировать формат данных, передаваемых через URL, и предотвращать ошибки при их обработке.

Объявление параметров в маршрутах

В Navigo параметры маршрутов объявляются с использованием двоеточия : в пути маршрута. Например:

const router = new Navigo('/');

router.on('/user/:id', (params) => {
  console.log(params.id);
});

Здесь :id — это динамический параметр, который можно получить через объект params в обработчике маршрута. По умолчанию все параметры приходят как строки, что важно учитывать при работе с числами или логическими значениями.

Преобразование типов параметров

Для корректной работы с параметрами, отличными от строк, необходимо вручную конвертировать их в нужный тип. Рассмотрим наиболее часто используемые преобразования:

Числа

router.on('/product/:productId', (params) => {
  const productId = Number(params.productId);
  if (isNaN(productId)) {
    console.error('Некорректный идентификатор продукта');
    return;
  }
  console.log('ID продукта:', productId);
});

Булевы значения

router.on('/feature/:enabled', (params) => {
  const enabled = params.enabled === 'true';
  console.log('Фича включена:', enabled);
});

Массивы и сложные объекты

Если необходимо передавать несколько значений через один параметр, можно использовать сериализацию в JSON:

router.on('/search/:filters', (params) => {
  try {
    const filters = JSON.parse(decodeURIComponent(params.filters));
    console.log('Фильтры:', filters);
  } catch (e) {
    console.error('Ошибка разбора параметров фильтров', e);
  }
});

При этом при формировании URL необходимо кодировать JSON через encodeURIComponent.

Валидация параметров с регулярными выражениями

Navigo позволяет ограничивать формат параметров с помощью регулярных выражений, что является эффективным способом обеспечения корректной типизации на уровне маршрута:

router.on('/order/:orderId(\\d+)', (params) => {
  // orderId гарантированно содержит только цифры
  const orderId = Number(params.orderId);
  console.log('ID заказа:', orderId);
});

router.on('/color/:hex([0-9A-Fa-f]{6})', (params) => {
  console.log('Цвет в формате HEX:', params.hex);
});

:orderId(\d+) — только числа
:hex([0-9A-Fa-f]{6}) — шестизначный шестнадцатеричный код

Использование регулярных выражений позволяет отсечь некорректные URL еще до вызова обработчика, повышая надежность приложения.

Типизация опциональных и необязательных параметров

Для опциональных параметров Navigo поддерживает синтаксис с вопросительным знаком ?:

router.on('/page/:pageNumber?', (params) => {
  const pageNumber = params.pageNumber ? Number(params.pageNumber) : 1;
  console.log('Текущая страница:', pageNumber);
});

Здесь :pageNumber? может отсутствовать в URL, и тогда можно задать значение по умолчанию. Это удобно для маршрутов пагинации или фильтров.

Комплексная типизация через TypeScript

При использовании TypeScript можно задать типизацию параметров на уровне интерфейсов, что обеспечивает автодополнение и проверку типов при разработке:

interface UserParams {
  id: string;
  active?: boolean;
}

router.on('/user/:id/:active?', (params: UserParams) => {
  const userId = params.id;
  const isActive = params.active === 'true';
  console.log(userId, isActive);
});

Таким образом, Navigo интегрируется с системой типов TypeScript, позволяя описывать структуру параметров и предотвращать ошибки на этапе компиляции.