【React】FunctionComponentのpropsの型をジェネリクスで定義したいです

Question

###知りたいこと
タイトル通りなのですが、propsの型をジェネリクスで定義したいです。
やりたいこととしては以下のようなイメージです。

interface Foo {
  foo: string;
}

// エラー
const FCNG: React.FC<<T extends Foo>> = (props) => {
  return <></>;
};

propsの型について、あるinterfaceをextendsしてることを条件としたいです。

以下のコードだとエラー無しで定義できることは確認してます。

interface Foo {
  foo: string;
}

const FCOK = <T extends Foo>(props: T): React.ReactElement => {
  return <></>
}

しかし、現在のプロジェクトでは基本ルールとしてコンポーネントはReact.FCを使用して定義することが決まっているため、ルールに沿った形で定義するやり方があれば是非教えていただきたいです。
もしそのような方法は無く前者のやり方しかないようであれば、なぜそうなるのかを教えていただければと思います。
（TypeScriptのドキュメントを読んでみたのですが、ジェネリクスを使用できるのはfunction, interface, classを定義する場合だけだから、でしょうか…？）

宜しくお願いします。

Comments

[maisumakun]

そもそも論ですが、どのような事情でそのようなジェネリック化が必要となったのでしょうか？

[tanana_m]

stripeのElementをMaterial-uiのTexiFieldで実装する必要があり、こちらのサンプルソースをみたところこのような実装になっておりました。
https://github.com/mui-org/material-ui/issues/16037#issuecomment-698339520

[maisumakun]

interface Foo自体がジェネリックでなかったので、「foo以外のどんなpropが来ても受け取れる」コンポーネントを書きたいのかと誤解していました。

[tanana_m]

誤解させてしまい申し訳ないです。
Fooをextendsしてるpropのみ受け取れるようにしたいと思っております。

[maisumakun]

> Fooをextendsしてるpropのみ受け取れるようにしたいと思っております。

いえ、現状のコードでそう読めてしまう（{foo: string, bar: number}のような型もT extends Fooとなる）という話です。

[tanana_m]

ご指摘ありがとうございます。
わかりづらくて申し訳ないです。

実際の実装は以下のようになり、(importは省略)

type StripeElement =
| typeof AuBankAccountElement
| typeof CardCvcElement
| typeof CardExpiryElement
| typeof CardNumberElement
| typeof FpxBankElement
| typeof IbanElement
| typeof IdealBankElement

interface StripeTextFieldProps<T extends StripeElement>
extends Omit<TextFieldProps, 'onChange' | 'inputComponent' | 'inputProps'> {
onChange?: React.ComponentProps<T>['onChange']
inputProps?: React.ComponentProps<T>
stripeElement: T
}

export const StripeTextField = <T extends StripeElement>(
props: StripeTextFieldProps<T>
) => {
const {
InputLabelProps,
stripeElement,
InputProps = {},
inputProps,
...other
} = props

return (
<TextField
fullWidth
InputLabelProps={{
...InputLabelProps,
shrink: true,
}}
InputProps={{
...InputProps,
inputProps: {
...inputProps,
...InputProps.inputProps,
component: stripeElement,
},
inputComponent: StripeInput,
}}
{...(other as any)}
/>
)
}

type StripeElementをextendsしているのであればpropとして受けてOKとなります。

Answer 1

TypeScriptのドキュメントを読んでみたのですが、ジェネリクスを使用できるのはfunction, interface, classを定義する場合だけだから、でしょうか…？

そうですね。const foo: Generics<T>のような、型パラメータの残った型の変数は宣言できませんので、ジェネリクスが有効なままで関数を変数に代入したい場合、「型を宣言しないで関数リテラル側にジェネリクスを書く」もしくは「interfaceの関数シグネチャにジェネリクスを入れて、それを変数の型に指定する」といった手段しかありません。

Comments

[tanana_m]

ご教示いただき、ありがとうございます。