How to correctly infer props from `createLink` ?

reacttypescript

I noticed when trying to infer the props created from

createLink

createLink

that the

to

to

prop turns into a generic string, e.g.

import { createLink } from "@tanstack/react-router";
import type { ComponentProps } from "react";
import { Link as RACLink } from "react-aria-components";

export const Link = createLink(RACLink);
export type LinkProps = ComponentProps<typeof Link>;

// This turns into `type Foo = string | undefined`
type Foo = LinkProps["to"];

import { createLink } from "@tanstack/react-router";
import type { ComponentProps } from "react";
import { Link as RACLink } from "react-aria-components";

export const Link = createLink(RACLink);
export type LinkProps = ComponentProps<typeof Link>;

// This turns into `type Foo = string | undefined`
type Foo = LinkProps["to"];

This is problematic when trying to create a wrapper around

<Link />

<Link />

such as a breadcrumb component, e.g.

const Breadcrumb = (props: LinkProps) => (
    <RACBreadcrumb>
        <Link {...props}>Foo</Link>
    </RACBreadcrumb>
);

// `to` type safety is lost here
<Breadcrumb to="" />

const Breadcrumb = (props: LinkProps) => (
    <RACBreadcrumb>
        <Link {...props}>Foo</Link>
    </RACBreadcrumb>
);

// `to` type safety is lost here
<Breadcrumb to="" />

Is there a better way of inferring the link props?

TanStack•3mo ago•

2 replies

sad-indigo

How to correctly infer props from `createLink` ?

reacttypescript

I noticed when trying to infer the props created from

createLink

createLink

that the

to

to

prop turns into a generic string, e.g.

import { createLink } from "@tanstack/react-router";
import type { ComponentProps } from "react";
import { Link as RACLink } from "react-aria-components";

export const Link = createLink(RACLink);
export type LinkProps = ComponentProps<typeof Link>;

// This turns into `type Foo = string | undefined`
type Foo = LinkProps["to"];

import { createLink } from "@tanstack/react-router";
import type { ComponentProps } from "react";
import { Link as RACLink } from "react-aria-components";

export const Link = createLink(RACLink);
export type LinkProps = ComponentProps<typeof Link>;

// This turns into `type Foo = string | undefined`
type Foo = LinkProps["to"];

This is problematic when trying to create a wrapper around

<Link />

<Link />

such as a breadcrumb component, e.g.

const Breadcrumb = (props: LinkProps) => (
    <RACBreadcrumb>
        <Link {...props}>Foo</Link>
    </RACBreadcrumb>
);

// `to` type safety is lost here
<Breadcrumb to="" />

const Breadcrumb = (props: LinkProps) => (
    <RACBreadcrumb>
        <Link {...props}>Foo</Link>
    </RACBreadcrumb>
);

// `to` type safety is lost here
<Breadcrumb to="" />

Is there a better way of inferring the link props?

How to correctly infer props from `createLink` ?

Similar Threads

How to correctly infer props from `createLink` ?

Similar Threads

Similar Threads

Similar Threads