解决promise angular2：类型“ []”上不存在属性“ includes”

Question

I am getting error

app/hero-detail.component.ts(44,29): error TS2339: Property 'includes' does not exist on type '[]'.
app/hero.service.ts(25,25): error TS1122: A tuple type element list cannot be empty.

the code will not compile and run, this error is on npm start .

hero.service.ts:

import { Injectable } from '@angular/core';

import { Hero, HeroIds } from './hero';
import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService {

  getHeroes(): Promise<Hero[]> {
    return Promise.resolve(HEROES);
  }

  getHero(id: number): Promise<Hero> {
    return this.getHeroes()
        .then(heroes => heroes.find(hero => hero.id === id));
  }

  getHeroesSlowly(): Promise<Hero[]> {
    return new Promise(resolve => {
      // Simulate server latency with 2 second delay
      setTimeout(() => resolve(this.getHeroes()), 2000);
    });
  }

  getHeroIds(): Promise<[]> {
    return this.getHeroes()
    .then(heroes => heroes.map(function(item) { return item.id; }));
  }
}

hero-detail.component.ts:

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Location } from '@angular/common';

import 'rxjs/add/operator/switchMap';
import { FlashMessagesService } from 'angular2-flash-messages';

import { Hero, HeroIds }         from './hero';
import { HeroService } from './hero.service';


@Component({
  moduleId: module.id,
  selector: 'my-hero-detail',
  templateUrl: './static/templates/hero-detail.component.html',
  styleUrls: ['./static/css/hero-detail.component.css'],
})
export class HeroDetailComponent implements OnInit {
    @Input() hero: Hero;
    hero_ids: Array<HeroIds> = [];

    constructor(
        private heroService: HeroService,
        private route: ActivatedRoute,
        private location: Location,
        private router: Router,
        private _flashMessagesService: FlashMessagesService
    ) { }

    ngOnInit(): void {
        this.route.params
            .switchMap((params: Params) => this.heroService.getHero(+params['id']))
            .subscribe(hero => this.hero = hero);
    }

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

    gotoDetail(hero_id: string): void {
        this.heroService.getHeroIds()
        .then(
            result => {
                if ( result.includes(+hero_id) ) {
                    this.router.navigate(['/detail', hero_id]);
                } else {
                    this._flashMessagesService.show("Please pick a valid hero ID");
                }
            }
        );
    }
}

mock-heroes.ts:

import { Hero } from './hero';

export const HEROES: Hero[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];

hero.ts:

export class Hero {
  id: number;
  name: string;
}

export class HeroIds {
    id: number;
}

Removing the Promise<Hero[]> part from getHeroIds just causes

app/hero.service.ts(19,5): error TS1131: Property or signature expected.
app/hero.service.ts(23,3): error TS1128: Declaration or statement expected.
app/hero.service.ts(25,15): error TS1005: ';' expected.
app/hero.service.ts(26,12): error TS1005: ':' expected.
app/hero.service.ts(27,68): error TS1005: ',' expected.
app/hero.service.ts(29,1): error TS1128: Declaration or statement expected.

Answer 1

Array.prototype.includes() is part of ES2016 specification ( link ). You have to include this library in TypeScript's compilation. In your tsconfig.json add

"compilerOptions": {
  "lib": [ "es2016" ]
}

and it should work.

Answer 2

Nothing to do with your code, promises, or Angular. Typescript has the following opinion:

app/hero-detail.component.ts(44,29): error TS2339: Property 'includes' 
does not exist on type '[]'.

That property certainly exists on my Array type; you'll have to investigate why it doesn't on yours.

Edit : Ah, Sasxa's answer explains why, and how to fix it.

Answer 3

Which browser are you using?

Looking at the Can I Use site I see that this method is implemented in few browsers, like Chrome and Opera.

See this: http://caniuse.com/#search=includes

I think is just that you are using a method that your browser does not understant yet.

For solving your problem, use find instead includes :

gotoDetail(hero_id: string): void {
    this.heroService.getHeroIds()
    .then(
        result => {
            if ( result.find(+hero_id) ) {
                this.router.navigate(['/detail', hero_id]);
            } else {
                this._flashMessagesService.show("Please pick a valid hero ID");
            }
        }
    );
}

Answer 4

A lucky hit on Angular 2 how to return array of objects from nested promise shows a guy using '< any >'. This solved my problem, code is working again

 getHeroIds(): Promise<any> {
    return this.getHeroes()
    .then(heroes => heroes.map(function(item) { return item.id; }));
  }
}