Boxing and Unboxing in Typescript

The idea of boxing and unboxing is crucial to TypeScript. A value type in TypeScript is automatically converted into a reference type using a process known as boxing. In other words, boxing refers to transforming a value type into a reference type, and unboxing refers to transforming a reference type into a value type. These are two techniques used in TypeScript to convert a value type to an object type.

Boxing is the process of wrapping a value type in an object type. In contrast, unboxing is the process of unwrapping an object type back to a value type. The two techniques improve code performance by reducing the amount of memory allocated each time a value type is cast to an object type.

Boxing and Unboxing in TypeScript refer to the way primitive values are handled when they are passed to or returned from functions. When a primitive value is passed to a function, it is boxed, meaning it is converted to an object. When the value is returned from the function, the object is unboxed, and the primitive value is returned. This process is necessary because primitive values are not object-oriented and must be converted for a function to manipulate them. Boxing and unboxing can improve performance and memory usage in TypeScript applications.

Let us now explain both topics one by one in detail.

Boxing in TypeScript

Boxing in TypeScript refers to converting a value of a primitive data type (e.g., number, string, boolean) into an object of the corresponding wrapper class. TypeScript has built-in wrapper classes for the primitive data types, such as Number, String, and Boolean. These wrapper classes provide useful methods and properties that can be used to manipulate the corresponding primitive data types. For example, the Number wrapper class has methods such as toFixed(), toString(), and valueOf(). Boxing is an important concept in TypeScript, as it allows for using methods on primitive data types that would not otherwise be available.

Syntax

let variable_name: number = 12345
let boxing_variable_name: Object = variable_name // Boxing

In the above syntax, we can see the value of variable_name variable of type number is converted to an object type variable in the process of boxing.

Example

In this example, we perform a boxing operation. We declare a class named BoxingClass and declare two variables. One is the number, and the other is an object-type variable. We declare a method named boxingMethod(), where we perform the boxing operations. And finally, we console log the my_object variable’s value.

class BoxingClass {
   my_number: number = 123
   my_object: Object

   boxingMethod() {
      this.my_object = this.my_number
      console.log('Boxing Occurs for my_object variable')
   }
}

let boxing_object = new BoxingClass()
boxing_object.boxingMethod()
console.log('my_object value: ', boxing_object.my_object)

On compiling, it will generate the following JavaScript code −

var BoxingClass = /** @class */ (function () {
   function BoxingClass() {
      this.my_number = 123;
   }
   BoxingClass.prototype.boxingMethod = function () {
      this.my_object = this.my_number;
      console.log('Boxing Occurs for my_object variable');
   };
   return BoxingClass;
}());
var boxing_object = new BoxingClass();
boxing_object.boxingMethod();
console.log('my_object value: ', boxing_object.my_object);

Output

The above code will produce the following output −

Boxing Occurs for my_object variable
my_object value:  123

Unboxing in TypeScript

Unboxing in TypeScript converts a value with a compound data type (object, array, tuple, union, etc.) into a simpler data type (string, number, boolean, etc.). It is similar to “unboxing” in other programming languages, where a value of a particular type (like an object) is converted into a simpler type, such as a string or number.

In TypeScript, unboxing is done using the type assertion syntax (angle brackets) to specify the type of the value to be unboxed. For example, if we have a value of type any, we can unbox it to a number type by using the following syntax: <number> value.

Syntax

let variable_name: number = 12345
let boxing_variable_name: Object = variable_name // Boxing
let unboxing_variable_name: number = <number>boxing_variable_name // Unboxing

In the above syntax, we can see the value of variable_name variable of type number is converted to an object type variable in the process of boxing and then converted back to a number using unboxing.

Example

In this example, we perform both boxing and unboxing operations. We declare a class named BoxingUnboxingClass and declare three variables: two are the number, and another is an object type variable. Firstly, we perform the boxing process using the boxingMethod(), and then we perform the unboxing using the unboxingMethod(). And finally, we console log the variable’s value.

class BoxingUnboxingClass {
   my_number: number = 123
   boxing_variable: Object
   unboxing_variable: number
   boxingMethod() {
      this.boxing_variable = this.my_number
      console.log('Boxing Occurs!')
   }
   unboxingMethod() {
      this.unboxing_variable = <number>this.boxing_variable
      console.log('Unboxing Occurs!')
   }
}
let boxing_unboxing_object = new BoxingUnboxingClass()
boxing_unboxing_object.boxingMethod()
boxing_unboxing_object.unboxingMethod()
console.log('boxing_variable value: ', boxing_unboxing_object.boxing_variable)
console.log(
   'unboxing_variable value: ',
   boxing_unboxing_object.unboxing_variable
)

On compiling, it will generate the following JavaScript code −

var BoxingUnboxingClass = /** @class */ (function () {
   function BoxingUnboxingClass() {
      this.my_number = 123;
   }
   BoxingUnboxingClass.prototype.boxingMethod = function () {
      this.boxing_variable = this.my_number;
      console.log('Boxing Occurs!');
   };
   BoxingUnboxingClass.prototype.unboxingMethod = function () {
      this.unboxing_variable = this.boxing_variable;
      console.log('Unboxing Occurs!');
   };
   return BoxingUnboxingClass;
}());
var boxing_unboxing_object = new BoxingUnboxingClass();
boxing_unboxing_object.boxingMethod();
boxing_unboxing_object.unboxingMethod();
console.log('boxing_variable value: ', boxing_unboxing_object.boxing_variable);
console.log('unboxing_variable value: ', boxing_unboxing_object.unboxing_variable);

Output

The above code will produce the following output −

Boxing Occurs!
Unboxing Occurs!
boxing_variable value:  123
unboxing_variable value:  123

In summary, boxing and unboxing in TypeScript refer to the way primitive values are handled when they are passed to or returned from functions. Boxing converts a primitive value type into an object type, while unboxing is the reverse process of converting an object type back into a primitive value type. These techniques improve code performance by reducing the amount of memory allocated each time a value type is cast to an object type. In TypeScript, boxing is done by assigning a primitive value to an object variable, and unboxing is done using type assertion syntax (angle brackets) to specify the type of the value to be unboxed. It is important to note that the primitive value's memory is allocated on the stack, and the object value's memory is allocated on the heap.