how to create a function that recieves a path compatible with the resolve fn

Question

I'm creating a component that will receive several RouteId and create links

I want to use the resolve fn to validate them

see: https://svelte.dev/docs/kit/$app-paths#resolve

If I declare a prop (or a variable) like RouteId, typescript effectively validates that it is a valid route

the problem is that resolve fn does not recognize it

import { resolve } from '$app/paths';
import type { RouteId } from '$app/types';

// this is OK, typescript validates that path IS a valid route
console.log('myResolve: ', myResolve('/api/health'));

function myResolve(path: RouteId) {
    return resolve(path); // but resolve DOES NOT ACCEPT type RouteId
}

the error:

Error: Argument of type '["/api/endpoint1" | "/api/endpoint2" ... 20 more ... | [route: ...]'.
Type '"/xxxx"' is not assignable to type '"/yy"'. (ts)
  
function myResolve(path: RouteId) {
        return resolve(path); // but resolve DOES NOT ACCEPT type RouteId
}

I had to solve it like this:

<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<!-- Reason: resolve cannot recognize demo.href as a valid RouteId type, we bypass the verification. -->
<a
    class="font-medium text-foreground transition-colors hover:text-primary"
    href={resolve(demo.href as any)}
>
    {demo.name}
</a>

how can I tell resolve function that demo.href is a valid RouteId, which it effectively is

update: I tried with what @brunnerh suggestion, same error

Argument of type '[route: "/"] | [route: "/api"] | [route: "/api/health"] | ... 58 more ... | [route: ...]'.
[...]
        Type at position 0 in source is not compatible with type at position 0 in target.
          Type '"/api/provincias/[provincia]" | "/api/provincias/[provincia]/departamentos" | "/api/provincias/[provincia]/departamentos/[departamento]" | "/api/provincias/[provincia]/departamentos/[departamento]/localidades"' is not assignable to type '"/api/provincias/[provincia]"'.
            Type '"/api/provincias/[provincia]/departamentos"' is not assignable to type '"/api/provincias/[provincia]"'.ts(2345)

brunnerh · Accepted Answer · 2025-09-17 06:08:45Z

2

If you want function arguments that work with resolve, you could copy the type, which internally includes a second argument for routes with parameters:

function myResolve<T extends RouteId | Pathname>(
  ...args: Parameters<typeof resolve<T>>
) {
    return resolve(...args);
}

This will not help at your call site, though. If you use the function with unknown values, you will have to use a type assertion like as any or ignore the resulting error. I do not think there is a way around this.

edited Sep 17 at 6:08

answered Sep 17 at 6:03

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

opensas Sep 17 at 18:03

thanks a lot for the reply, your suggestion makes a lot of sense but it seems to produce the same error, I update the question to reflect this

brunnerh Sep 17 at 22:19

Might be a TS version issue. Also noticed that Deno has problems with it. Could maybe try typing the function as a whole via const myResolve: typeof resolve = (...args) => { ... }.

Collectives™ on Stack Overflow

how to create a function that recieves a path compatible with the resolve fn

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related