Use Class or Interface to take input in typescript component

Question

I want to create a component in angular 2 that will take some input parameters.I am little bit confused about what should I use class or interface for input and why??For the following component I have used interface

import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({
  moduleId: module.id,
  selector: 'combo-compo',
  template: `
      <select name="theme" class="form-control" [ngModel]="selectedObject" (ngModelChange)="onChangeObj($event)">
        <option [ngValue]="theme" *ngFor="let theme of dataObject" >{{theme.value}}</option>
      </select>
            `
})

export class ComboComponent {
  selectedObject: ComboInterface;
  @Input() dataObject: Array<ComboInterface>;
  @Output() onComboChange = new EventEmitter();

  onChangeObj(newObj: ComboInterface) {
    this.selectedObject = newObj;
    this.onComboChange.emit(this.selectedObject);
  }

}

interface ComboInterface {
    key: string;
    value: string;
}

In the case of @Input, I think it's more practical to use interface rather than class — Abrar
– Abrar, Commented Jun 16, 2017 at 10:26

Sashi Kant · Accepted Answer · 2017-06-16 10:35:27Z

2

In Typescript, you are free to use either of CLASS or INTERFACE.

Below are the reasons which can help you take the right decision in choosing the correct structure:

Interface: You can only declare your properties with its corresponding type. This means you cannot have functions in it, nor those properties can be initialized at the time of declaration.

Class: You can declare your properties along with a default value and also with the functions.

PS: Interfaces are preferred over classes when you just want the structure of the data

answered Jun 16, 2017 at 10:35

Sashi Kant

13.5k9 gold badges50 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dean Chalk · Accepted Answer · 2017-06-16 11:00:16Z

1

Interfaces are preferable to classes as they are more flexible, and any class could implement that interface and be used for the input. Also, if you are unit testing you can create mock or stub classes that implement the interface so that you can test your components in isolation.

Although, in practical terms, if you only ever have one class that implements this interface, and it isn't used anywhere else, then there probably isn't the need to go the extra step of creating an interface, and you should maybe just us a class.

answered Jun 16, 2017 at 11:00

Dean Chalk

20.5k6 gold badges66 silver badges95 bronze badges

Collectives™ on Stack Overflow

Use Class or Interface to take input in typescript component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related