Using Generics in an interface, get error TS2322: Type 'string' is not assignable to type 'T'.

[yak77]

I get the above error using react and mobx in the code below. It may be related to #10589, but could also be a separate cause. The code below compiles successfully with version 1.8.10.

TypeScript Version: 2.0.2 & 2.1.0-dev.20160907

Code

// A *self-contained* demonstration of the problem follows...

//input.tsx
interface Props<T> extends React.HTMLProps<Input<T>>
{
    val: IObservableValue<T>;
    onChange?: React.FormEventHandler;
}

interface State
{
}

@observer
export class Input<T> extends React.Component<Props<T>, State> {

    private onChange(e: any): void
    {
        // ....
    }

    render(): JSX.Element {
        // ....
    }
}

// testComponent.tsx
import * as React from "react";
import {observable} from "mobx";
import {observer} from "mobx-react";

import {Input} from "./input";

interface IProps {
}

interface IState {
}

@observer
export class TestComponent extends React.Component<IProps, IState> {
    private _data = observable("");

    constructor(props: IProps, context: any) {
        super(props, context);
    }

    render(): JSX.Element {
        return (
            <div>
                Enter Data: <Input val={this._data} type="text"/><br/>       // <-- Receive TS2322 error on this line when trying to set val={this._data}
            </div>
        );
    }
}


**Expected behavior:**
To Compile

**Actual behavior:** 
Compile Error TS2322

[mhegazy]

where is the definition of IObservableValue coming from?

[yak77]

It's from MobX type definition:

interface IObservableValue<T> {
    get(): T;
    set(value: T): void;
    intercept(handler: IInterceptor<IValueWillChange<T>>): Lambda;
    observe(listener: (newValue: T, oldValue: T) => void, fireImmediately?: boolean): Lambda;
}

[mhegazy]

i can not get this to repro. can you provide a self contained sample i could try?

[yak77]

I created a sample project that repros the issue. MobX not required, only using react. For some reason it wouldn't let me attach the zip to this issue, so I uploaded it here:
https://dl.dropboxusercontent.com/u/29165199/Test.zip

After extracting the files simply run "npm install" to set up.

Then to build with TypeScript 1.8.10 run: "npm run build-1.8"
Then to build with TypeScript rc (currently 2.0.2) run: "npm run build-rc"

The 1.8.10 build compiles fine, the rc (2.0.2 ) build fails with TS2322.

[yak77]

Just wondering if you had a chance to try and pull down the sample project zip file and if you were able to reproduce the issue?

Let me know if you have any other questions. Thanks.

[RyanCavanaugh]

@yak77 sorry for the delay, looking now

[RyanCavanaugh]

This is just a duplicate of #6395 -- it's currently not possible to use a generic class as a JSX element class. A workaround is

  render(): JSX.Element
  {
    // Might want to have a generic type alias for this
    const StringInput: new() => Input<string> = Input;
    return (
        <div>
          <StringInput val={this._data}/>
        </div>
    );
  }

[yak77]

@RyanCavanaugh Thanks for looking into this and posting the workaround.

Is this a regression in the 2.0 compiler? Because the code I posted compiles with 1.8.10.