Déduire le type en fonction de l'attribut le plus proche

Question

J'espère que quelqu'un pourra m'aider ou préciser si ce que j'essaie de réaliser est possible. Je crée actuellement un composant et j'ai des problèmes avec l'inférence de type. Ci-dessous le 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;
      },
    },
  ]}
/>;

Ce que je veux réaliser, c'est faire render 中的参数推断出最接近的 items 的类型，但目前它的类型为 unknown. Est-ce qu'il y a un moyen de faire ça? Merci d'avance

Answer 1

Je ne peux pas commenter car je n'ai pas 50 de réputation, mais ce que je dis, c'est que vous obtiendrez des erreurs implicites car vous limitez le tableau générique à inconnu[], ce qui signifie que ses éléments peuvent être de n'importe quel type . Si vous avez fait quelque chose comme ça :

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

Typescript saura que chaque élément du tableau T est un nombre. Ceci est un exemple très simple, mais juste pour que vous puissiez signaler votre erreur.

C'est ma solution一个>.