> ## 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 Array Destructuring
Array destructuring is a binding or assignment pattern that unpacks values from arrays or iterable objects into distinct, statically typed variables based on their positional indices. In TypeScript, the compiler automatically infers the types of the destructured variables from the source array or tuple type.
## Basic Syntax and Type Inference
When destructuring a standard array, TypeScript infers the type of the extracted variables based on the array's element type.
```typescript theme={"dark"}
const dimensions: number[] = [1920, 1080, 300];
const [width, height] = dimensions;
// 'width' and 'height' are inferred as 'number'
```
## Tuple Destructuring
TypeScript applies strict positional typing when destructuring tuples. The compiler guarantees the exact type for each destructured variable based on its corresponding index in the tuple type.
```typescript theme={"dark"}
const record: [string, number, boolean] = ["TXN-992", 450.50, true];
const [id, amount, isProcessed] = record;
// id is inferred as 'string'
// amount is inferred as 'number'
// isProcessed is inferred as 'boolean'
```
## Explicit Typing
Type annotations cannot be applied directly to individual destructured variables inline. Instead, the type is declared for the entire destructuring pattern.
```typescript theme={"dark"}
// Correct explicit typing
const [x, y]: [number, number] = [10, 20];
// Incorrect: This is an invalid attempt at an inline type annotation
// const [a: number, b: number] = [10, 20];
```
## Elision (Skipping Elements)
Elements can be omitted from the assignment by leaving empty slots between commas. TypeScript correctly maps the types of the remaining variables to their absolute positional indices.
```typescript theme={"dark"}
const matrix: [number, string, boolean, number] = [1, "A", true, 0];
const [first, , , fourth] = matrix;
// first: number
// fourth: number
```
## Rest Elements
The rest syntax (`...`) collects all remaining unassigned elements into a new array. In TypeScript, the type of the rest variable is inferred as an array of the remaining types, or a smaller tuple if the source is a tuple.
```typescript theme={"dark"}
// Array rest inference
const scores: number[] = [98, 85, 72, 60];
const [highest, ...others] = scores;
// highest: number
// others: number[]
// Tuple rest inference
const config: [string, boolean, number, number] = ["dark", true, 800, 600];
const [theme, isEnabled, ...resolutions] = config;
// theme: string
// isEnabled: boolean
// resolutions: [number, number]
```
## Default Values
Default values can be assigned to variables in case the unpacked value is strictly `undefined`. In variable declarations, TypeScript dynamically creates a union type consisting of the destructured element's inferred type and the default value's type, while excluding `undefined`.
```typescript theme={"dark"}
const flags: string[] = ["--force"];
const [flag1, flag2 = "--silent"] = flags;
// flag1: string
// flag2: string
// TypeScript dynamically unions the array's element type ('number')
// with the default value's type ('string').
const mixed: number[] = [10];
const [primary, secondary = "none"] = mixed;
// primary: number
// secondary: number | string
```
Tired of Poor TypeScript Skills? Fix That With Deep Grasping!
Learn More
