Why and how to use Angular2/Typescript model?

Question

this is my first post and i would like to ask you for help on topic i can't seem to find any info of.

I've been learning Angular 2 trough a guide and ng-book creating "SpotifyApp", and i came across the best practice to create typescript class model of Artist and Album, import it into my component and set result of HTTP request to that Model.

Now i don't see any difference from regular array, i don't know why I do it, and I can't seem to find any relevant info to the topic. It works but I can't see what it does. I even tried to break it like in example below giving it random attributes, and no difference

I went to Angular official docs, and i didn't see any difference, gone trough Typescript tutorial on tutorials point and doesn't mention anything about it. So my question is why i need model, do i use it wrong? And what do I use it for in application?

artist.model.ts

   import { Album } from './album.model'
export class Artist{
  id: number;
  name: number;
  peackock: string;
  genres: any;
  albums: Album[];
}

album.model.ts

export  class Album {
  id: number;
}

spotify-app.service

@Injectable()
export class SpotifyAppService {

  constructor(private http: Http) {
  }

  searchByTrack(query: string) {
    let params: string = [
      `q=${query}`,
      `type=artist`
    ].join("&");

    let queryUrl = `https://api.spotify.com/v1/search?${params}`;
    return this.http.get(queryUrl).map(res => res.json());
  }

}

spotify-app.component.ts

export class SpotifyAppComponent implements OnInit {
  searchStr: string;
  artist: Artist[];

  constructor(private spotifyService: SpotifyAppService) { }

  searchMusic(query: string):void{

     this.spotifyService.searchByTrack(query)
       .subscribe( res => {
       this.artist = res.artists.items;

       });
  };
  ngOnInit() {

  }

}

camccar · Accepted Answer · 2017-04-06 15:42:16Z

1

It's just an object. And you have noticed that it can have other attributes and still work because it is forgiving. One obvious benefit is code completion and error detection. Open up your code in visual studio code and you can control click to its definition.

Edit: Like I said it gives you code completion. So your ide know when you start typing n to keep going and fill in name. It gives you a place to look for attributes that you should expect. You can add functions do it. Give it more flexibility that just what is passed from the api.

edited Apr 6, 2017 at 15:42

answered Apr 6, 2017 at 15:20

camccar

73013 silver badges26 bronze badges

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

6 Comments

WInd Windstorm Over a year ago

I realized that it's object, but still my question is what it does? And why do i use it? At first i thought only response with certain attributes can pass to it, but that is not it.

Sunil D. Over a year ago

@WIndWindstorm you use the model b/c you want all the benefits of strong typing: detecting errors at compile time, code completion, clarity for developers, etc. You use it b/c you want to structure/modularize your code. But when the Typescript code is compiled into Javascript, all the strong typing rules go out the window... so at run time, the model won't do things like prevent you from assigning attributes that don't belong to the class. You could add getters/setters or methods to your model to help enforce those things...

WInd Windstorm Over a year ago

What does benefits of strong typing mean? Because I don't see any difference from normal array? I just declared this object i imported it and i can assign any value i want to it. So what is the benefit?

camccar Over a year ago

Code completions and compile time error detection. Strong typing allows the compiler (in this case transpiler) to find errors in the code before it runs. In completely dynamically typed languages you won't find out until runtime. For large projects that can especially be problematic as it's easier for code to go untested.

WInd Windstorm Over a year ago

So in nutshell, only benefit is for code competition and errors during development phase? And of course telling everyone else in project what you intended with model when he starts to read the code?

|

Collectives™ on Stack Overflow

Why and how to use Angular2/Typescript model?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related