![見出し画像](https://assets.st-note.com/production/uploads/images/98960037/rectangle_large_type_2_3023fda2034511b9be4eaa92aa2d45cf.jpeg?width=1200)
TypeScript 入門の記録(44)プロを目指す人のためのTypeScript入門(28)分割代入
先週から「CircleCI から GitHub Actions に移行したいな~。」とGitHub Actionsについて調べていますが、『セルフホストランナーは、GitHub Actions を実行するサーバーらしい』ということがわかったレベルです。カタツムリのような進捗状況にめまいがしそうですが、やりたいことのために質問できるところまで来たからヨシ!です。さて、今回は「分割代入」について学習します。
分割代入
分割代入は ES2015で登場し、オブジェクトから値を取り出して変数に代入する操作を簡単に実現できるそうです。関数定義との組み合わせが強力らしいのですが、基本から学習します。
オブジェクトの分割代入の基本
分割代入の基本構文は「パターン=式」で、代入できる場所であればどこでも使えます。
![](https://assets.st-note.com/img/1677397008689-b6uPNC9YoZ.png?width=1200)
分割代入の基本形は、オブジェクトのプロパティ名と代入先の変数名が一致する場合に、変数にオブジェクトの同名のプロパティを代入するということを簡潔に表現できるというものです。これは、直感的だし、便利ですね。
この場合の注意点は、分割代入で宣言された変数には型注釈がつけられないということです。変数の型は、分割代入されるオブジェクトのプロパティの型を型推論で決定されるので、新たに分割代入先の変数の型注釈はつけられないということなんですね。また、存在しないプロパティを分割代入しようとするとコンパイルエラーになります。これは、むしろ、コンパイルエラーにしてくれるのありがたいですね。
![](https://assets.st-note.com/img/1677397998202-VTeByzLMhD.png?width=1200)
ネストした分割代入
プロパティを変数に取り出すのを簡潔に表現できるだけでも、すっきりわかりやすいのに、さらにネスト構造を持つオブジェクトも分割代入できるなんて!パターンもネストさせれば良いのですね。これも、わかりやすい~(でも、サクッと使いこなせるかどうかは自信ありません…)
![](https://assets.st-note.com/img/1677398763199-DkIfstCAPa.png?width=1200)
配列の分割代入
これも便利な機能ですね。配列の要素の順番と対応して変数に代入されるし、途中を飛ばしたいときは、要素のスキップができるのも便利です。
![](https://assets.st-note.com/img/1677399370762-8iiWxXO3HB.png?width=1200)
分割代入の既定値
分割代入では、デフォルト値を指定できます。オプショナルプロパティがある場合に、既定値を指定できるってことですね。これが無いと、オプショナルプロパティは分割代入できなくなりますね。重要。
![](https://assets.st-note.com/img/1677400488540-0G1QQEJN54.png?width=1200)
うーん、2番めの例 const {foo364: bar364 = 500} = obj364_1 の方は、foo364 にobj364_1.foo364が代入されて、それがbar364に代入されるというのが、ピンと来ていません。実行結果は、そうなっているのですが、理由の説明ができないので、遡って理解しなくては…
このオプショナルプロパティの既定値は、値がundefinedの場合のみ適用される事が重要で、このオプショナルプロパティの既定値を設定することで、undefinedを許容しない変数であることが明示できるところが良いですね。このオプショナルプロパティの既定値は、ネストしていてもOKというのもありがたいです。
restパターンでオブジェクトの残りを取得する
restパターンは、「…変数名」という形式の構文で、分割代入のオブジェクトパターンの一番最後でのみ使用できます。restパターンで分割代入される変数には、代入するオブジェクトの残りのプロパティのすべてを持つオブジェクトが代入されます。
![](https://assets.st-note.com/img/1677402087193-QFMc5AGVmN.png?width=1200)
restパターンは、テキストをさらっと読んだときにはピンとこなかったのですが、2回読んで「ああ、そういうことか~」と理解できました。オブジェクトを変数と、オブジェクトに分けたいときに便利そうだなと思いました。
まとめ
分割代入便利すぎる~!と思いましたが、一部理解が足りていない(基本的なオブジェクトの記法が身についていないせい)ので、ここまでのテキストを読み返したいと思います。
今日はここまでにします。続きは、次の週末の予定です。