ARTICLE

How To Use This Keyword In TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript December 18, 2012
Tags: this keyword in typescript, TypeScript, use of this keyword in typescript, Visual Studio 2012
In this article I explain how to use the "this" keyword in TypeScript with an example.
Reader Level:

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

class Base

{

    show()

    {

        var x=20;

        alert("This is show method of base class " + x);

    }

}

class drive extends Base

{

    display()

    {

        var y = 10;

        this.show();

        alert("This is display method of drive class " + y);

    }

}

window.onload = () =>

{

    var greeter = new drive();

    greeter.display();

};

 

Demo.aspx

<!DOCTYPEhtml>

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

<head>

    <metacharset="utf-8"/>

    <title>This Keyword TypeScript</title>

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

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

</head>

<body>

    <h2>This keyword in TypeScript</h2>

    <divid="content"/>

</body>

</html> 

 

app.js

var __extends = this.__extends || function (d, b) {

    function __() { this.constructor = d; }

    __.prototype = b.prototype;

    d.prototype = new __();

};

var Base = (function () {

    function Base() { }

    Base.prototype.show = function () {

        var x = 20;

        alert("This is show method of base class " + x);

    };

    return Base;

})();

var drive = (function (_super) {

    __extends(drive, _super);

    function drive() {

        _super.apply(this, arguments);

 

    }

    drive.prototype.display = function () {

        var y = 10;

        this.show();

        alert("This is display method of drive class " + y);

    };

    return drive;

})(Base);

window.onload = function () {

    var greeter = new drive();

    greeter.display();

};

//@ sourceMappingURL=app.js.map

 

Output 1


Click on the "Ok" button:


first-image.jpg

 

Output 2


second-image.jpg

 

Reference By

http://www.typescriptlang.org/

Login to add your contents and source code to this article
This Feature is Sponsored By DynamicPDF Merger is a developers dream for interacting with any existing PDF documents. Merge, append, split, form fill, flatten stamp and so much more.
post comment
     
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
TRENDING UP
MOST LIKED ARTICLE
HOT KEYWORDS
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services MVPs MOST VIEWEDLEGENDSNOW PRIZESAWARDSREVIEWSSURVEYCERTIFICATIONSDOWNLOADS
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | ABOUT US | REPORT ABUSE
©2013 C# Corner. All contents are copyright of their authors.