ModalContainer.vue で条件分岐をオブジェクトで書き直す
cp-20 opened this issue · comments
該当箇所 → 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
に対応するコンポーネントが存在しないため型チェックでエラーを吐いて無事修正を見落とすことがなくなる。
これをQSoCでやろうと思っています、よろしくお願いします