関数コンポーネント

これらは、props 引数を受け取り、JSX要素を返す通常の関数として記述できます。

// Declaring type of props - see "Typing Component Props" for more examples
type AppProps = {
  message: string;
}; /* use `interface` if exporting so that consumers can extend */

// Easiest way to declare a Function Component; return type is inferred.
const App = ({ message }: AppProps) => <div>{message}</div>;

// You can choose to annotate the return type so an error is raised if you accidentally return some other type
const App = ({ message }: AppProps): React.JSX.Element => <div>{message}</div>;

// You can also inline the type declaration; eliminates naming the prop types, but looks repetitive
const App = ({ message }: { message: string }) => <div>{message}</div>;

// Alternatively, you can use `React.FunctionComponent` (or `React.FC`), if you prefer.
// With latest React types and TypeScript 5.1. it's mostly a stylistic choice, otherwise discouraged.
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);
// or
const App: React.FC<AppProps> = ({ message }) => <div>{message}</div>;

ヒント: Paul ShenのVS Code拡張機能を使用して、型分割代入宣言（キーボードショートカットを含む）を自動化できます。

なぜ React.FC は必要ないのですか？ React.FunctionComponent/React.VoidFunctionComponent についてはどうですか？

多くのReact + TypeScriptコードベースでこれを見かけるかもしれません

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

しかし、今日の一般的なコンセンサスは、React.FunctionComponent（または省略形の React.FC）は必要ないということです。React 17以前、またはTypeScript 5.1以前を使用している場合は、推奨されません。もちろん、これは微妙な意見ですが、同意してコードベースからReact.FCを削除したい場合は、このjscodeshift codemodを使用できます。

「通常の関数」バージョンとのいくつかの違い

React.FunctionComponent は戻り値の型を明示的に指定しますが、通常の関数バージョンは暗黙的です（または追加の注釈が必要です）。
displayName、propTypes、defaultProps などの静的プロパティの型チェックとオートコンプリートを提供します。
- React.FunctionComponent で defaultProps を使用すると、いくつかの既知の問題があることに注意してください。詳細については、この問題を参照してください。 separate defaultProps セクションも用意していますので、そちらもご覧ください。
React 18の型アップデート以前は、React.FunctionComponent は children の暗黙的な定義を提供していました（下記参照）。これは激しい議論の的となり、React.FC が Create React App TypeScript テンプレートから削除された理由の1つです。

// before React 18 types
const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title,
}) => <div title={title}>{children}</div>;

（非推奨）代わりに React.VoidFunctionComponent または React.VFC を使用する

@types/react 16.9.48では、children を明示的に型指定するために、React.VoidFunctionComponent または React.VFC 型が追加されました。ただし、React.VFC と React.VoidFunctionComponent は React 18 で非推奨になった (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/59882) ため、この暫定的な解決策は React 18 以上では不要であり、推奨されません。

代わりに、通常の関数コンポーネントまたは React.FC を使用してください。

type Props = { foo: string };

// OK now, in future, error
const FunctionComponent: React.FunctionComponent<Props> = ({
  foo,
  children,
}: Props) => {
  return (
    <div>
      {foo} {children}
    </div>
  ); // OK
};

// Error now, in future, deprecated
const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({
  foo,
  children,
}) => {
  return (
    <div>
      {foo}
      {children}
    </div>
  );
};

将来的には、props を自動的に readonly としてマークする可能性がありますが、props オブジェクトがパラメータリストで分割代入される場合は、これは議論の余地がありません。

ほとんどの場合、どちらの構文を使用しても大きな違いはありませんが、React.FunctionComponent の方がより明示的であるため、好まれるかもしれません。