TypeScript + React：使用一个道具值动态键入另一个

Question

我正在使用 TypeScript 编写一个 Link 组件，并试图实现一个支持我的应用程序路由使用的各种参数的类型化 API。

我有一些这样定义的路线：

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

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

Link 组件 API 是这样的：

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

我的问题是，这里的params 是否可以根据输入的href 值动态更改为RouteParams 中定义的正确类型？

例如：

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

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

Answer 1

这是我能做的最好的，但它是无铸型的并且类型检查出来:)

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>
  );
}