根據最近的屬性推斷類型

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 陣列中的每一項都是一個數字。這是一個非常簡單的範例，但只是為了讓您可以指出您的錯誤。

這是我的解決方案.