我希望有人能帮助我或澄清我想要实现的目标是否可能。我目前正在创建一个组件,但在类型推断方面遇到问题。下面是代码。
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。有什么办法可以做到这一点吗?提前致谢
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
我无法发表评论,因为我没有 50 的声誉,但我想说的是,你会得到隐含的任何错误,因为你将通用数组限制为未知[],这意味着它的项目可以是任何类型。 如果你做了这样的事情:
打字稿会知道 T 数组中的每一项都是一个数字。这是一个非常简单的示例,但只是为了让您可以指出您的错误。
这是我的解决方案一个>.