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):
  1. var x: number=100;
  2. var obj: Object=x; //Boxing

Unboxing

Conversion of reference type to value type:
  1. var a: number=100;
  2. var obj: Object=x; //Boxing
  3. 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
  1. class BoxingAndUnBoxing {
  2. MyFunction() {
  3. var a: number = 100;
  4. var b: number;
  5. var obj: Object;
  6. obj = a;
  7. b = parseInt(obj.toString());
  8. alert("Boxing value=" + obj + " Unboxing value=" + a);
  9. }
  10. }
  11. window.onload = () => {
  12. var data = new BoxingAndUnBoxing();
  13. data.MyFunction();
  14. }
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
  1. <!DOCTYPEhtml>
  2. <htmllang="en"
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <metacharset="utf-8"/>
  6. <title>TypeScript HTML App</title>
  7. <linkrel="stylesheet"href="app.css"type="text/css"/>
  8. <scriptsrc="app.js">
  9. </script>
  10. </head>
  11. <body>
  12. <h1>TypeScript Boxing and Unboxing</h1>
  13. <divid="content"/>
  14. </body>
  15. </html>
app.js
  1. var BoxingAndUnBoxing = (function() {
  2. function BoxingAndUnBoxing() {}
  3. BoxingAndUnBoxing.prototype.MyFunction = function() {
  4. var a = 100;
  5. var b;
  6. var obj;
  7. obj = a;
  8. b = parseInt(obj.toString());
  9. alert("Boxing value" + obj + " Unboxing value" + a);
  10. };
  11. return BoxingAndUnBoxing;
  12. })();
  13. window.onload = function() {
  14. var data = new BoxingAndUnBoxing();
  15. data.MyFunction();
  16. };
Step 4
Output
Boxing-Unboxing-in-TypeScript.jpg