TypeScript React: использование одного значения prop для динамического ввода другого

#reactjs #typescript

Вопрос:

Я пишу компонент Link с помощью TypeScript и пытаюсь создать типизированный API, который поддерживает различные параметры, используемые маршрутами моего приложения.

У меня есть несколько маршрутов, определенных следующим образом:

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

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

API компонента Link выглядит следующим образом:

 type LinkProps = React.FC<{ href: Routes, params?: {} }&&t;

Мой вопрос в том, возможно ли params здесь динамически изменять правильный тип, определенный в RouteParams , на основе входного href значения?

Например:

 <Link href={Routes.CONTACT} /&&t; // correctly typed

<Link href={Routes.PRODUCT} params={{}} /&&t; // error: missin& 'productId' param

1. Почему бы вам не определить параметры как [k: strin&]: строка;

2. Спасибо за ваш комментарий, это, безусловно, было бы улучшением, но я не верю, что это решает рассматриваемый здесь вопрос относительно динамических типов. Еще раз спасибо!

Ответ №1:

Это лучшее, что я могу сделать, но оно не имеет кастинга и не проверяет тип 🙂

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

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

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

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

1. Большое вам спасибо! Ваше решение — это именно то, что я искал. Я обновил ввод в примере компонента Link, который вы предоставили, следующим образом: « const Link = <T расширяет ключ routeParams&&t;({href, …p }: { href: T } amp; { params?: routeParams[T] }) =&&t; <nextLink href={href} {…p} /&&t;; « Чтобы достичь желаемого API для передачи параметров в указанном prop. Еще раз спасибо!