ARTICLE

Interface Using TypeScript

Posted by Sharad Gupta in Articles | TypeScript on October 29, 2012

Tags: extends, interface, TypeScript, Visual Studio 2012

In this article I am going to explain how to use an interface in TypeScript.

Tweet
1060
0

Reader Level: Beginner

Interface in TypeScript

An interface is a set of type definitions, in other words you can define members without implementations. An interface can extend another interface using the extends keyword. You cannot implement a constructor or any function at all in an interface, and you cannot set default values. In it you can define a class which can derive from another class and may implement interfaces.

Syntax

interface InterfaceName{

firstname:string; // variable declaration

MyFunction(value: number): void; // method declaration;

}

The following examples tells you, how to use interfaces in TypeScript, do the following steps to create a program using an interface.

Step 1

Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project...". After that, a window is opened; enter the name of your application like "InterfaceExample", 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 your project, contains the js file, ts file, css file and html file.

Step 3

The code of interface programs:

program1 code:

InterfaceExample.ts

interface MyInterface {

firstname: string;

lastname: string;

country: string;

}

class MyClass{

fulldata: string;

constructor (public firstname, public lastname, public country) {

this.fulldata = firstname + " " + lastname + " " + country;

}

function data(mcn: MyInterface)

{

return"Welcome in " + mcn.firstname + " " + mcn.lastname + " " + mcn.country;

}

window.onload = () => {

var name = new MyClass("Mcn","solution"," at India");

document.body.innerHTML = data(name);

}

app.js

var MyClass = (function () {

function MyClass(firstname, lastname, country) {

this.firstname = firstname;

this.lastname = lastname;

this.country = country;

this.fulldata = firstname + " " + lastname + " " + country;

}

return MyClass;

})();

function data(mcn) {

return"Welcome in " + mcn.firstname + " " + mcn.lastname + " " + mcn.country;

}

window.onload = function () {

var name = new MyClass("Mcn","solution"," at India");

document.body.innerHTML = data(name);

};

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 HTML App</h1>

<divid="content"/>

</body>
</html>

Output:

program2 code:

InterfaceEx.ts

interface MyInterface { }

class Mcn implements MyInterface {}

class Mcn1 extends Mcn {}

var John = new Mcn1();

if( John instanceof Mcn1 )
alert( "John is an employee of Mcn Solution" );

app.js

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

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

__.prototype = b.prototype;

d.prototype = new __();

}

var Mcn = (function () {

function Mcn() { }

return Mcn;

})();

var Mcn1 = (function (_super) {

__extends(Mcn1, _super);

function Mcn1() {

_super.apply(this, arguments);

}

return Mcn1;

})(Mcn);

var McnFinal = (function (_super) {

__extends(McnFinal, _super);

function McnFinal() {

_super.apply(this, arguments);

}

return McnFinal;

})(Mcn1);

var John = new Mcn1();

if(John instanceof Mcn1) {

alert("John is an employee of Mcn Solution");

}

if(John instanceof Mcn) {

alert("John is an employee of Mcn Solution");

}

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 HTML App</h1>

<divid="content"/>

</body>
</html>

Output:

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

iPhone, Android & Web Development Services

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

Create Outlook Add-in by MAPI Functionality by Using Visual Studio 2010 Outlook Project Debugging jQuery in ASP.NET How to Enable Sign in as Different User Option in SharePoint 2013 Top 10 HTML5 Interview Questions Find and Delete Duplicate Records From SQL Table Panel Default Button is Not Working For Rad Combobox Custom Paging With GridView in ASP.NET 4.5 Working With Database in HTML5 Extending WinJS ListView With Custom Item Events Encrypt and Decrypt in SQL Server: Part 2

View All

MOST LIKED ARTICLE

WCF Introduction and Contracts - Day 1 Create SSRS Report Using Report Wizard CREATE READ UPDATE and DELETE - CRUD Operation Using LINQ to SQL WCF - Data Contract - Day 4 Factory Design Pattern

Follow @twitterapi

Options	Votes	%
Lenovo	21	14.38
HP	6	4.11
Dell	17	11.64
Toshiba	54	36.99
Acer	43	29.45
Sony	5	3.42
Total	146	100%

In Focus

Interface Using TypeScript

Related Articles


Favorite Computer Manufacturer

Who is your favorite Computer manufacturer?

Lenovo HP Dell Toshiba Acer Sony