TypeScript + React: Using one prop value to dynamically type another

Question

I'm writing a Link component with TypeScript, and am trying to achieve a typed API that supports the varying parameters that my app routes use.

I have some routes defined like this:

enum Routes {
  CONTACT = '/contact'
  PRODUCT = '/product/[productId]'
}

type RouteParams = {
  [Routes.CONTACT]: undefined;
  [Routes.PRODUCT]: {
    productId: string
  }
}

The Link component API is like this:

type LinkProps = React.FC<{ href: Routes, params?: {} }>

My question is, is it possible for params here to dynamically change to the correct type defined in RouteParams, based on the input href value?

For example:

<Link href={Routes.CONTACT} /> // correctly typed

<Link href={Routes.PRODUCT} params={{}} /> // error: missing 'productId' param

Thank you for your comment, that would certainly be an improvement, but I don't believe it solves the question at hand here regarding dynamic types. Thanks again! — sherlock
– sherlock, Commented Aug 9, 2020 at 19:45

AKX · Accepted Answer · 2020-08-09 19:40:29Z

2

This is the best I can do, but it's castless and typechecks out :)

enum Routes {
  CONTACT = "/contact",
  PRODUCT = "/product/[productId]",
}

type RouteParams = {
  [Routes.CONTACT]: {};
  [Routes.PRODUCT]: {
    productId: string;
  };
};

function TLink<T extends Routes>({ href, ...p }: { href: T } & RouteParams[T]) {
  return <Link href={href} {...p} />;
}

function Component() {
  return (
    <Container>
      <TLink href={Routes.CONTACT} />
      <TLink href={Routes.PRODUCT} productId="42" />
    </Container>
  );
}

answered Aug 9, 2020 at 19:40

AKX

171k16 gold badges146 silver badges228 bronze badges

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

1 Comment

sherlock Over a year ago

Thank you so much! Your solution is exactly what I was looking for. I have updated the typing on the Link component example you provided like so: ``` const Link = <T extends keyof RouteParams>({ href, ...p }: { href: T } & { params?: RouteParams[T] }) => <NextLink href={href} {...p} />; ``` To achieve my desired API of passing the params in a specified prop. Thanks again!

Collectives™ on Stack Overflow

TypeScript + React: Using one prop value to dynamically type another

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related