Typescript complaining about `Type 'WrappedComponent' is not assignable to type 'typeof SvelteComponent<any>'.ts(2322)`

[rallets]

Hi, I'm trying to strongly type a route mapping, but when I wrap a component the type doesn't make VS Code typescript happy.

const routes: Record<'/blabla' | '*', typeof SvelteComponent<any>> = {
  // Type 'WrappedComponent' is not assignable to type 'typeof SvelteComponent<any>'.
  // Property 'prototype' is missing in type 'WrappedComponent' but required in type 'typeof SvelteComponent<any>'
  '/blabla': wrap({ component: DummyComponent, props: { aProp: true } }),
}

Any tips?

[carbogninalberto]

If you add WrappedComponent instead of '*'?

[rallets]

@carbogninalberto Hi, thanks for the tip. It's doesn't help, because '*' was just a catch-all route, I forgot to remove it in the example, but it sent me in the right direction. The problem I was facing was related to the type returned from wrap, that it doesn't look to be a SvelteComponent, that is the base class for a Svelte component.

I found the solution: I didn't notice wrap didn't return a SvelteComponent but instead a WrappedComponent that Router uses internally. Hence I just modified my typings and everything works like a charm:

const routes: Record<'/blabla' | '*', typeof SvelteComponent<any> | WrappedComponent> = {
  '/blabla': wrap({ component: DummyComponent, props: { aProp: true } }),
  ...
}