Destructured Variable

Destructuring in TypeScript is a syntax that allows unpacking values from arrays or properties from objects into distinct, statically-typed variables. TypeScript enhances standard JavaScript destructuring by enforcing structural typing, enabling explicit type annotations, and automatically inferring types from the source structure.

Object Destructuring

When destructuring objects, TypeScript infers the types of the extracted variables based on the source object’s shape.

interface Payload {
  code: number;
  message: string;
  timestamp: string;
}

const response: Payload = { code: 200, message: "OK", timestamp: "2023-10-01" };

// Inferred typing: 'code' is number, 'message' is string
const { code, message } = response;

Explicit Typing vs. Renaming

A critical syntactic distinction in TypeScript is that a colon (:) inside the destructuring pattern denotes variable renaming, not a type annotation. Type annotations must be applied to the entire destructured object.

// This renames the 'code' property to a new variable named 'responseCode'.
// TypeScript correctly infers the variable 'responseCode' as type 'number'.
const { code: responseCode } = response; 

// To apply explicit types while renaming, the type annotation must follow the entire destructuring pattern.
const { code: statusCode, message: msg }: { code: number; message: string } = response;

Array and Tuple Destructuring

Array destructuring extracts values based on positional indices. TypeScript applies strict typing based on whether the source is an array (homogeneous) or a tuple (heterogeneous, fixed-length).

// Tuple destructuring
const matrix: [number, string, boolean] = [1, "active", true];

// TypeScript strictly types 'id' as number, 'status' as string
const [id, status] = matrix;

// Skipping elements maintains correct positional typing ('flag' is boolean)
const [, , flag] = matrix;

Default Values

Default values can be assigned to destructured variables to handle undefined. TypeScript infers the variable’s type as a union of the default value’s type and the property’s defined type, narrowing out undefined.

interface Config {
  timeout?: number;
  retries?: number;
}

const settings: Config = { timeout: 5000 };

// 'retries' is typed as 'number' (not 'number | undefined') due to the default value
const { timeout, retries = 3 }: Config = settings;

Rest Elements (...)

The rest operator extracts all remaining un-destructured properties or elements into a new variable. TypeScript dynamically computes the type of the rest variable by omitting the explicitly destructured keys.

// Object Rest
const { timestamp, ...coreData } = response;
// coreData is typed as: { code: number; message: string; }

// Array Rest
const sequence: number[] = [10, 20, 30, 40];
const [head, ...tail] = sequence;
// tail is typed as: number[]

Function Parameter Destructuring

Destructuring is commonly applied directly within function signatures. The type annotation must follow the destructured parameter object.

// Destructuring with an external interface
function initialize({ timeout, retries }: Config): void {
  // Implementation
}

// Destructuring with inline typing
function updateCoordinates([x, y]: [number, number]): void {
  // Implementation
}

Master TypeScript with Deep Grasping Methodology!

Learn More