Typ basierend auf dem nächstgelegenen Attribut ableiten

Question

Ich hoffe, jemand kann mir helfen oder klären, ob das, was ich erreichen möchte, möglich ist. Ich erstelle gerade eine Komponente und habe Probleme mit der Typinferenz. Unten ist der Code.

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;
      },
    },
  ]}
/>;

Was ich erreichen möchte, ist render 中的参数推断出最接近的 items 的类型，但目前它的类型为 unknown zu machen. Gibt es eine Möglichkeit, dies zu tun? Vielen Dank im Voraus

Answer 1

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

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

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

这是我的解决方案.