Exported Types

You will be able to use the module generated types for custom purposes (like typing props) They are all importable from @typed-router alias

Routes definitions types

RoutesNamesList

RoutesNamesList is an union type regrouping all the registered route names of your app.

<script setup lang='ts'>
import type {RoutesNamesList} from '@typed-router';

const props = defineProps<{
  routeName: RoutesNamesList
}>();
</script>

RoutesParamsRecord

RoutesParamsRecord is a dictionnary containing the route names as key and their params as values

Exemple output

export type RoutesParamsRecord = {
  index: never;
  'user-foo-bar': {
    foo: string | number;
    bar?: string | number;
  };
  'user-id-slug-articles': {
    id?: string | number;
    slug?: string | number;
  };
  user: never;
  'user-posts-slug': {
    slug: (string | number)[];
  };
  'user-test-optional': {
    optional?: string | number;
  };
};

RoutesNamedLocations

RoutesNamedLocations is Discriminated union that will allow to infer params based on route name It's used for programmatic navigation like router.push or

Exemple output

export type RoutesNamedLocations =
  | { name: 'index' }
  | {
      name: 'user-foo-bar';
      params: {
        foo: string | number;
        bar?: string | number;
      };
    }
  | {
      name: 'user-id-slug-articles';
      params?: {
        id?: string | number;
        slug?: string | number;
      };
    }

RoutesNamedLocationsResolved

RoutesNamedLocationsResolved is a partial discrimanated union type that regroups each route name and their params.
This type is meant to be used for resolved routes.

Exemple output

 export type RoutesNamedLocationsResolved = {
  name: TypedRouteList;
  params: unknown;
} & (
  | { name: 'index' }
  | {
      name: 'user-foo-bar';
      params: {
        foo: string;
        bar?: string;
      };
    }
  | {
      name: 'user-id-slug-articles';
      params: {
        id: string;
        slug: string;
      };
    }
  | {
      name: 'user-id-slug';
      params: {
        id: string;
        slug: string;
      };
    };

Router related types

TypedRouter

TypedRouter is the type returned by useRouter.
It's an extension of vue-router.Router with type abilities.

import {TypedRouter} from '@typed-router';

declare const customRouter: TypedRouter

TypedRouteLocationRaw

Clone of vue-router.RouteLocationRaw with discrimanated name and params properties

TypedRouteLocationRawFromName<T>

Same as TypedRouteLocationRaw but with a generic param indicating route name

Resolved routes related types

TypedRoute

TypedRoute is the default type returned by useRoute.
It's an extension of vue-router.Route with type abilities.

It includes a discrimated union for name/params type-check, meaning it can type check itself when doing a type guard check on its name.

<script setup lang='ts'>
import {TypedRoute} from '@typed-router';

const props = defineProps<{
  route: TypedRoute
}>();

if (props.route.name === 'foo-bar') {
  console.log(props.route.params.bar);
}
</script>

TypedNamedRoute<T>

TypedNamedRoute is the secondary type returned by useRoute.
It's a genereric type and it's first type argument is the route name.

It's used when calling useRoute with a route name assertion.
You can use it to infer the correct route params given a route name;

import {TypedNamedRoute, TypedRouteList} from '@typed-router';

function getMyRoute<T extends TypedRouteList>(name: T): TypedNamedRoute<T> {
  // 
}