ジェネリックを受け入れるステートレス機能コンポーネントを作成するには？

Question

Typescriptジェネリックスを使用してインターフェイスを拡張できます。

interface Sample1<P> { 
    prop1: P; 
} 

interface Sample2<P> extends Sample1<P> { 
    prop2: string; 
} 

しかし、ジェネリックインターフェイスを使用する機能コンポーネントを作成しようとすると、typescriptがエラーをスローします。

const SampleSFC: React.SFC<Sample2<P>> =() => <div />; 

エラーTS2304：名 'P' を見つけることができません。

のような既知のタイプにPを置き換えると、エラーが消えます。代わりに、完全にジェネリック医薬品の目的を殺すPのハードコーディングタイプの

const SampleSFC: React.SFC<Sample2<string>> =() => <div />; 

、私はPの種類を設定するSampleSFCのユーザーを有効にしたいです。

どうすればいいですか？それが不可能な場合は、私がそれに従わなければならない代替設計は、私が一般的な小道具でSFCを持つことができるでしょう。

Answer 1

ジェネリックはジェネリックタイプ内でのみ動作します。したがって、タイプinterface Sample1<P>を宣言するときは、その宣言内の型としてPを使用できます。ただし、具体的なタイプSample1<P>は実際には存在しません。代わりにPは、タイプがSample1タイプが使用されているときのタイプのプレースホルダーです。

従って、でもに汎用タイプの引数Pがある汎用タイプの定義外のSample1<P>を使用すると、実際には機能しません。実際の非ジェネリックタイプはPしか使用できません。

stringは、Sample1<P>定義の型引数Pの有効な値であるため、Sample1<string>が機能します。

したいので、あらゆるタイプPのために働くSampleSFCを持っている場合は、それを作成することができますようReact.SFC<Sample1<any>>：わからない

const SampleSFC: React.SFC<Sample1<any>> =() => <div />;