What is Parameter Destructuring in TypeScript ?

Parameter destructuring in TypeScript is a way to extract values from objects or arrays passed as function parameters, making it easier to work with their properties or elements directly within the function body.

There are several methods through which parameter destructuring is achieved in TypeScript which are as follows:

Object Destructuring

When we’re working with objects, we can destructure the object directly within the function parameters. This is useful when we want to extract specific properties from the object.

Syntax:

function functionName({ propertyName1, propertyName2 }: { propertyName1: type1, propertyName2: type2 }) {
    // Function body
}

Example: A function `printUser` logs the name and age of a user object, defined with name “Alice” and age 25, passed to it.

JavaScript

function printUser({ name, age }
  : { name: string, age: number }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const user =
{
  name: "Alice",
  age: 25
};

printUser(user);

Output:

[LOG]: "Name: Alice, Age: 25"

Array Destructuring

If one function receives an array as a parameter, we can destructure the array directly within the function parameters. This allows us to extract specific elements from the array.

Syntax:

function functionName([variable1, variable2, ...]: ArrayType) {
    // Function body
}

Example: A function `printValues` extracts two values from an array of numbers and logs them. An array `[10, 20]` is defined and passed to the `printValues` function, printing “Value 1: 10, Value 2: 20” to the console.

JavaScript

function printValues([value1, value2]: number[]) 
{
  console
    .log(`Value 1: ${value1}, Value 2: ${value2}`);
}

const values: number[] = [10, 20];
printValues(values);

Output:

[LOG]: "Value 1:10, Value 2: 20"

Rest Parameters

Rest parameters in TypeScript allow functions to accept an indefinite number of arguments as an array. Think of them like a catch-all bucket for any extra arguments we might pass to a function. Instead of specifying every possible argument individually, we can use the rest parameter syntax, which is represented by three dots (…) followed by the name of the parameter. This lets you gather up any remaining arguments into an array, making your function more flexible and capable of handling varying numbers of inputs.

Syntax:

function functionName(param1: Type, ...restParams: Type[]) {
    // Function body
}

Example: A function `sum` calculates the sum of multiple numbers, including a first number followed by an arbitrary number of additional numbers. The function is called with parameters `1, 2, 3, 4, 5`, resulting in the sum `15` logged to the console.

JavaScript

function sum(firstNumber: number, ...remainingNumbers: number[]) {
    let total = firstNumber;
    for (const num of remainingNumbers) {
        total += num;
    }
    return total;
}

console.log(sum(1, 2, 3, 4, 5));

Output:

[LOG]: 15

Default Values

TypeScript allows us to provide default values for destructured parameters. This is useful when we want to provide values if a property or element is missing.

Syntax:

function functionName(param1: Type = defaultValue1, param2: Type = defaultValue2) {
    // Function body
}

Example: The`greet` function logs a greeting message, defaulting to “Bishal Paul” if no name is given. It’s called twice, first without a name and then with “GeeksforGeeks”.

JavaScript

function greet(name: string = "GeeksforGeeks") {
  console.log(`Hello, ${name}!`);
}

greet();
greet('GeeksforGeeks');

Output:

[LOG]: "Hello, GeeksforGeeks!"