How to type a forward ref in react-CodePudding

I have a pretty complicated component, and I would like to type the a value of it.

I Basically would like to do this

interface Selector<V,T> {
    onChange(value:V): T
}

export const Selector = forwardRef<V, T>(
    (
      {
        onChange
      }: Selector<V, T>,
      ref: Select<V>
    ) => {
    // blabla
    }
)

Now, I tried to follow this complete answer : https://stackoverflow.com/a/58473012/3241192

But I couldn't manage to do any of the solution.

For exemple, if I just try this :

const Comp3 = <T>(props: Props<T> & {myRef: Ref<HTMLDivElement>}) 
  => <div ref={myRef}> {props.options.map(o => <p>{o.label}</p>)} </div>
const Usage3 = () => <Comp3 options={options} myRef={myRef} />

I get on the T

JSX element 'T' has no corresponding closing tag.

I also tried

    onChange(value:V): T
}

export const Selector = <V, T>(
    (
      {
        onChange,
        myRef
      }: Selector<V, T> & {myRef: Ref<HTMLDivElement>}
    ) => {
    // blabla
    }
)

but I get

Cannot find name 'T'.

CodePudding user response：

The JSX and Typescript have conflicting ideas on what <T> means. To help the parse distinguish the two replace <T> with <T,> to ensure it's treated as a type and not a JSX element.