Default Value Destructuring

Default value destructuring in TypeScript is the mechanism of assigning fallback values to variables concurrently as they are unpacked from objects or arrays. The TypeScript compiler applies these default values strictly when the target property is missing or explicitly evaluates to undefined.

Object Destructuring Syntax

The default value is assigned using the assignment operator (=) directly within the destructuring pattern. To satisfy the TypeScript compiler, the source object must have a type definition that includes the optional property being destructured.

const response: { status: number; message?: string } = { status: 200 };
const { status, message = "OK" } = response;
// status: 200, message: "OK"

Type Inference vs. Explicit Typing

When a default value is provided, TypeScript automatically infers the variable’s type based on that default. If explicit typing is required, the type annotation must be applied to the entire destructuring pattern, not the individual property.

A common syntax error in TypeScript is confusing property renaming with type annotation.

const config: { timeout?: number } = {};

// ❌ INCORRECT: This renames the 'timeout' property to a variable named 'number'
const { timeout: number = 5000 } = config;

// ✅ CORRECT: Type annotation follows the destructuring block
const { timeout = 5000 }: { timeout?: number } = config;

Evaluation Rules

Default values are evaluated and assigned only if the extracted value is strictly undefined. Falsy values such as null, 0, false, or "" (empty string) will bypass the default value assignment.

const payload: { count?: number; data?: any; token?: string } = { 
  count: 0, 
  data: null, 
  token: undefined 
};

const { 
  count = 10,     // Evaluates to 0
  data = [],      // Evaluates to null
  token = "empty" // Evaluates to "empty"
} = payload;

Array Destructuring

Array destructuring follows the same positional assignment rules, applying defaults to elements that are out of bounds or explicitly undefined.

const coordinates: number[] = [15];
const [x = 0, y = 0, z = 0] = coordinates;
// x: 15, y: 0, z: 0

Function Parameters

When destructuring parameters in a function signature, the default values are defined in the parameter list, while the type definition is declared as a single interface or inline type representing the expected object.

interface RequestOptions {
  method?: "GET" | "POST";
  headers?: Record<string, string>;
}

function fetchResource({ 
  method = "GET", 
  headers = {} 
}: RequestOptions) {
  // method is typed as "GET" | "POST"
  // headers is typed as Record<string, string>
}

Nested Destructuring with Defaults

Defaults can be applied at multiple levels of a nested destructuring pattern. To prevent runtime TypeError exceptions when a parent object is undefined, a default empty object (= {}) must be provided at the parent level.

const settings: { ui?: { theme?: string } } = {};

const { 
  ui: { 
    theme = "dark" 
  } = {} 
}: { 
  ui?: { theme?: string } 
} = settings;

Master TypeScript with Deep Grasping Methodology!

Learn More