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