反応成分の推定一般型

Question

Typescriptは推論されたジェネリック型についてはかなり良いです。私は、次のコードを記述している場合たとえば、：

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

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

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

result自動的stringに型付けされます。ニフティ！私はそれをReactを使ってさらに進めたいと思います。私は次のコンポーネント

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

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

を作る場合は、valueがonClickのresult引数と同じ型を持たなければならないことが推測されるように

私は本当に思います。私は

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

でコンポーネントを初期化するとき代わりに、私はコンパイルエラーerror TS2322: Type 'string' is not assignable to type 'T'を取得します。

React要素の小道具で汎用型を推論することは可能ですか？取引キラーということです -

私はJSXはReact.createElementへの呼び出しにtranspiles（私は上記の私のAwesomeClass例でやるように、それは直接クラスを初期化しません）、これは、プロセスを複雑にする可能性があるということを認識しますか？その場合は、JSX構文を使用してジェネリック型の名前を明示的に指定できますか？

Answer 1

これはまだできません。問題点はUsing lookahead to detect generic JSX elements?です。今あなたがする必要があります何のため

は次のとおりです。

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); }} />;