[解決済み] TypeScript React.FC<小道具>の混乱

質問

TypeScriptを勉強しているのですが、いくつかの部分で混乱しています。以下はその一例です。

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

const PrintName2 = (props: Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

上記の両方の機能コンポーネントについて、TypeScriptは同じJSコードを生成していることがわかります。その PrintName2 コンポーネントは、可読性という点ではより合理的だと思います。この2つの定義の違いは何なのか、また、2つ目のタイプのReactコンポーネントを使用している人はいるのでしょうか？

どのように解決するのですか？

皆さん、回答ありがとうございます。正解なのですが、もっと詳細なバージョンを探していました。もう少し調べてみたところ、以下のようなものがありました。 React+TypeScript チートシート をGitHubで公開しています。

機能部品
これらは、propsの引数を取り、JSX要素を返す通常の関数として記述することができます。

type AppProps = { message: string }; /* could also use interface */

const App = ({ message }: AppProps) => <div>{message}</div>;

についてはどうでしょうか。 React.FC / React.FunctionComponent ? でコンポーネントを記述することもできます。 React.FunctionComponent (または省略形の React.FC ):

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

通常機能版と一部異なります。

のような静的プロパティに対してタイプチェックとオートコンプリートを提供します。 displayName , propTypes および defaultProps - ただし、現在 defaultProps と React.FunctionComponent . これを見る 問題 までスクロールしてください。 defaultProps のセクションで推奨されるタイピングをご紹介しています。

しかし、暗黙的なchildrenの定義にはいくつかの問題があり (例: DefinitelyTyped#33006)、childrenを消費するコンポーネントについては、とにかく明示的にするのが良いスタイルと考えられるかもしれません。

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

将来的には、propsを自動的に読み取り専用にするかもしれませんが、propsオブジェクトがパラメータリストで破壊されていれば、それは無意味なことです。

React.FunctionComponent は戻り値の型について明示的ですが、通常の関数バージョンは暗黙的です（さもなければ、追加のアノテーションが必要です）。

ほとんどの場合、どちらの構文を使ってもほとんど違いはありません。 しかし React.FC の構文は若干冗長になりますが を優先させました。 の構文にしました。