Defining custom link prop types without breaking type inference

I'm migrating a next codebase to tanstack router, and we have a lot of components that can act either as a link or a button (something like

Props = { onClick: () => void } | { href: UrlObject }

Props = { onClick: () => void } | { href: UrlObject }

. I'm trying to replace the link part with tanstack router links, so I tried the following:

type SomeButton = { onClick: () => void } | Pick<LinkComponentProps, "to" | "search" | "params">

type SomeButton = { onClick: () => void } | Pick<LinkComponentProps, "to" | "search" | "params">

However, picking seems to break type inference for

search

search

and

params

params

(I can pass any search and param defined across the entire app). Anyone got an idea how I could achieve this?

TanStack•8mo ago•

22 replies

brilliant-lime

I'm migrating a next codebase to tanstack router, and we have a lot of components that can act either as a link or a button (something like

Props = { onClick: () => void } | { href: UrlObject }

Props = { onClick: () => void } | { href: UrlObject }

. I'm trying to replace the link part with tanstack router links, so I tried the following:

type SomeButton = { onClick: () => void } | Pick<LinkComponentProps, "to" | "search" | "params">

type SomeButton = { onClick: () => void } | Pick<LinkComponentProps, "to" | "search" | "params">

However, picking seems to break type inference for

search

search

and

params

params

(I can pass any search and param defined across the entire app). Anyone got an idea how I could achieve this?