ネストした分割代入パターン
深くネストした分割代入式に型を付けます。
「ネストした分割代入パターン」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
ネストしたデータの内部にアクセスする
ネストした分割代入を使うと、オブジェクトの中にあるオブジェクトから、1つの文で値を取り出せます。簡潔に書けますが、型との関係には理解しておくべき点があり、使いすぎると読みやすさを損なうこともあります。
ネストしたプロパティを分割代入する
左辺にオブジェクトの形を反映させます。data.user.name にアクセスするには、user の下にパターンをネストします。
const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada外側の名前はバインドされない
注意が必要な落とし穴があります。{ user: { name } } では、user はパスにすぎず、バインディングではありません。name は取得できますが、その後に user という変数は存在しません。
const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not definedネストした分割代入に型を付ける
パターンの後に、完全なネストした形を指定して型注釈を付けます。それぞれのレベルがオブジェクトの構造を反映します。
const { user: { name } }: { user: { name: string } } = {
user: { name: "Leo" },
}
console.log(name)名前付きの型は読みやすい
ネストした形をインラインで記述すると、すぐに扱いにくくなります。名前付きの interface を使えば、ネストした取り出しに対応しながら、型注釈をすっきり保てます。
interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })両方のレベルを取り出す
外側のオブジェクトも必要な場合は、まずそれを個別に取り出し、その後別の手順でメンバーを分割代入します。深くネストするより、このほうが明確になることがよくあります。
interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)ネストとデフォルト値を組み合わせる
デフォルト値はどのレベルにも指定できます。存在しない可能性があるネストしたフィールドには、バインドする場所で代替値を指定します。
interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
return color
}
console.log(style()) // black存在しないサブオブジェクトにデフォルト値を指定する
ネストしたオブジェクト全体が存在しない可能性がある場合は、そのフィールドを分割代入する前に {} をデフォルト値に指定します。そうしないと、undefined のプロパティにアクセスしたときにエラーが発生します。
interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhostオブジェクト内のネストした配列
オブジェクトパターンと配列パターンは組み合わせられます。ここでは、ネストした配列から最初のタグを1行で取り出しています。
const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts読みやすさとのトレードオフ
深くネストしたパターンを使うと行数は減りますが、意図が分かりにくくなることがあります。デフォルト値を含む3段階のネストは、確認しづらくなります。読者が立ち止まって考える必要があるなら、手順を分けてください。
// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0バランスのよい例
通常は、いくつかのフィールドを1段階ネストする程度が適しています。簡潔でありながら、暗号のようにはなりません。
interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))クイックチェック
ネストした分割代入についての理解度を確認しましょう。
まとめ
ネストした分割代入では、オブジェクトの形を反映して内部の値にアクセスします。外側のキーはバインディングではなくパスなので、変数になるのは最も内側の名前だけです。完全なネストした形または名前付きの型で型注釈を付け、サブオブジェクトがない場合は、そのフィールドを分割代入する前に {} をデフォルト値に指定します。必要に応じて配列パターンも組み合わせられます。ネストは浅く保ち、深いパターンは読みやすさのために手順を分けてください。
よくある質問
「ネストした分割代入パターン」レッスンは無料ですか？
はい。「ネストした分割代入パターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「ネストした分割代入パターン」で何を学びますか？
深くネストした分割代入式に型を付けます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ネストした分割代入パターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- オブジェクトの分割代入の型
- 配列とタプルの分割代入
- 分割代入におけるデフォルト値
- ネストした分割代入パターン