TypeScript と PropTypes の違いは何ですか

React をしばらく使用している場合は、PropTypes という用語について聞いたことがあるでしょう.

PropTypes は、コンポーネントに渡す props が期待するタイプ (文字列、数値、オブジェクトなど) であるかどうかを確認するのに役立ちます.

export function DisplayTitle({ title = 'Hello' }) {

 return (
  <div>
   <H2>{title}</H2>
  </div>
 );
}

DisplayTitle.propTypes = {
 title: PropTypes.string.isRequired
};

Interface または Type を使用して、TypeScript で同じアクションを実行できます.

export type DisplayTitleProps = {
 title: string
};

export function DisplayTitle({ title = 'Hello' }: DisplayTitleProps) {

 return (
  <div>
   <H2>{title}</H2>
  </div>
 );
}

PropTypes は、貧弱な JavaScript 開発者に役立つように考案されたと考える人もいるかもしれません. 「せめて小道具をタイプしてもらいましょう!」.

しかし、PropTypes と TypeScript を使用して props を入力することには大きな違いがあります.

TypeScript は、コンパイル プロセスでエラーをチェックします. JavaScript ファイルの生成中に、TS はエラーをチェックします. TS はコンパイル プロセスをキャンセルし、エラーが見つかった場合はエラーを発生させます.

ただし、PropTypes は実行時にエラーをチェックします.ブラウザでアプリを実行すると、prop タイプがチェックされます.何か問題がある場合は、コンソールにエラーが表示されます.

Warning: Failed prop type: Invalid prop `id` of type `string` supplied to `sum,` expected `number.`

props に TypsScript よりも PropTypes を使用するのはいつですか?

TypeScript よりも PropTypes を優先する典型的な使用例は、サーバーからデータを受信することです. TypeScript には、サーバーから受け取るデータが期待どおりの型であるかどうかを確認する方法がありません (サイトを静的にビルドするときにビルド時にデータを取得する場合を除きます).

このような場合、PropTypes を使用して、サーバーから取得したデータが正しい型であることを確認する必要があります.

ただし、別の解決策があります. "Type component" を使用して Bit を作成できます.タイプがコンポーネントになったので、バックエンドとフロントエンドの両方にインストールできます.そうすることで、(実行時に型チェックする必要なく) の型が間違っている可能性を防ぎます.

この方法のもう 1 つの大きな利点は、信頼できる情報源が 1 つしかないことです.プロパティを追加するたびに、Type コンポーネントを更新します.コンポーネントを更新したら、バックエンドとフロントエンドに新しいバージョンをインストールできます.これで準備完了です!

このような他の投稿については

私は Bit のフロントエンドおよびコンテンツ開発者として働いています - コンポーネント駆動型開発のためのツールチェーン (モノリシック アプリを忘れて、コンポーネント駆動型ソフトウェアに配布します).