Post
Ask Question

Interface Using TypeScript

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. }  
  12.   
  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. })();  
  10.   
  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);  
  14.   
  15.  function Mcn1() {  
  16.   _super.apply(this, arguments);  
  17.  }  
  18.  return Mcn1;  
  19. })(Mcn);  
  20. var McnFinal = (function(_super) {  
  21.  __extends(McnFinal, _super);  
  22.   
  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


Similar Articles