javascript - 为什么以及如何使用 Angular2/Typescript 模型？

Question

这是我的第一篇文章，我想就我似乎找不到任何信息的主题向您寻求帮助。

我一直在通过创建“SpotifyApp”的指南和 ng-book 学习 Angular 2，我遇到了创建艺术家和专辑的 typescript 类模型的最佳实践，将其导入我的组件并设置 HTTP 请求的结果到那个模型。

现在我看不出与常规数组有任何区别，我不知道为什么要这样做，而且我似乎找不到与该主题相关的任何信息。它有效，但我看不到它的作用。我什至尝试像下面的例子那样破坏它，给它随机属性，但没有区别

我去了 Angular 官方文档，我没有看到任何区别，在教程点上浏览了 Typescript 教程，但没有提及任何相关内容。所以我的问题是为什么我需要模型，我用错了吗？我在应用程序中使用它做什么？

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() {

  }

}

Answer 1

它只是一个对象。你已经注意到它可以有其他属性并且仍然有效，因为它是宽容的。一个明显的好处是代码完成和错误检测。在 visual studio code 中打开你的代码，你可以控制点击它的定义。

编辑:就像我说的那样，它可以让您完成代码。所以你的 ide 知道你什么时候开始输入 n 继续并填写名字。它为您提供了一个查找您应该期望的属性的地方。 您可以添加功能来做到这一点。给它更多的灵 active ，只是从 api 传递的内容。