> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# TypeScript Nested Destructuring
Nested destructuring is a declarative syntax used to extract properties or elements from deeply nested objects and arrays into distinct, locally scoped variables during a single assignment operation. In TypeScript, this mechanism requires a strict structural separation between the runtime destructuring pattern and the static type annotation to resolve syntax ambiguity.
## Object Nesting and Type Annotations
A critical rule in TypeScript is that the colon (`:`) within a destructuring pattern dictates variable aliasing (renaming), not type declaration. Type annotations must be applied to the entire destructured entity, mirroring the shape of the nested structure.
```typescript theme={"dark"}
const payload = {
metadata: {
node: {
id: 'xyz-123',
active: true
}
}
};
// Destructuring pattern (left of =) and Type annotation (right of :)
const {
metadata: {
node: { id, active }
}
}: {
metadata: {
node: { id: string; active: boolean }
}
} = payload;
```
To alias a deeply nested property while maintaining strict typing, the alias is declared in the destructuring pattern, while the original property name is used in the type annotation:
```typescript theme={"dark"}
const {
metadata: {
node: { id: nodeId } // 'id' is aliased to 'nodeId'
}
}: {
metadata: {
node: { id: string } // Type annotation references the original key 'id'
}
} = payload;
```
## Array Nesting
Nested arrays are destructured by mirroring the bracket `[]` structure. Commas are used to traverse indices or elide unwanted elements at any depth.
```typescript theme={"dark"}
const matrix: [number, [string, boolean]] = [1, ['alpha', true]];
const [
primaryId,
[label, isValid]
] = matrix;
```
## Mixed Nesting (Arrays and Objects)
TypeScript supports destructuring complex intersections of arrays and objects. The type annotation must perfectly map the nested arrays and object literals.
```typescript theme={"dark"}
const response = {
results: [
{ coordinates: { x: 10, y: 20 } },
{ coordinates: { x: 30, y: 40 } }
]
};
// Extracting 'x' and 'y' from the first object in the 'results' array
const {
results: [
{ coordinates: { x, y } }
]
}: {
results: Array<{ coordinates: { x: number; y: number } }>
} = response;
```
## Default Values in Nested Trees
Default values can be assigned at any level of the nested destructuring pattern using the `=` operator. TypeScript infers the type of the destructured variable based on the union of the explicitly declared type and the default value.
```typescript theme={"dark"}
const config = {
server: {
// 'port' is missing
}
};
const {
server: {
port = 8080 // Default value assignment
}
}: {
server: {
port?: number // Type must reflect that the property is optional
}
} = config;
```
If an intermediate nested object might be undefined, a default empty object must be provided at that specific level to prevent runtime `TypeError` exceptions when attempting to destructure its children.
```typescript theme={"dark"}
const {
server: {
port = 8080
} = {} // Fallback for the 'server' object itself
}: {
server?: {
port?: number
}
} = {};
```
Tired of Poor TypeScript Skills? Fix That With Deep Grasping!
Learn More
