Boxing and Unboxing in TypeScript

In this article I am going to explain 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.

Boxing

Conversion of value type to reference type (Object):

var x: number=100;

var obj: Object=x; //Boxing

Unboxing

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:

BoxingAndUnBoxing.ts

 

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

    data.MyFunction();
}


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.

default.html
 

<!DOCTYPEhtml>

 

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>TypeScript HTML App</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

</head>

<body>

    <h1>TypeScript Boxing and Unboxing</h1>

 

    <divid="content"/>

</body>
</
html>


app.js

 

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

    data.MyFunction();
};


Step 4
 

Output

Boxing-Unboxing-in-TypeScript.jpg