title: Typescript interface call method
body: <p>I want to use a class "element" with has an interface "entity". I would like to use the interface like c# interfaces. I have an angular component with an input. The input type is entity (the interface) because the angular component has two input classes. I thought I can use an interface like c# where I define a method that I implement in the other classes (example: "element") and call this method over the element instace that is casted to an interface. I hope you can understand that what I want to do.</p>
  
  <p>Element class:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Entity } from "./entity";
  
  export class Element implements Entity {
      public Id: string;
      public Name: string;
      public ShortDesc: string;
      public Description: string;
      public Picture: any;
  
      public GetId(): string {
          return 
      }
  
      public GetName(): string {
          return this.Name;
      }
  
      public GetType(): string {
          return typeof(this);
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Entity class:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export interface Entity {
      GetId(): string;
      GetName(): string;
      GetType(): string;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I use a dialog from angular material 2. I give the dialog the right input type "element" (base class). </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    deleteClick(ele: Element) {    
          let dialogRef = this.dialog.open(DeleteDialog, {
          height: '400px',
          width: '400px',
          data: {
              entity: ele
          }
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the dialog:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class DeleteDialog implements OnInit {
  
      ngOnInit() {
      }
  
      dialogResult: string = 'cancel';
  
      constructor(
          public dialogRef: MatDialogRef&lt;DeleteDialog&gt;,
          @Inject(MAT_DIALOG_DATA) public data: {
              type: string,
              entity: Entity
          },
          private globalServ: GlobalService) {
              let entity = this.data.entity;
              let name = entity.GetName();
              //Here I get the Exception ERROR TypeError: entity.GetName is not a function
          }
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Where is my mistake? I get the error "ERROR TypeError: entity.GetName is not a function"</p>