sveltejs/kit

Add $routes type alias

Open

#13517 opened on Feb 28, 2025

View on GitHub
 (2 comments) (2 reactions) (0 assignees)JavaScript (17,446 stars) (1,719 forks)batch import
feature / enhancementhelp wantedneeds-decision

Description

Describe the problem

I'd love to use route data directly in $lib/components instead of passing props to reduce type boilerplate. This is possible with page.data from $app/state, but it lacks proper types, requiring manual type assertions:

import { page } from '$app/state';
import type { PageData } from "../../routes/listings/$types";

const { carsCount } = $derived(page.data as PageData)

The main challenge is importing the correct PageData type, especially in deeply nested components and routes - path can quickly become cumbersome.

Describe the proposed solution

I'd love to have $routes alias which points directly to generated route types so I can use it in any part of the app:

import { page } from '$app/state';
import type { PageData } from "$routes/listings/$types";

const { carsCount } = $derived(page.data as PageData)

It's already working by providing alias in svelte.config.js:

export default {
  kit: {
    alias: {
      $routes: '.svelte-kit/types/src/routes'
    }
  }
}

Would be nice to have it right of the box 🥳

Alternatives considered

Some generic with route path param would also be fine

Importance

would make my life easier

Additional Information

No response

Contributor guide