【Typescript/交差型/分割代入】分からなかったコードの解説

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

前回の記事で悩んだコードについて解説していきます。

const { tab } = event.composedPath().find((ele: any) =>
ele.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };

左辺の書き方でどうなるのかが分かりませんでした。

const { tab }

event.composedPath().find((ele: any) =>
ele.tagName === 'ION-TAB-BUTTON') as EventTarget

eventはテンプレート側からクリックイベントで取得したものです。
composedPathはイベントから取得したノードを順番に含む配列を取得しています。
そして、取得したいtagNameを配列から取得し、as EventTargetで型キャスト(型アサーション)を行っています。

& { tab: string };

先ほどのEventTargetで定義ができていないtabプロパティを定義します(交差型)

const { tab }

これは分割代入構文です。
右辺にある配列やオブジェクトから値を取り出して、左辺の変数に代入(変数宣言)します。

スプレッド構文と一緒に使うとさらに幸せになりそうです。
【JavaScript】スプレッド構文の便利な使い方まとめ - Qiita

スプレッド構文や分割代入構文を使って、オブジェクトの部分更新を行う記事を書きたいと思います。