"polymorphic" Reactコンポーネントはどのようにタイプできますか？

Question

私はnumberまたはnumber[]のいずれかの値を "ラップ"することができますが、同時に両方を指定することはできないReactコンポーネントを入力しようとしています。

export interface Props<T> { 
    value: T; 
} 

class SomeComponent<T extends number | number[]> extends React.Component<Props<T>, any> { 
    getValue(): T; 
} 

私の問題は、宣言が正しいと私はそれを使用することができますどのように2である場合、私は1を知らないです。これは私がこれまで持って宣言（の不自然バージョン）です。私は今、このような何かをしたい/しようとしているが、それは構文エラーです：

const foo: number = 123; 
return <SomeComponent<number> value={foo} /> 

どのように宣言すると、このように動作しますコンポーネントを使用することができますか？

Answer 1

問題は、tsxタグでジェネリックを使用できないことです。

let SomeNumberComponent: new()=> SomeComponent<number> = SomeComponent as any; 

OR

class SomeIntComponent extends SomeComponent<number> { 

} 

注この制限：

var cNumber = new SomeComponent<number>({ 
    value : 0 
}); 
var cNumberArray = new SomeComponent<number[]>({ 
    value: [1, 2, 3] 
}); 

別のオプションは、型パラメータを修正し、余分なタイプを宣言することです：あなたは、通常のTSの構文を使用してコンポーネントをインスタンス化することができますまた強調表示されますhere