TypeScript type arguments in JSX nodes
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
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>
Try this. Your interface should declare explicitly the types of values it expects. That is the whole point of using typescript. You shouldnt infer anything if you really know what to expect.
interface SelectorProps { selection: string | number; // This means selection can take in either a string or a number options: string[] | number[];}class Selector extends React.Component<SelectorProps, {}> { // ...}