React.FC 中的泛型类型<Props<T> &gt;

Question

I'm building a React App based on Hooks, also exploiting TypeScript.
I've wrote a component that renders a list, and among its props , it expects props.items , which type is a generic 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;
}

Notice that, in the interface, T also extends { isDisableInList?: boolean } , and that's because each item may have that property, used to disable the item in the list.

Now, for what concern the SelectableList component, I'd like to write this:

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

But TypeScript gives me one error, and one problem:

1. ERROR: Type T , in ISelectableListProps<T> is not found;
2. PROBLEM: Type of props is not inferred anymore: it has any . Instead, by removing the <T extends {}> , props type is inferred to be React.PropsWithChildren<ISelectableListProps<any>> ;

The only workaround I've found is to define a ItemType , like this:

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

And then write the component like this:

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

But doing so, when using the component, props.items is expected to be a ItemType[] , and not a Generic type. In fact, I would like to call the component like this:

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

But, as I said, the items is expected to be an ItemType :

By the way, no error is given, because ItemType has & { [key: string]: any } , but it seems to me "hacky", almost like using any .

Is there any way I can accomplish what I want?

Answer 1

There is no way to use React.FC to define a generic component. You can just use a simple function definition or an arrow function, but letting TS infer the type:

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