reactjs 根据最接近的 prop 推断类型

dtcbnfnu  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(134)

我希望有人能帮助我或澄清,如果我试图实现的是可能的。我目前正在创建一个组件,但有关于类型推理的麻烦。下面的代码。

import { faker } from "@faker-js/faker";
import * as React from "react";

type StringOrNumber = number | string;

type Offset = {
  top?: StringOrNumber;
  left?: StringOrNumber;
  right?: StringOrNumber;
  bottom?: StringOrNumber;
};

type Tab<T extends unknown[]> = {
  label: string;
  items: T;
  render: (item: T[number]) => JSX.Element | null;
  badgeCount?: StringOrNumber;
};

type NotificationProps<T extends Tab<unknown[]>[]> = {
  tabs?: T;
  offset?: Offset;
  heading?: string;
  onMarkAllUsRead?(): void;
};

export default function Notification<T extends Tab<unknown[]>[]>(
  props: NotificationProps<T>,
) {
  return <div>{props.heading}</div>;
}

// Example usage:
<Notification
  offset={{
    top: "50px",
  }}
  tabs={[
    {
      label: "Users",
      items: new Array(5).fill(null).map(() => ({
        name: faker.name.fullName(),
        email: faker.internet.email(),
      })),
      render: (user) => {
        return null;
      },
    },
    {
      label: "Emails",
      items: new Array(5).fill(null).map(() => ({
        type: faker.random.word(),
        body: faker.lorem.paragraph(),
      })),
      render: (email) => {
        return null;
      },
    },
  ]}
/>;

我试图实现的是让render中的参数推断最接近的items的类型,但目前它的类型是unknown。有什么方法可以做到这一点吗?提前感谢

ryevplcw

ryevplcw1#

我不能发表评论,因为我没有50的声誉,但我想说的是,你得到了隐式的any错误,因为你将泛型数组约束为unknown[],这意味着它的项目可以是任何类型。如果你这样做:

type Tab<T extends number[]> = {
   label: string;
   items: T;
   render: (item: T[number]) => string | null;
   badgeCount?: string | number;
};

typescript会知道T数组中的每一项都是一个数字。这是一个非常简化的例子,但只是为了让你能指出你的错误。
这是我的solution

相关问题