Angular英雄之旅教程报错：Hero类型无法赋值给string参数

这个类型错误和组件里的类型转换写法没有关系，问题出在HeroService的addHero方法定义上：你大概率给这个方法的入参标注成了string类型，但实际调用时传入的是Hero对象，类型不匹配才会抛出该错误。

• 打开hero.service.ts文件，定位到addHero方法
• 修改方法的入参类型，不要标注为string，正确的入参应该接收缺少id字段的Hero对象，参考实现：

/** POST: 向服务器提交新增英雄 */
addHero(hero: Pick<Hero, 'name'>): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError<Hero>('addHero'))
    );
}

改完之后组件里的调用甚至不需要写as Hero强转，直接传{ name }就能通过TS校验：

add(name: string): void {
  name = name.trim();
  if (!name) { return; }
  this.heroService.addHero({ name })
    .subscribe(hero => {
      this.heroes.push(hero);
    });
}

教程里写的as Hero属于TS类型断言，本质是绕过TS的静态类型检查，告诉编译器“我确定这个对象是Hero类型，不用做校验”。在教程这个特定场景下这么写不会触发运行时错误，毕竟后端接口收到请求后会自动生成id，返回完整的Hero对象。但这种写法存在长期隐患：

• 如果写代码时不小心拼错属性名，比如把name写成nam，或者漏传name字段，TS不会给出编译提示，要等到接口调用失败、页面出问题的时候才能定位bug
• 如果后续Hero接口新增了其他必填字段，这种断言写法也不会提示补全参数，容易埋下隐性问题
  更稳妥的写法就是像上面那样，在service方法定义时就用Pick<Hero, 'name'>或者Omit<Hero, 'id'>明确入参类型，既符合“新增英雄不需要传id”的业务逻辑，又能保留TS的类型校验能力。

内容的提问来源于stack exchange，提问作者inv-soup