ReactのFunction Componentの型は、歴史的な理由などにより様々な記述ができる。

• React.FunctionComponent
• React.FC
  • FunctionComponentのエイリアス
• React.VFC
  • 以前はReact.FCのchildrenを持たないバージョンだったが現在は同じ
  • 上の変更に伴い非推奨へ
• ….
• (props: SomeComponentProps): JSX.Element

React.FCはおすすめできない

同様の記述ができる。

interface SomeComponentProps {
  value?: string;
}

const SomeComponent: React.FC<SomeComponentProps> = props => {
  return <div>Some Component</div>;
};

const SomeComponent = (props: SomeComponentProps): JSX.Element => {
  return <div>Some Component</div>;
};

React.FCではpropsにジェネリクスを渡すのが難しい。

const SomeComponent: React.FC<SomeComponentProps> = props => {
  return <div>Some Component</div>;
};

Propsへの型付けでは、通常の関数と同様の手段が利用できる。

const checkValidity = <T extends string>(value: T): boolean => {
  return true;
};

const SomeComponent = <T extends Record<string, number>>(
  props: SomeComponentProps<T>
) => {
  return <div>Some Component</div>;
};

以前はReact.FCの場合、誤ってchildrenが混入してしまう問題もあった。

JSXファイルでジェネリクスを使う場合は注意

TSXファイルでジェネリクスを使う場合、ジェネリクスがJSXとして誤認識される場合がある。

export const SomeComponent = <T>(props: SomeComponentProps<T>) => {
    return <div>{`${props.value}`}</div>
}

ワークアラウンドとして次のような記述がある。

export const SomeComponent = <T,>(props: SomeComponentProps<T>) => {
  return <div>{`${props.value}`}</div>;
};