Post
Ask Question

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):
  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


Similar Articles