ホームページ >ウェブフロントエンド >jsチュートリアル >プロジェクトのカップリングを改善する
皆さんこんにちは!この投稿は、プロジェクトのデータ型の接続方法を改善し、データ型の信頼性を高め、理解しやすくすることを目的としています。
TLDR 急いでいる人のために: 同じものを参照する型と定数の繰り返しを避け、それらに (単純な文字列や数値であっても) 思わせぶりな名前を付けるようにしてください。これにより、後でコードを簡単に特定、変更、削除できるようになります。
電子商取引 Web サイトを開発していて、製品のタイプを次のように定義していると想像してください。
export type ProductType = { id: string; name: string; price: number; };
この種のプロジェクトでは、単純な関数から製品 ID を参照する複数の方法を簡単に見つけることができます。
プロダクトのデータを状態ストアに保存したり、JS Frameworks の他のコンポーネントに props を渡したりするなど、より高度な状況に
次に、次のアプローチで問題に対処しましょう:
問題 1 に対処するには、テンプレート リテラル タイプ を使用します。これにより、新しい製品 ID のタイプが ${string}-${string}-${string}-${string} になります。複数のファイルにわたってこれを繰り返すのは煩わしいので、次のいずれかを行うことができます:
type ProductIdType = `${string}-${string}-${string}-${string}`
必要に応じて、文字列ごとに異なる型を作成して参照したり、以前に作成した他の型を参照したりすることもできます。最後に、新しい型をそのまま使用します。
(productId : ProductIdType) => {...}
(productId : ProductType['id']) => {...}
これらのアプローチはどちらも問題 2 を解決します。ProductIdType または ProductType['id'] がどこで見つかっても、製品の ID を扱っていることがわかり、それを置き換える必要があることがわかります。
最初の解決策の方が親しみやすいように思えるかもしれませんが、製品用に 1 つのタイプがあり、ID 用にもう 1 つのタイプがあり、独立して使用できる 2 つの部分に分かれた構造になります。上記の構造の表現例を次に示します:
これは間違いなく小さな問題ですが、ProductType の ID エントリを変更/削除した場合、その変更はプロジェクト全体に反映されません。
しかし、最後のアプローチは、データの結合を高めるため、私が通常従う方法です(これ以上良い言葉がありませんが)。製品データへのすべての参照は、ProductType:
を直接指すようになりました。すべてのデータに対して常に型を作成する必要があると言っているわけではありません。同じデータ型への参照を繰り返していることに気付いたときは、通常、2 番目のアプローチのように、元のデータ型にアクセスすることを選択します。
ボーナス ヒント 1: 同じロジックを定数にも適用できます。同じマジック ナンバーや文字列を複数の場所で繰り返している場合は、適切な指定を付けて使用するのが最善です。
ボーナス ヒント 2: タイプの複数のエントリを繰り返す代わりに、選択/除外する場合は、選択、省略、除外およびその他のユーティリティ タイプを使用します。
それだけです!私の投稿を気に入っていただければ幸いです。このトピックに関するフィードバックをお気軽に残してください。
以上がプロジェクトのカップリングを改善するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。