角度类型检查如何工作

时间:2019-01-30 10:29:35

标签: angular typescript observable

我基本上对几种情况都感兴趣。

1)假设我有一个http调用,该调用可从我的php后端api获取所有电影。如您所知,这是可以观察到的。我必须订阅。

//this is my service. 
getAll() : Observable<Movie[]>{
   this.http.get("/movies");
}

// in my component I subscribe this 
getMovies(){
   this.movieService.getAll().subscribe(movies=>{
      this.movies = movies; //I probably have this.movies as any or Movie[] type
   })
 }

问题是,为什么我需要向我展示的服务中将Observable<Movie[]>写为getAll() function的返回类型?我可以只写getAll()而没有指定return type或指定Observable<any>.,但是我将类型设为Movie[]。它给我带来什么好处?正如我在getAll() function中所了解的那样,它只是返回可观察到的值并将其强制转换为Observable<Movie[]>

非常感谢。

1 个答案:

答案 0 :(得分:3)

所有Typescript和使用类型都是为了支持您使用类型检查和自动完成功能进行开发。当您在函数上未指定任何返回类型并使用此函数时,您的IDE不会告诉您有关可以期望哪种类型的返回值的信息。同样,当您搞砸事情时,打字稿编译器也不会抱怨。

想象一下以下情况:

class Movies {
  title: string;
  length: number;
  genre: string;
}    

getAll(): Observable<any>

您现在可以执行以下操作:

getAll().subscribe(m => {
  // name is not a property of movie
  console.log(m.name);
});

您的代码将编译并运行,但是您将在控制台上看到未定义的代码。

如果您是这样定义函数的:

getAll(): Observable<Movie>

您的IDE将显示错误,抱怨名称不是Movie的属性,因为打字稿编译器知道您使用了错误的属性。此外,它还会自动填充并建议所有可用的属性。

使用不带类型定义的Typescript或多或少类似于使用普通Javascript。将其与类型定义一起使用可为您完成错误时提供自动补全和错误支持。

最终,打字稿被编译为javascript,并且浏览器不在乎类型,但是在IDE内进行开发期间,这可能是一个很大的帮助。