ModalContainer.vue で条件分岐をオブジェクトで書き直す

[cp-20]

該当箇所 → https://github.com/traPtitech/traQ_S-UI/blob/master/src/components/Modal/ModalContainer.vue#L70-L98

現時点の書き方の問題

• 条件分岐の書き方が冗長
• 型のexhaustive check (ちゃんとすべての条件分岐を網羅しているかのチェック) が成されていない
  • 新しい分岐を追加したときに型チェックでエラーを吐かずに、気づかずに修正されない恐れがある

新しい書き方

オブジェクトを使って分岐する

例えばcomponentType = 'a' | 'b' | 'c'という型のtypeに対してcomponentA、componentB、componentCをそれぞれ返したいときは、次のように書くことで型安全に書くことができる。

const componentMap: Record<componentType, ComponentPublicInstance> = {
  a: componentA,
  b: componentB,
  c: componentC,
};

return componentMap[type];

この例において、componentType = 'a' | 'b' | 'c' | 'd'となったときはプロパティdに対応するコンポーネントが存在しないため型チェックでエラーを吐いて無事修正を見落とすことがなくなる。