What is the right way to use generic components with JSX?

[s-panferov]

Hello,

I have a generic component, e.g. class Select<T> extends React.Component<SelectProps<T>, any>. Is there any "right" way to use it from JSX?

It is impossible to write something like <Select<string> /> in JSX. The best thing that I've found is to write

let StringSelect: React.Component<SelectProps<string>, any> = Select;

And use StringSelect instead of Select<string>. Is there anything better?

[RyanCavanaugh]

I can't think of a better way to do it, though I'll try to come up with something more clever.

Note that your code isn't quite right (this is why you saw the crash in the other issue) -- it should be

let StringSelect: new() => React.Component<SelectProps<string>, any> = Select;

Your Select class is a constructor function, not an instance of it. It's probably worthwhile to make a type alias:

type ReactCtor<P, S> = new() => ReactComponent<P, S>;

let StringSelect: ReactCtor<SelectProps<string>, any> = Select;

[s-panferov]

@RyanCavanaugh yes, I see, you are right. I just could not go further and see error messages because of the compiler crash.

I think that generic components is not a common case, so maybe this workaround is quite enough right now (maybe it must be documented somewhere). But I will be glad to see a better way to do this.

[s-panferov]

Full working workaround for generic components:

import * as React from 'react';

interface JsxClass<P, S> extends React.Component<P, S> {
    render(): React.ReactElement<P>
}

interface Render<P> {
    render(): React.ReactElement<P>
}

interface ReactCtor<P, S> {
    new(props: P): JsxClass<P, S>;
}

interface Props<T> {
    val: T
}

class C<T> extends React.Component<Props<T>, {}> implements Render<Props<T>>  {
    constructor(props: Props<T>, context?: any)  {
        super(props)

        // this.state = /* ... */
    }

    render(): React.ReactElement<any> {
        return null
    }
}

let C1: ReactCtor<Props<number>, any> = C;
let a = <C1 val={1} />;

[dead-claudia]

By the looks of it, this would require a single token of lookahead in the parser. Basically this:

• If the next token is an angle brace (< Foo <), parse the production as a JSX element with a generic constructor.
• Otherwise, parse it as a normal JSX element.

I don't have a lot of time to look into this, since college just started back up for me.

[smrq]

Instantiation of type aliases (#2559) would make things a bit easier:

class Select<T> extends React.Component<SelectProps<T>, any> { ... }

type StringSelect = Select<string>;

<StringSelect />

[RyanCavanaugh]

class Select<T> extends React.Component<SelectProps<T>, any> { ... }
type StringSelect = Select<string>;
<StringSelect />

Two things - first, generic type instantiations are allowed now. Second, this code is not correct -- Select<string> refers to an instance of the Select class, but JSX element names refer to constructor functions for those classes. The correct definition would be:

type StringSelect = new () => Select<string>;

[evilangelist]

Using the example above, when making use of StringSelect I always receive a "TS2304: Cannot find name 'StringSelect'" using Typescript 1.6.2. Example:

class Select<T> extends React.Component<SelectProps<T>, any> { ... }
type StringSelect = new () => Select<string>;
class Form extends React.Component<any,any> {
    render(): JSX.Element {
        return <StringSelect />;
    }
}

See gist of full example here: https://gist.github.com/be0453ed4a86c79da68e.git

Any ideas?

[RyanCavanaugh]

You need to write something like this. type doesn't create a value, so what you have would be a runtime error.

class Select<T> extends React.Component<SelectProps<T>, any> { ... }
type StringSelect = new () => Select<string>;
var StringSelect = <StringSelect>Select;
class Form extends React.Component<any,any> {
    render(): JSX.Element {
        return <StringSelect />;
    }
}

[basarat]

Updated @RyanCavanaugh's example to be be something you can copy paste 🌹

/** Generic component */
type SelectProps<T> = { items: T[] }
class Select<T> extends React.Component<SelectProps<T>, any> { }

/** Specialization */
type StringSelect = new () => Select<string>;
const StringSelect = Select as StringSelect;

/** Usage */
const Form = ()=> <StringSelect items={['a','b']} />;

[basarat]

Note: For whatever reason (not debugging it right now) type falls over if you use modules and import. interface still works:

/** Generic component */
type SelectProps<T> = { items: T[] }
class Select<T> extends React.Component<SelectProps<T>, any> { }

/** Specialization */
interface StringSelect { new (): Select<string> } ;
const StringSelect = Select as StringSelect;

/** Usage */
const Form = ()=> <StringSelect items={['a','b']} />;

[dead-claudia]

Is there any practical reason why my 1-token lookahead wouldn't be feasible? (JS already requires a whole potential expression of lookahead with async arrow functions, which are implemented already when targeting ES6.)