What is parameter destructuring in TypeScript?

In TypeScript, parameter destructuring is unpacking the argument object into separate parameter variables. For example, suppose we have passed the object with multiple properties as an argument of any function. In that case, we can destructure the object in the parameter and access all required properties of the object in a separate variable.

However, we can destructure the object properties or array passed as an argument of the function. Also, we have to define the type of every parameter using type annotation in TypeScript while destructuring the parameters. So it might not be very clear for beginners.

In this tutorial, we will learn basic parameter destructuring and define a type for every parameter via different examples. So, every beginner of TypeScript can learn the concept easily.

Syntax

Users can follow the syntax below for parameter destructuring in TypeScript.

function getObjValues({ key1, key2 }: { key1: string; key2: number }) {
   // use key1 and key2 as a variable
}
// calling the function with an object
getObjValues({ key1: "Hello", key2: 20 });

In the above syntax, we have passed the argument as a function. Users can see how we have destructured every object value in the parameter.

Now, we will look at the various examples of parameter destructuring and learn different uses of it.

Example 1

In the example below, we have created the printObjValues() function, which takes an object as a parameter. We are destructuring the object and storing the key values of the object in the parameter variables.

Also, users can see how we have used the parameter values in the function.

function printObjValues({ key1, key2 }: { key1: string; key2: number }) {
   console.log("The value of key1 is " + key1);
   console.log("The value of key2 is " + key2);
}

printObjValues({ key1: "Hello", key2: 20 });
printObjValues({ key1: "TypeScript", key2: 50 });

On compiling, it will generate the following JavaScript code −

function printObjValues(_a) {
   var key1 = _a.key1, key2 = _a.key2;
   console.log("The value of key1 is " + key1);
   console.log("The value of key2 is " + key2);
}
printObjValues({ key1: "Hello", key2: 20 });
printObjValues({ key1: "TypeScript", key2: 50 });

Output

The above code will produce the following output −

The value of key1 is Hello
The value of key2 is 20
The value of key1 is TypeScript
The value of key2 is 50

Example 2

In the example below, we are destructuring the object values in the parameter variable, but we have also assigned the default values to the parameter variables. The default values of the param2 are “default”. So, if we don’t pass the param2 key-values pair in the argument object, it will use the default value, and the code will execute without any error.

Also, users can see that we have used the ‘?’ to make the param2 parameter optional.

function getParams({
   param1,
   param2 = "default",
}: {
   param1: boolean;
   param2?: string;
}) {
   console.log("The value of param1 is " + param1);
   console.log("The value of param2 is " + param2);
}

getParams({ param1: true, param2: "value" });
getParams({ param1: false });

On compiling, it will generate the following JavaScript code −

function getParams(_a) {
   var param1 = _a.param1, _b = _a.param2, param2 = _b === void 0 ? "default" : _b;
   console.log("The value of param1 is " + param1);
   console.log("The value of param2 is " + param2);
}
getParams({ param1: true, param2: "value" });
getParams({ param1: false });

Output

The above code will produce the following output −

The value of param1 is true
The value of param2 is value
The value of param1 is false
The value of param2 is default

Example 3

In this example, all parameters are optional. We have assigned the default object containing all keys and default values to the parameter variables. So, we can use the argument object with one, two, three, or no key-value pairs.

Users can observe that we have invoked the function by passing the object containing various numbers of key-values pairs as an argument.

// Creating the function whose all parameters are optional and initializing them with default values.
function sample_function(
   {
      value1,
      value2,
      value3,
   }: {
      value1?: number;
      value2?: number;
      value3?: number;
   } = { value1: 20, value2: 30, value3: 40 }
): number {
   let sum = value1 + value2 + value3;
   return sum;
}

console.log("The sum of default values is " + sample_function());
console.log(
   "The sum of 10000, 20302, and value3 is " +
   sample_function({ value1: 10000, value2: 20302 })
);
console.log(
   "The sum of 10, 20, and 25 is " +
   sample_function({ value1: 10, value2: 20, value3: 25 })
);

On compiling, it will generate the following JavaScript code −

// Creating the function whose all parameters are optional and initializing them with default values.
function sample_function(_a) {
   var _b = _a === void 0 ? { value1: 20, value2: 30, value3: 40 } : 
    _a, value1 = _b.value1, value2 = _b.value2, value3 = _b.value3;
   var sum = value1 + value2 + value3;
   return sum;
}
console.log("The sum of default values is " + sample_function());
console.log("The sum of 10000, 20302, and value3 is " + sample_function({ value1: 10000, value2: 20302 }));
console.log("The sum of 10, 20, and 25 is " + sample_function({ value1: 10, value2: 20, value3: 25 }));

Output

The above code will produce the following output −

The sum of default values is 90
The sum of 10000, 20302, and value3 is NaN
The sum of 10, 20, and 25 is 55

Example 4

In this example, we are passing the object of lock type as a function parameter. The lock interface contains the lock_id and isDurable properties. We created the ‘lockObj’ and passed it as an argument of the callLockFunc() function.

In the callLockFunc() function, we have destructured the parameter object in the variables and print them to show its values.

interface lock {
   lock_id?: string;
   isDurable?: boolean;
}

let lockObj: lock = {
   lock_id: "4523fdr0",
   isDurable: true,
};

function callLockFunc(obj: lock) {
   let { lock_id, isDurable } = obj;
   console.log("The destructured lock_id value is " + lock_id);
   console.log("The destructured isDurable value is " + isDurable);
}

callLockFunc(lockObj);

lockObj.isDurable = false;
lockObj.lock_id = "eredf";
callLockFunc(lockObj);

On compiling, it will generate the following JavaScript code −

var lockObj = {
   lock_id: "4523fdr0",
   isDurable: true
};
function callLockFunc(obj) {
   var lock_id = obj.lock_id, isDurable = obj.isDurable;
   console.log("The destructured lock_id value is " + lock_id);
   console.log("The destructured isDurable value is " + isDurable);
}
callLockFunc(lockObj);
lockObj.isDurable = false;
lockObj.lock_id = "eredf";
callLockFunc(lockObj);

Output

The above code will produce the following output −

The destructured lock_id value is 4523fdr0
The destructured isDurable value is true
The destructured lock_id value is eredf
The destructured isDurable value is false

Users learned to destructure the object passed as a parameter of the function. Also, we learned to pass the default values or objects for parameters. In the last example, we learned to destructure an object into the function body.