TypeScript type arguments in JSX nodes

Question

Is there any way to specify type arguments for components rendered in JSX?

For example, consider this component:

interface SelectorProps<T> {
    selection: T;
    options: T[];
}

class Selector<T> extends React.Component<SelectorProps<T>, {}> {
    // ...
}

If I try to render this component in JSX:

<Selector selection="a" options={["a", "b", "c"]} />

I get these errors:

TS2322: Type 'string' is not assignable to type 'T'.

TS2322: Type 'string[]' is not assignable to type 'T[]'. Type 'string' is not assignable to type 'T'.

I would expect T to be inferred as string or else some way to specify T=string in <Selector>. Is there a solution?

The only workaround I have found is to extend the component to eliminate all type arguments:

class StringSelector extends Selector<string> { }

Answer 1

Generic JSX elements as described in https://github.com/Microsoft/TypeScript/issues/6395 are now supported - since TypeScript 2.9.

You should now be able to use:

 <Selector<string> selection="a" options={["a", "b", "c"]} />

See also: http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

Answer 2

interface FooProps<T> { foo: T; }
class Foo<T> extends React.Component<FooProps<T>, any> {
  render() {
    return <div>{ JSON.stringify(this.props.foo) }</div>;
  }
}
type FooBar = new () => Foo<{bar: string}>;
const FooBar = Foo as FooBar;

class FooBarContainer extends React.Component<any, any> {
  render() {
    return <FooBar foo={{bar: 'works'}} />;
  }
}

FooBarContainer or <FooBar foo={{bar: 'works'}} /> should render: <div>{"bar":"works"}</div>