TypeScript - Parameter Destructuring

---

---

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.

Syntax

You 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.

Examples

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 });

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 dont 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 });

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 }));

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);

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