Typescript 围绕使用 generics 使用扩展 {} 的错误

Question

type List<T> = {
  items: T[];
  clickHandler: (a: T) => void;
};

const List = <T extends {}>({
  items,
  clickHandler,
}: List<T>) => {
  return (
    <div>
      {items.map((item, index) => (
        <div key={index} onClick={() => clickHandler(item)}>
          {item} // error is showing here
        </div>
      ))}
    </div>
  );
};

export default List;

typescript Error Type 'T' is not assignable to type 'ReactNode'. Type '{}' is not assignable to type 'ReactNode'. Type 'T' is not assignable to type 'ReactPortal'. Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, propsts(2322)

Answer 1

It seems you want to render the items of type T. You have to ensure react that T is "renderable type".

One way to do this is:

const List = <T extends ReactNode>

More info here

Answer 2

Since you're rendering items as children of div you can also define it as

const List = <T extends JSX.IntrinsicElements['div']['children']>(

which internally is defined as React.ReactNode would result in the same as @Svetoslav Retkov's answer

TS Playground