Derived general type by reaction component

Question

Typescript is pretty good at deducing typical types. For example, if I write the following code:

class AwesomeClass<T> {
    constructor(public val: T) {
        // ...
    }

    public getVal(): T {
        return this.val;
    }
}

const inst = new AwesomeClass("Hello World");
const result = inst.getVal();

resultautomatically dialed to string. Sharpness! I would like to take this step further with React.

If I do the next component

interface IProps<T> {
    value: T;
    onClick: (result: T) => void;
}
interface IState { }

class AwesomeComponent<T> extends React.Component<IProps<T>, IState> {
    // ...
}

I would really like it to be established that it valuemust be of the same type as the argument result onClick. Instead, when I initialize the component with

<AwesomeComponent
    value="Hello World"
    onClick={(v) => { console.log(v); }} />;

I get a compilation error error TS2322: Type 'string' is not assignable to type 'T'.

Is it possible to deduce the general type on the props of a React element?

, JSX React.createElement ( , , AwesomeClass), - ? , JSX?

Answer 1

, : lookahead JSX?.

:

interface IProps<T> {
    value: T;
    onClick: (result: T) => void;
}
interface IState { }

class AwesomeComponent<T> extends React.Component<IProps<T>, IState> {
    // ...
}

class ConcreteAwesomeComponent extends AwesomeComponent<string> {}

<ConcreteAwesomeComponent
    value="Hello World"
    onClick={(v) => { console.log(v); }} />;