根据最近的属性推断类型

Question

我希望有人能帮助我或澄清我想要实现的目标是否可能。我目前正在创建一个组件，但在类型推断方面遇到问题。下面是代码。

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。有什么办法可以做到这一点吗？提前致谢

Answer 1

我无法发表评论，因为我没有 50 的声誉，但我想说的是，你会得到隐含的任何错误，因为你将通用数组限制为未知[]，这意味着它的项目可以是任何类型。 如果你做了这样的事情：

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

打字稿会知道 T 数组中的每一项都是一个数字。这是一个非常简单的示例，但只是为了让您可以指出您的错误。

这是我的解决方案.