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
1072
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

DynamicPDF Developer Components

DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.

TRENDING UP

Create Outlook Add-in by MAPI Functionality by Using Visual Studio 2010 Outlook Project Debugging jQuery in ASP.NET Top 10 HTML5 Interview Questions How to Enable Sign in as Different User Option in SharePoint 2013 How to Select Multiple Rows in Grid Using LightSwitch 2012 Find and Delete Duplicate Records From SQL Table Encrypt and Decrypt in SQL Server: Part 2 Custom Paging With GridView in ASP.NET 4.5 Resolving Dependency Using Ninject Introduction To Serialization In Java

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	%
PhoneGap	2	2.78
Icenium	0	0.00
Xamarin Studio	1	1.39
KendoUI Mobile	1	1.39
JQueryMobile	61	84.72
Native iOS/Android	7	9.72
Total	72	100%

In Focus

Interface Using TypeScript

Related Articles


What is the best product to build Mobile apps?

What is the best product to build Mobile apps

PhoneGap Icenium Xamarin Studio KendoUI Mobile JQueryMobile Native iOS/Android