search

traPtitech / traQ_S-UI

traQ S - traP Internal Messenger Application Frontend
MIT License
109 stars 40 forks source link

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

Closed cp-20 closed 4 months ago

cp-20 commented 11 months ago

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

現時点の書き方の問題

新しい書き方

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

例えば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に対応するコンポーネントが存在しないため型チェックでエラーを吐いて無事修正を見落とすことがなくなる。

ZOI-dayo commented 5 months ago

これをQSoCでやろうと思っています、よろしくお願いします