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.

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.

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.

// 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.

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.

// 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.

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

Master TypeScript with Deep Grasping Methodology!

Learn More