TS2322: Geben Sie 'Promise <Held | undefined> 'kann nicht dem Typ' Promise <Hero> 'zugewiesen werden

Question

Ich lerne angle4 von angular tutorial. Unten ist eine Funktion, einen Helden aus dem Dienst der Funktion zu erhalten:

@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)); 
    } 
} 

Bei der Ausführung wirft Fehler:

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'. 

noch jemand auch dieses Problem konfrontiert? Bitte helfen Sie. Danke.

@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

Der Grund Typoskript wirft dieser Fehler, weil Array.find wird Rückkehr ist undefined wenn alle Elemente die Bedingunghero.id === id nicht angepasst haben.

Siehe doc über 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.

---

Um den Fehler zu vermeiden, sollten Sie Ihre Funktion Rückkehr Typ Promise<Hero | undefined> ändern.

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