reactjs - React.FC> 中的 GenericType

Question

我正在构建一个基于 Hooks 的 React 应用程序，也利用了 TypeScript。
我写了一个呈现列表的组件，其中包括 props , 预计 props.items , 哪个类型是泛型 T :

export interface ISelectableListProps<T extends { isDisableInList?: boolean }> {
    /** Specifies the item of the list. */
    items: T[];
    /** Unique REACT key used to re-initialize the component. */
    key?: React.ReactText;
    /** Specifies the template of each item. */
    itemTemplate: (item: T) => JSX.Element;
}

注意，在界面中， T也延伸 { isDisableInList?: boolean } ，这是因为每个项目都可能具有该属性，用于禁用列表中的项目。

现在，对于 SelectableList 组件的问题，我想这样写:

const SelectableListComponent: React.FC<ISelectableListProps<T>> = <T extends {}>(props) => { ... }

但是 TypeScript 给了我一个错误和一个问题:

错误:类型 T , 在 ISelectableListProps<T>没有找到；

问题: props的类型不再推断:它有 any .相反，通过删除 <T extends {}> , props类型推断为 React.PropsWithChildren<ISelectableListProps<any>> ;

我发现的唯一解决方法是定义一个 ItemType ， 像这样:

type ItemType = { isDisableInList?: boolean } & { [key: string]: any };

然后像这样编写组件:

const SelectableListComponent: React.FC<ISelectableListProps<ItemType>> = props => { ... }

但是这样做，在使用组件时， props.items预计是 ItemType[] ，而不是通用类型。事实上，我想像这样调用组件:

<SelectableList<MyType> items={...} itemTemplate={...} />

但是，正如我所说，这些项目预计是 ItemType :


顺便说一句，没有报错，因为 ItemType有 & { [key: string]: any } ，但在我看来“hacky”，几乎就像使用 any .

有什么办法可以实现我想要的吗？

Answer 1

没有办法使用React.FC定义一个通用组件。您可以只使用简单的函数定义或箭头函数，但让 TS 推断类型:

export interface ISelectableListProps<T extends { isDisableInList?: boolean }> {
    /** Specifies the item of the list. */
    items: T[];
    /** Unique REACT key used to re-initialize the component. */
    key?: React.ReactText;
    /** Specifies the template of each item. */
    itemTemplate: (item: T) => JSX.Element;
}

const SelectableListComponent = <T extends {}>(props: ISelectableListProps<T>) => <></>

Playground Link