React props をオプションにし、他の props に基づいて TypeScript で必須にする

Question

ユーザーが使用するプロップによって提供されるタイプに基づいて、通常のボタン、アイコン ボタン、またはアイコンのみのボタンを返す React ボタン コンテナ コンポーネントがあります。以下は、ButtonContainer コンポーネントと Props の関連する型定義です:

リーリー

ButtonContainer コンポーネントの使用方法は次のとおりです:

リーリー

上記のコードでは、アイコン プロップはアイコンと通常のボタンを持つアイコン ボタンにのみ使用されるため、オプションです。 ButtonContainer から渡されたタイプがテキストの場合にのみアイコン プロパティをオプションにして、ButtonContainer に渡されたタイプが icon または iconOnly の場合は必須プロパティにする必要があります。

Answer 1

私は ユニオンの種類を区別する を使用することを選択します。

type 属性は識別子として機能し、ButtonWrapperProps を共用体メンバーに絞り込むことができます。

また、各共用体メンバーのプロパティを必須にすることができることにも注意してください。これにより、それらを使用するときに優れたエクスペリエンスが得られます。TS は、型が設定された後にどの追加プロパティが必要であるかをプロンプトするのに十分賢いです。

リーリー