我希望有人能帮助我或澄清,如果我试图实现的是可能的。我目前正在创建一个组件,但有关于类型推理的麻烦。下面的代码。
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
。有什么方法可以做到这一点吗?提前感谢
1条答案
按热度按时间ryevplcw1#
我不能发表评论,因为我没有50的声誉,但我想说的是,你得到了隐式的any错误,因为你将泛型数组约束为unknown[],这意味着它的项目可以是任何类型。如果你这样做:
typescript会知道T数组中的每一项都是一个数字。这是一个非常简化的例子,但只是为了让你能指出你的错误。
这是我的solution。