TS2322：鍵入'Promise <Hero | 'undefined>'不可分配鍵入'Promise <Hero>'

Question

我正在從angular tutorial學習angular4。 下面是一個函數從服務的功能得到了英雄：

@Injectable() 
export class HeroService { 
    getHeroes(): Promise<Hero[]> { 

     return new Promise(resolve => { 
      // Simulate server latency with 2 second delay 
      setTimeout(() => resolve(HEROES), 2000); 
     }); 
    } 

    getHero(id: number): Promise<Hero> { 

     if (id < 0) { 
      throw new Error('Hero is not found.'); 
     } 
     return this.getHeroes() 
      .then(heroes => heroes.find(hero => hero.id === id)); 
    } 
} 

在執行時，它拋出錯誤：

TS2322: Type 'Promise<Hero | undefined>' is not assignable to type 'Promise<Hero>'. 
Type 'Hero | undefined' is not assignable to type 'Hero'. 
Type 'undefined' is not assignable to type 'Hero'. 

別人也面臨這個問題？請幫忙。 謝謝。

@Component({ 
    selector: 'hero-detail', 
    templateUrl: './hero-detail.component.html' 
}) 
export class HeroDetailComponent implements OnInit { 
    @Input() hero: Hero; 

    constructor(private heroService: HeroService, private route: ActivatedRoute, private location: Location) { } 

    ngOnInit(): void { 
     this.route.paramMap 
      .switchMap((params: ParamMap) => this.heroService.getHero(+(params.get('id') || -1))) 
      .subscribe(hero => this.hero = hero); 
    } 

    goBack(): void { 
     this.location.back(); 
    } 
} 

Answer 1

的打字稿原因引發此錯誤是因爲Array.find將回報undefined時所有元素不匹配的情況hero.id === id。

參考doc約Array.find：

The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

---

要避免錯誤，你應該將函數的返回類型更改爲Promise<Hero | undefined>。

getHero(id: number): Promise<Hero | undefined> { // <----mention here for return type 
    return this.getHeroes() 
      .then(heroes => heroes.find(hero => hero.id === id)); 
}