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 that can derive from another class and may implement interfaces.
Syntax
  1. interface InterfaceName{
  2. firstname:string; // variable declaration
  3. MyFunction(value: number): void; // method declaration;
  4. }
The following examples tell 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
  1. interface MyInterface {
  2. firstname: string;
  3. lastname: string;
  4. country: string;
  5. }
  6. class MyClass {
  7. fulldata: string;
  8. constructor(public firstname, public lastname, public country) {
  9. this.fulldata = firstname + " " + lastname + " " + country;
  10. }
  11. }
  13. function data(mcn: MyInterface) {
  14. return "Welcome in " + mcn.firstname + " " + mcn.lastname + " " + mcn.country;
  15. }
  16. window.onload = () => {
  17. var name = new MyClass("Mcn", "solution", " at India");
  18. document.body.innerHTML = data(name);
  19. }
app.js
  1. var MyClass = (function() {
  2. function MyClass(firstname, lastname, country) {
  3. this.firstname = firstname;
  4. this.lastname = lastname;
  5. this.country = country;
  6. this.fulldata = firstname + " " + lastname + " " + country;
  7. }
  8. return MyClass;
  9. })();
  11. function data(mcn) {
  12. return "Welcome in " + mcn.firstname + " " + mcn.lastname + " " + mcn.country;
  13. }
  14. window.onload = function() {
  15. var name = new MyClass("Mcn", "solution", " at India");
  16. document.body.innerHTML = data(name);
  17. };
default.html
  1. <!DOCTYPEhtml>
  2. <htmllang="en"
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <metacharset="utf-8"/>
  6. <title>TypeScript HTML App</title>
  7. <linkrel="stylesheet"href="app.css"type="text/css"/>
  8. <scriptsrc="app.js">
  9. </script>
  10. </head>
  11. <body>
  12. <h1>TypeScript HTML App</h1>
  13. <divid="content"/>
  14. </body>
  15. </html>
Output:
interface1-in-TypeScript.jpg

program2 code:

InterfaceEx.ts
  1. interface MyInterface {}
  2. class Mcn implements MyInterface {}
  3. class Mcn1 extends Mcn {}
  4. var John = new Mcn1();
  5. if (John instanceof Mcn1)
  6. alert("John is an employee of Mcn Solution");
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 Mcn = (function() {
  9. function Mcn() {}
  10. return Mcn;
  11. })();
  12. var Mcn1 = (function(_super) {
  13. __extends(Mcn1, _super);
  15. function Mcn1() {
  16. _super.apply(this, arguments);
  17. }
  18. return Mcn1;
  19. })(Mcn);
  20. var McnFinal = (function(_super) {
  21. __extends(McnFinal, _super);
  23. function McnFinal() {
  24. _super.apply(this, arguments);
  25. }
  26. return McnFinal;
  27. })(Mcn1);
  28. var John = new Mcn1();
  29. if (John instanceof Mcn1) {
  30. alert("John is an employee of Mcn Solution");
  31. }
  32. if (John instanceof Mcn) {
  33. alert("John is an employee of Mcn Solution");
  34. }
default.html
  1. <!DOCTYPEhtml>
  2. <htmllang="en"
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <metacharset="utf-8"/>
  6. <title>TypeScript HTML App</title>
  7. <linkrel="stylesheet"href="app.css"type="text/css"/>
  8. <scriptsrc="app.js">
  9. </script>
  10. </head>
  11. <body>
  12. <h1>TypeScript HTML App</h1>
  13. <divid="content"/>
  14. </body>
  15. </html>
Output:
interface2-in-TypeScript.jpg