Генерация типов

Vue Router — это официальная библиотека маршрутизации для Vue.js, обеспечивающая управление навигацией внутри одностраничного приложения (SPA). Для TypeScript и современных сред разработки крайне важно иметь корректные типы маршрутов и параметров, чтобы избежать ошибок на этапе компиляции и получить автодополнение в IDE.

Основные концепции типов маршрутов

В Vue Router маршруты определяются объектами с ключами path, name, component и опциональными параметрами:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from './components/Home.vue';
import User from './components/User.vue';

const routes: Array<RouteRecordRaw> = [
  { path: '/', name: 'home', component: Home },
  { path: '/user/:id', name: 'user', component: User, props: true },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Ключевой момент: использование интерфейса RouteRecordRaw позволяет TypeScript корректно типизировать структуру маршрутов.

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

Vue Router позволяет передавать параметры через URL. Для безопасного доступа к ним необходимо определить типы параметров:

import { RouteLocationNormalizedLoaded } from 'vue-router';

type UserRouteParams = {
  id: string;
};

function getUserId(route: RouteLocationNormalizedLoaded) {
  const params = route.params as UserRouteParams;
  return params.id;
}

Использование кастинга через as позволяет получить строгую типизацию параметров, что предотвращает ошибки при доступе к несуществующим ключам.

Генерация типов из маршрутов

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

type RouteNames = typeof routes[number]['name'];

function navigateTo(routeName: RouteNames) {
  router.push({ name: routeName as string });
}

Здесь RouteNames автоматически получает union всех значений name маршрутов, что позволяет безопасно использовать их в навигации.

Типизация пропсов для компонентов маршрута

Если компонент маршрута получает параметры через props, их типизация становится критичной:

import { defineComponent } from 'vue';

const User = defineComponent({
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup(props) {
    console.log(props.id);
  }
});

Использование props: true в маршруте вместе с корректной типизацией пропсов позволяет безопасно передавать параметры напрямую компоненту.

Утилиты для динамических маршрутов

При работе с динамическими маршрутами удобно использовать функции-генераторы URL с поддержкой типов:

function userUrl(id: string) {
  return `/user/${id}`;
}

// Типизированная навигация
router.push(userUrl('123'));

Можно расширить это через TypeScript, чтобы параметры строго соответствовали ожидаемым значениям маршрута.

Интеграция с TypeScript в проектах Vue 3

При создании проекта с Vue CLI или Vite важно настроить строгую проверку типов маршрутов. В tsconfig.json следует включить следующие параметры:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

Это обеспечивает полную типовую безопасность при работе с Vue Router и предотвращает распространенные ошибки, связанные с неверными именами маршрутов или параметрами.

Генерация типов для именованных маршрутов

Для комплексных SPA часто создаются утилиты для автоматической генерации типов именованных маршрутов. Пример использования mapped types:

type RouteMap = {
  home: undefined;
  user: { id: string };
};

function navigate<K extends keyof RouteMap>(name: K, params: RouteMap[K]) {
  router.push({ name, params });
}

navigate('user', { id: '42' }); // Корректно
navigate('home', {}); // Корректно

Такой подход полностью устраняет ошибки из-за опечаток в именах маршрутов и обеспечивает строгость параметров.

Выводы по генерации типов

  • RouteRecordRaw обеспечивает базовую типизацию маршрутов.
  • Параметры маршрутов следует типизировать с помощью TypeScript для безопасного доступа.
  • Использование union типов и mapped types позволяет автоматически генерировать типы именованных маршрутов.
  • Правильная настройка TypeScript критически важна для типовой безопасности в больших приложениях.

Эти подходы позволяют создавать типобезопасные SPA на Vue 3 с гарантией корректной работы маршрутизации и автодополнением в редакторе.

Оглавление