Angular 5组件调用方法参数不匹配，触发TS2554错误

这个错误的原因非常直观——你在profile.component.ts里调用this.auth.getProfile()时没有传入任何参数，但在auth.service.ts中定义的getProfile方法明确要求接收一个user参数，两者不匹配就触发了TypeScript的类型检查错误。

我们来拆解下代码里的矛盾点：

• 在auth.service.ts中，getProfile的方法签名是：

  getProfile(user) {
    // ...方法实现
  }
  

  这里声明了需要一个user参数，但实际上看方法内部的逻辑，你完全没有用到这个参数！请求后端时只在请求头里添加了token，既没有把user参数传给后端，也没有在方法内做任何处理。

根据你的实际需求，有两种解决思路：

思路一：移除多余的参数（推荐） #

既然getProfile方法内部根本不需要user参数，直接把方法定义里的参数删掉就可以解决问题：

修改auth.service.ts中的getProfile方法：

getProfile() { // 删掉这里的user参数
  let headers = new Headers();
  this.loadToken();
  headers.append('Authorization', this.authToken);
  headers.append('Content-Type','application/json');
  return this.http.get('http://localhost:3000/users/profile', {headers:headers})
    .map(res => res.json());
}

修改后，组件里的this.auth.getProfile()调用就完全符合方法签名了，错误会直接消失。

思路二：传递必要参数（如果后续逻辑需要） #

如果你之后的业务逻辑确实需要给getProfile传递user参数，那就在组件调用时传入对应的变量。比如组件里已有user变量的话，可以这样调用：

this.auth.getProfile(this.user).subscribe(
  profile => { this.user = profile.user; },
  err => { return false; });

不过从你当前的代码逻辑来看，这个参数是多余的，所以更推荐第一种思路。

最后提个小建议：在TypeScript里尽量给参数和变量加上类型注解，比如定义User接口后，把getProfile的参数写成getProfile(user: User)，组件里的user定义为user: User，这样能更早发现这类参数不匹配的问题，代码也会更健壮。

内容的提问来源于stack exchange，提问作者j-p