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

Question

我遇到错误

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.

代码不会编译运行，这个错误在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");
                }
            }
        );
    }
}

模拟英雄.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;
}

从getHeroIds 中删除Promise<Hero[]> 部分只是导致

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() 是 ES2016 规范 (link) 的一部分。你必须在 TypeScript 的编译中包含这个库。在你的tsconfig.json 添加

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

它应该可以工作。

Answer 2

你用的是什么浏览器？

查看 Can I Use 网站，我发现这种方法在少数浏览器中实现，例如 Chrome 和 Opera。

看到这个：http://caniuse.com/#search=includes

我认为只是你使用了一种你的浏览器还不了解的方法。

为了解决您的问题，请使用find 而不是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 3

与您的代码、承诺或 Angular 无关。 Typescript 有以下观点：

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

该属性肯定存在于 my 数组类型上；你必须调查为什么它不在你的身上。

编辑： 啊，Sasxa's answer 解释了原因以及如何解决它。

Answer 4

Angular 2 how to return array of objects from nested promise 的幸运命中显示一个使用“”的人。这解决了我的问题，代码又可以工作了

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