I'm learning angular4 from angular tutorial. Below is a function to get a hero from service's function:

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

On execution it throws error:

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

Anybody else also faced this issue ? Please help. Thank you.

@Component({
    selector: 'hero-detail',
    templateUrl: './hero-detailponent.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();
    }
}

I'm learning angular4 from angular tutorial. Below is a function to get a hero from service's function:

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

On execution it throws error:

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

Anybody else also faced this issue ? Please help. Thank you.

@Component({
    selector: 'hero-detail',
    templateUrl: './hero-detail.ponent.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();
    }
}

• javascript
• angular
• typescript

• can you post this.getHeroes() method and Hero interface . – Rajez Commented Aug 24, 2017 at 6:30
• There should be Hero class in your code. and you should import it where you use. Wherever this function is put import { Hero } from 'Hero.ts' (be careful about path) and then try again. – Ömer Faruk Kırlı Commented Aug 24, 2017 at 6:33
• It throws error because heroes.find could return undefined. – Shelly Chen Commented Aug 24, 2017 at 6:47
• @Shelly can you post your ponent code or where ever you called the getHero method. So it can help us to reproduce your error. – Rajez Commented Aug 24, 2017 at 7:09
• @Rajez thank you. I added. – Shelly Chen Commented Aug 24, 2017 at 7:12

1 Answer 1

The reason typescript throws this error is because Array.find will return undefined when all elements don't matched the condition hero.id === id.

Refer doc about 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.

To avoid the error, you should change your function's return type to 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));
}