> ## 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 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.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
// 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).
```typescript theme={"dark"}
// 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`.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
// 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.
```typescript theme={"dark"}
// Destructuring with an external interface
function initialize({ timeout, retries }: Config): void {
// Implementation
}
// Destructuring with inline typing
function updateCoordinates([x, y]: [number, number]): void {
// Implementation
}
```
Tired of Poor TypeScript Skills? Fix That With Deep Grasping!
Learn More
