TypeScriptの分割代入について

Question

どのように質問すればいいのかわからずコードを記載させていただきました。
ソース1は理解できるのですが、ソース2の最後の行の書き方がどのような理屈なのかわかりません。
解説いただけないでしょうか？

ソース1

type User = {
  id: number
  name: string
}
const user:User = { id: 1, name:"hoge" }
const { id } = user // id = 1

ソース2

// ソース1の続き
type UserEx = {
  user: User
}
const userex: UserEx = { user: user }
const { user: {id} } = userex // id = 1

2020.10.15 追記）
TypeScriptの分割代入について
https://typescript-jp.gitbook.io/deep-dive/future-javascript/destructuring#obujekutono

Comments

[miyabi_pudding]

ん？これは、id変数を、constで二回同スコープで定義してるので、エラーになりませんか？？

[yoppy0066]

すみません、ソース1の最後の行はコメントアウトして検証していました。

[miyabi_pudding]

なるほど、了解です。
回答、少し遅くなると思います。
（その間に他の人が回答するかも）

[miyabi_pudding]

明記された記事が見つかって良かったですね！
私も参考にさせていただきます。

Answer 1

まず、
const userex: UserEx = { user: user }が何をしているかは理解しているとして回答いたします。

今回の構文のように、
分割代入にて、:を使った場合、
右辺のオブジェクト（今回の場合は、userexです）の中にある、:の左側と同名のプロパティを、
:の右側で示した変数名で、同スコープ上に宣言されます。

下記のようになります。

const {
  user: // userexのuserプロパティを
  obj // objという変数名で、同スコープ上に宣言
} = userex
// obj = { id: 1, name: "hoge" }

では、質問文のコードで何をやっているかというと、
上記から、さらに中に潜って、idというuserの中のプロパティと、同名の変数を、スコープ上に宣言する、となっているわけです。

const {
  user: // userexのuserプロパティを:の右項に取り出す
  {id} // 取り出されたuserの中から、さらに、idというプロパティを取り出し、同スコープ上に同名変数として宣言
} = userex
// id = 1

以上です。

Comments

[yoppy0066]

わかりやすい説明、ありがとうございました。

> 分割代入にて、:を使った場合
今回はこちらに辿りつかなかったのですが、どう調べるのが良かったと思われますか？

[miyabi_pudding]

型以外の部分は、JavaScriptでも可能なので、JavaScriptで検索しました。
JavaScript 分割代入
です。
その中で、Qiitaで分割代入に関して詳しく載っているものがあったので、そこから、自身の解釈（挙動から判断）も加えてます。
:を使う事に関して、直接的な記載があるものはなかなかヒットしないかと思います。
（公式を読み解くか、分割代入の紹介の構文から、ある程度自身の解釈が必要）

[yoppy0066]

なるほど、調べていただいたのですね。
ありがとうございました。

[miyabi_pudding]

私は、わかっていることでも、必ず調べて検証してから回答するようにしています。
きっと多くの回答者さんがそうですよー