T
TanStack•3y ago
like-gold

Adding Strongly Typed Link Options to Component

I am building a breadcrumb component that I want to pass a strongly typed version of the link in, I have the params for this component defined as: 
export interface BreadcrumbParams {   
    homeLink: LinkPropsOptions;
    pages: BreadcrumbPage[];
}
export interface BreadcrumbParams {   
    homeLink: LinkPropsOptions;
    pages: BreadcrumbPage[];
}
So it is working when I do things like this: 
   var breadCrumbParams: BreadcrumbParams = {
      homeLink: { to: '/$account_id/home', params: { account_id: account_id }},
      pages: []
    };
  
   var breadCrumbParams: BreadcrumbParams = {
      homeLink: { to: '/$account_id/home', params: { account_id: account_id }},
      pages: []
    };
But what is not erroring on is if I didn't include the params on the homeLink, how can I make that required like the standard Link does?
2 Replies
sunny-green
sunny-green•7mo ago
I was just trying to figure out the same thing! So for those seeing this in the future... Besides what docs mention (like using linkOptions, or making a custom link component), It appears that if you just use the LinkComponentProps type, it seems to do the trick.
sunny-green
sunny-green•7mo ago
Nevermind: It's more complicated: https://tanstack.com/router/latest/docs/framework/solid/guide/type-utilities#type-checking-link-options-with-validatelinkoptions
Type Utilities | TanStack Router Solid Docs
Most types exposed by TanStack Router are internal, subject to breaking changes and not always easy to use. That is why TanStack Router has a subset of exposed types focused on ease of use with the in...

Did you find this page helpful?