１．APIから受け取るオブジェクトリテラル（JSON）は未知のもの
サーバサイドのAPIからJSONを受取、JS内ではそれをオブジェクトリテラルとして最初は扱います。
オブジェクトリテラルはただの値の集合であり、プロパティ値がなくundefinedになりエラーになることがあります。
これを防止するには、独自のドメイン・モデルクラスを作り、確実に**プロパティを「管理」**する必要があると思います。
あくまでも、「管理」なので期待通りの値が取得できるかは別ですが、少なくともundefinedになることを防ぐことはできます。
そして、なによりクラスで定義することで、プロパティが何であるのかの補完が効くのでコーディングの効率があがります。Typescriptならなおのことですが、JavascriptのままでもVScodeなら十分補完が効きます。
オブジェクトリテラルをクラスに変換する方法は以下。
▶ JavascriptのES6以降のクラスでイミュータブルプロパティを定義
２. ドメイン・モデルクラスを通してAPIのデータを読み込む
前述の通り、オブジェクトリテラルのままだとundefinedのチェックを都度しないといけず、いろいろなコンポーネントで使うとき、それらすべてでチェックすることになります。
これは無駄です。最低限、ドメイン・モデルクラスで１度チェックして、それを受け取るほうがコードがすっきりします。
またドメインクラスとして、ある程度決まった値の加工などをしておくと、その分コードのムダがへります。
そして、HelperやUtilのような汎用的なクラスに値の処理を分散させず、関心に沿ったドメインクラスに閉じ込めることで、呼び出ししやすくなります。
勿論、可読性もあがります。
３．ドメイン・モデルオブジェクトはリポジトリクラスで管理
- ドメイン・モデルクラスは、APIから取得したオブジェクトリテラルをプロパティの諸元としてインスタンス化されます。
- ドメイン・モデルオブジェクトをインスタンス化するのはリポジトリクラスにが行い、Windowオブジェクトへの格納もリポジトリクラスが行います。
- Storeやコンポーネントなど他のモジュールはドメイン・モデルオブジェクトを取得する際には、このリポジトリクラスから取得するようにします。
- APIへの問い合わせもリポジトリクラスで適宜行い、他のモジュールはAPIへの接続は全く行いません。
４．ドメイン・モデルオブジェクトは不変オブジェクトにする
- ドメイン・モデルオブジェクトのプロパティは、Object.definePropertiesを使い不変として定義します。
- 変更が必要な場合、それは別途変更用としてディープコピーしたオブジェクトとして管理するのがよいと思います。
５．サーバサイドと同じくドメイン・モデルクラスを使うことで可読性・保守性を上げる
フロントエンドはコンポーネントなど個々のパーツ作りの議論が盛んですが、サーバサイドと同様にドメインロジックへの設計の配慮も必要です。
JSONをオブジェクトリテラルのまま使うのではなく、ドメイン・モデルを定義し、より可読性・保守性の高いコーディングをすべきかと思います。