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:
![interface1-in-TypeScript.jpg]()
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:
![interface2-in-TypeScript.jpg]()