React.FunctionComponentの型定義におけるpropTypes, contextTypes, defaultProps, displayNameの使い方がわかりません。

###知りたいこと
React.FunctionComponentの型定義は以下のような実装になっています。

ts
1    interface FunctionComponent<P = {}> {
2        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
3        propTypes?: WeakValidationMap<P>;
4        contextTypes?: ValidationMap<any>;
5        defaultProps?: Partial<P>;
6        displayName?: string;
7    }

この定義のうち、propTypes, contextTypes, defaultProps, displayNameが**どのように使用されるのか(なんのために存在しているのか)**を知りたいです。

前提として、私はReactアプリを開発する際TypeScript＋FunctionComponentの組み合わせを使用しており、JavaScript、ClassComponentを使用することはありません。
また、コンポーネントを定義する際には以下のようにReact.FC(React.VFC)を使用して定義します。

ts
1const Hoge: React.FC<{param1: string}> = ({param1}) => {
2  return <></>;
3};

自分で調べたところ

propTypes
propsの方を定義するために使用。TypeScriptで使用することは無い？　
contextTypes
よくわからず、useContextを使用するならば使うことは無い？
defaultProps
propsのデフォルト値を設定
propsのデフォルト値は以下のように設定していたが、この項目を使用して別のやり方で設定することもできる？

ts
1const Hoge: React.FC<{param1: string}> = ({param1 = 'hoge'}) => {
2  return <></>;
3};

displayName
よくわからず、デバッグに使用する項目？

宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

propTypes

propsの方を定義するために使用。TypeScriptで使用することは無い？　

基本的にはそのとおりです。TypeScriptで型チェックを行う状況では、さらにpropTypeを入れるのは（実行時でないとチェックできない条件を入れる場合を除いて）手間になるだけです。

contextTypes

これは、どうやら昔のコンテキストの名頃のようです。useContextを書くなら出番はありません。

defaultProps

propsのデフォルト値を設定

そのとおりですが、defaultPropsはTypeScriptの型付けと相性が悪いです（Propの型として「省略可能」と書かねばならず、内部処理でundefinedの可能性を逐一指摘されてしまいます）。
関数のデフォルト引数で書くか、あるいはundefinedが来ることを前提にコンポーネント内を実装するかで対応したほうがいいでしょう。