Destructuring is a powerful feature in JavaScript and TypeScript that allows you to unpack values from arrays or objects into distinct variables.

Destructuring arrays

const numbers: number[] = [10, 20, 30];

// Basic array destructuring with types
const [x, y, z]: number[] = numbers;
console.log(x, y, z); // 10 20 30

// Using default values with type annotations
const [a = 100, b = 200]: [number, number] = [50];
console.log(a, b); // 50 200

// Destructuring into a tuple type
const [first, second]: [number, number] = [1, 2];
console.log(first, second); // 1 2

Destructuring objects

// Type annotations with object destructuring
interface Person {
    name: string;
    age: number;
    city?: string;
}

const person: Person = { name: 'Alice', age: 25 };

// Basic object destructuring
const { name, age }: Person = person;
console.log(name, age); // Alice 25

// Destructuring with default values and optional properties
const { city = 'Default City' }: Person = person;
console.log(city); // Default City

// Nested object destructuring with type annotations
interface Address {
    city: string;
    postalCode: number;
}

const user = { name: 'Bob', address: { city: 'Berlin', postalCode: 10115 } };

const { address: { city, postalCode } }: { address: Address } = user;
console.log(city, postalCode); // Berlin 10115

// Destructuring with rest
const { name, ...otherDetails }: Person = person;
console.log(name, otherDetails); // Alice { age: 25 }

Destructuring with Function Parameters

interface User {
    name: string;
    age: number;
}

// Destructuring in function parameters with type annotation
const greetUser = ({ name, age }: User): void => {
    console.log(`Hello, ${name}, you are ${age} years old.`);
};

greetUser({ name: 'Tom', age: 28 }); // Hello, Tom, you are 28 years old.

const sumNumbers = ([a, b]: [number, number]): number => a + b;
console.log(sumNumbers([3, 4])); // 7

Destructuring with Rest Operator

// Rest in arrays
const [first, ...restOfNumbers]: number[] = [1, 2, 3, 4];
console.log(first, restOfNumbers); // 1 [2, 3, 4]

// Rest in objects with type annotation
interface PersonDetails {
    name: string;
    age: number;
    city: string;
}

const person: PersonDetails = { name: 'Anna', age: 40, city: 'Paris' };

const { name, ...details }: PersonDetails = person;
console.log(name, details); // Anna { age: 40, city: 'Paris' }

Destructuring with Default Values

// Default values in array destructuring
const [x = 10, y = 20]: number[] = [];
console.log(x, y); // 10 20

// Default values in object destructuring
const { a = 50, b = 60 }: { a: number, b: number } = { a: 30 };
console.log(a, b); // 30 60

Destructuring in Loops

interface Person {
    name: string;
    age: number;
}

const people: Person[] = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'Mike', age: 35 }
];

for (const { name, age } of people) {
    console.log(name, age);
}
// Output:
// John 30
// Jane 25
// Mike 35

Destructuring in Class Constructors

interface PersonProps {
    name: string;
    age: number;
}

class Person {
    name: string;
    age: number;

    constructor({ name, age }: PersonProps) {
        this.name = name;
        this.age = age;
    }
}

const person = new Person({ name: 'Alice', age: 28 });
console.log(person.name, person.age); // Alice 28

Destructuring with Aliases

interface User {
    firstName: string;
    lastName: string;
}

const user: User = { firstName: 'Tom', lastName: 'Smith' };

// Using alias with type annotation
const { firstName: first, lastName: last }: User = user;
console.log(first, last); // Tom Smith