Describe use of generic components with JSX

[estaub]

Look vaguely familiar?
It should: microsoft/TypeScript#3960 (comment)

[basarat]

cheers 🌹

[psegalen]

Hi, thank you for this, it made my day!
However, I was stuck for another 20 minutes with a TSC error about the specialized component not being "cast-able" as the generic one because I declared a constructor in the generic component! Maybe it would be good to mention that generic components should'nt have a constructor?

[basarat]

However, I was stuck for another 20 minutes with a TSC error about the specialized component not being "cast-able" as the generic one because I declared a constructor in the generic component!

Can you paste an example that gives that error please 🌹

[psegalen]

Sure, here it is:

/** Generic component */
interface ListProps<T> { items: T[] }
class GenericList<T> extends Component<ListProps<T>, any> {
    constructor(props: ListProps<T>) { super(props) }
    render() { return (<div />); }
}
/** Specialization */
interface StringList { new (): GenericList<string> } ;
const StringList = GenericList as StringList;

TSC points out a [ts] Type 'typeof GenericList' cannot be converted to type 'StringList'. on the "as" operator in the last line but deleting the contructor makes the error disappear.

[estaub]

@psegalen With Typescript 2.3.2 and @types/react 15.0.23, I can't reproduce the error, and can't think what else might be different.

But I have a theory about what you're seeing. Would you try this replacement line?

interface StringList { new (props: ListProps<string>): GenericList<string> } ;
//                          ^^^^^^^^^^^^^^^^^^^^^^^^

[psegalen]

Oh, I should have seen it, thanks @estaub!