11

I want to understand using interface vs class to create model in angular 2. When we create model in Java or C#, we use model classes to represent data model that pass around in our application and therefore strongly typed.

//C#
public class Movie 
{
   public int ID { get; set; }
   public string Title { get; set; }
   public DateTime ReleaseDate { get; set; }
   public string Genre { get; set; }
   public decimal Price { get; set; }
}

Most of the time we will stick to data binding with this kind of model to databases based on our requirements.

I see examples and tutorials using same approaches like this.

//Java
public class Movie
{
   public int ID;
   public String Title;
   public Date ReleaseDate;
   public String Genre;
   public float Price;
}

Then, I start using angular and typescript for web development. I find that some like to use interface to represent their model and other like to stick with class.

//Class
export class Movie {
    public string id;
    public string title;
    public Date ReleaseDate;
    public string Genre;
    public number
}
//Interface
export interface Movie {
    public string id;
    public string title;
    public Date ReleaseDate;
    public string Genre;
    public number
}

However, when it comes to create and use model, it looks like same kind to me.

 //declare
let movie = new Movie();
movie: Movie = new Movie();
movies: Movie[];
amovie: Movie;
//reactive
obsMovies: Observable<Movie[]>;
obsAMovie: Observable<Movie>;

I want to know the difference if has any when use interface or class in typescript. My understanding of interface is simply contract for classes that shared functions whereas class can be anything that can imagine.

phonemyatt
  • 1,287
  • 17
  • 35

1 Answers1

11

Classes in Typescript are more like your classes in Java and C#. They actually are getting compiled to JavaScript prototypes.

Interfaces are just a compile-time thing. They are just for the compiler to force static typing. You will not see anything from your Typescript-Interfaces in your compiled code.

Due to the fact that models often are just there to define a structure of data I am using the Typescipt-Interfaces for my models.

Crappy
  • 441
  • 3
  • 7
  • 1
    I have been struggling to understand the concept but your explanation makes it clear. Is it good to say that by declaring interface in typescript, codes compile to javascript will be lesser compared to class with extra functions? And is it better choice to use model interface in app, when we want to define model that represents object to add or retreat data? – phonemyatt Nov 29 '17 at 13:33
  • yes interfaces in typescript are just for the typescript compiler. in javascript you just have a simple object, nothing special. it just adds the static typing for you that you know this object will have that properties. yeah for moving data, interfaces are the perfect thing, because they dont require any methods. just defining the structure of the data – Crappy Nov 29 '17 at 14:10