title: TS2322: Type 'Promise<Hero | undefined>' is not assignable to type 'Promise<Hero>'
body: <p>I'm learning angular4 from <a href="https://angular.io/tutorial/toh-pt5" rel="nofollow noreferrer">angular tutorial</a>.
  Below is a function to get a hero from service's function:</p>
  
  <pre><code>@Injectable()
  export class HeroService {
      getHeroes(): Promise&lt;Hero[]&gt; {
  
          return new Promise(resolve =&gt; {
              // Simulate server latency with 2 second delay
              setTimeout(() =&gt; resolve(HEROES), 2000);
          });
      }
  
      getHero(id: number): Promise&lt;Hero&gt; {
  
          if (id &lt; 0) {
              throw new Error('Hero is not found.');
          }
          return this.getHeroes()
              .then(heroes =&gt; heroes.find(hero =&gt; hero.id === id));
      }
  }
  </code></pre>
  
  <p>On execution it throws error:</p>
  
  <pre><code>TS2322: Type 'Promise&lt;Hero | undefined&gt;' is not assignable to type 'Promise&lt;Hero&gt;'.
  Type 'Hero | undefined' is not assignable to type 'Hero'.
  Type 'undefined' is not assignable to type 'Hero'.
  </code></pre>
  
  <p>Anybody else also faced this issue ? Please help.
  Thank you.</p>
  
  <pre><code>@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) =&gt; this.heroService.getHero(+(params.get('id') || -1)))
              .subscribe(hero =&gt; this.hero = hero);
      }
  
      goBack(): void {
          this.location.back();
      }
  }
  </code></pre>