Javascript/Typescriptで、条件付きのオブジェクトプロパティを表現する方法
あるオブジェクトのプロパティ/キーが、ある条件では存在せず、別の条件では存在する、といった場合に、これまで自分が取っていた方法は、javascriptだと
code:javascript
const obj = { a: "hoge" }
if(isSelected) {
obj.b = "fuga"
}
で、これだとtypescriptでは怒られるので、
code:typescript
const obj = { a: "hoge" }
if(isSelected) {
Object.assign(obj, { b: "fuga" })
}
みたいにしていた。
これを、以下のように書けるということが判明。
code:typescript
const obj = {
a: "hoge",
...(isSelected && { b: "fuga" })
}
Reactのjsx/tsxの中で、オブジェクトのプロパティの有無が条件によって変わるような場合に、コンパクトかつ単文として書けるので良さげ。vueでもtemplate内のjs/tsでは単一の式しか使えない(=if文など使えない)ので、役に立つことがありそう。
typescriptでも動きそうだが、条件の中身によっては怒られるかも(静的解析で常にfalseになるような場合などはダメっぽい)