Post
Ask Question

How To Use This Keyword In TypeScript

Introduction

 
One of the most important concepts to grasp in TypeScript is the use of the "this" keyword, which is used in object methods. The "this" keyword always points to the object that is calling a particular method.
 
The type of "this" in an expression depends on the location in which the reference occurs:
  • In a constructor, member function, or member accessor, this is of the class instance type of the containing class.
  • In a static function or static accessor, this is of the constructor function type of the containing class.
  • In a function declaration or a standard function expression, this is of type Any.
The following example shows how to use the "this" keyword in TypeScript. In this example we have used two classes, one is Base class() and the second is Drive Class(). The Base Class is inherited by the Drive Class. The Base Class has a show method. We are using the show method in the Drive Class using the "this" keyword. Let's use the following procedure:
 
Step 1
 
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click HTML Application for TypeScript under Visual C#.
 
Give the name of your application as "This_keyword" and then click ok.
 
Step 2
 
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, and CSS files.
 

Coding

 
this_keyword.ts
  1. class Base {  
  2.  show() {  
  3.   var x = 20;  
  4.   alert("This is show method of base class " + x);  
  5.  }  
  6. }  
  7. class drive extends Base {  
  8.  display() {  
  9.   var y = 10;  
  10.   this.show();  
  11.   alert("This is display method of drive class " + y);  
  12.  }  
  13. }  
  14. window.onload = () => {  
  15.  var greeter = new drive();  
  16.  greeter.display();  
  17. };   
Demo.aspx
  1. <!DOCTYPEhtml>  
  2. <htmllanghtmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharsetmetacharset="utf-8"/>  
  6.         <title>This Keyword TypeScript</title>  
  7.         <linkrellinkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrcscriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h2>This keyword in TypeScript</h2>  
  13.         <dividdivid="content"/>  
  14.     </body>  
  15. </html>    
app.js
  1. var __extends = this.__extends || function(d, b) {  
  2.  function __() {  
  3.   this.constructor = d;  
  4.  }  
  5.  __.prototype = b.prototype;  
  6.  d.prototype = new __();  
  7. };  
  8. var Base = (function() {  
  9.  function Base() {}  
  10.  Base.prototype.show = function() {  
  11.   var x = 20;  
  12.   alert("This is show method of base class " + x);  
  13.  };  
  14.  return Base;  
  15. })();  
  16. var drive = (function(_super) {  
  17.  __extends(drive, _super);  
  18.   
  19.  function drive() {  
  20.   _super.apply(this, arguments);  
  21.  }  
  22.  drive.prototype.display = function() {  
  23.   var y = 10;  
  24.   this.show();  
  25.   alert("This is display method of drive class " + y);  
  26.  };  
  27.  return drive;  
  28. })(Base);  
  29. window.onload = function() {  
  30.  var greeter = new drive();  
  31.  greeter.display();  
  32. };   
Output 1
 
Click on the "Ok" button:
 
first-image.jpg
 
Output 2
 
second-image.jpg
 
Referenced By
 


Similar Articles