Boxing and Unboxing in TypeScript

Boxing and Unboxing in TypeScript

Boxing and Unboxing is an essential concept in TypeScript. TypeScript automatically transforms a value type into a reference type; this automatic transformation is called Boxing. In other words, the conversion of a value type to a reference type is known as Boxing and reference type to value type is known as Unboxing.

Here, I am describing Boxing and Unboxing separately.


Conversion of value type to reference type (Object):

var x: number=100;

var obj: Object=x; //Boxing


Conversion of reference type to value type:

var a: number=100;

var obj: Object=x; //Boxing

var y: number=parseInt(obj.toString()); // unboxing

The following example tells you, how to use Boxing and Unboxing in TypeScript. Use the following to create a program using Boxing and Unboxing.

Step 1

Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window will be opened; provide the name of your application, like "BoxingAndUnBoxing", then click on the Ok button.

Step 2

After Step 1 your project has been created. The Solution Explorer, which is at the right side of Visual Studio, contains the js file, ts file, css file and html files.

Step 3

The code of the Boxing and Unboxing program:



class BoxingAndUnBoxing {

    MyFunction() {

      var a: number = 100;

      var b: number;

      var obj: Object;

        obj = a;   // boxing

        b =parseInt(obj.toString()); //unboxing

        alert("Boxing value=" + obj + " Unboxing value=" + a);



window.onload = () =>


    var data = new BoxingAndUnBoxing();


Note In the above declared program a and b are number type variables and obj is an object type (reference type). When you assign a value of a to obj, it automatically (implicitly) transforms the value type to a reference type, and whenever you want to do the reverse process, then the object value must be typecast because TypeScript does not convert an object type (reference type) to a value type implicitly.







    <title>TypeScript HTML App</title>





    <h1>TypeScript Boxing and Unboxing</h1>






var BoxingAndUnBoxing = (function () {

    function BoxingAndUnBoxing() { }

    BoxingAndUnBoxing.prototype.MyFunction = function () {

        var a = 100;

        var b;

        var obj;

        obj = a;

        b = parseInt(obj.toString());

        alert("Boxing value" + obj + " Unboxing value" + a);


    return BoxingAndUnBoxing;


window.onload = function () {

    var data = new BoxingAndUnBoxing();


Step 4



Up Next
    Ebook Download
    View all


    Read by 16 people
    Download Now!
    View all