typescript - hata TS2339: 'HeroService' türünde 'handleError' özelliği yok Angular ile

Tamam millet, bu soru için üzgünüm, çünkü derlendiğinde Typescript hakkında zaten birkaç soru olduğunu biliyorum, ama ben noktaları birleştiremediğim bir tür bu sorunla karşılaşıyorum.

Angular Kahramanlar Turu uygulamasını takip etmeye çalışıyorum ve Http bölümü ile bitirmeye çalışıyorum, ancak hero.service.ts dosyam bu hatayı veriyor:

error TS2339: Property 'handleError' does not exist on type 'HeroService'

Buradaki diğer sorulardan bunun büyük olasılıkla Typescript'in nasıl yapılandırıldığıyla ilgili olduğunu biliyorum, ancak bu sorunun tutarlı bir nedeni görünmüyor.

Sorunu kendi başıma çözebilecek kadar Typescript (veya Angular) tuhaflıklarına yeterince aşina değilim.

Şu anda kodum şöyle görünüyor:

KOD:

import { Injectable }      from '@angular/core';
import { Headers, Http }   from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Hero }            from './hero';


@Injectable()
export class HeroService {
private heroesUrl: 'app/heroes'; //URL to web api

constructor(private http: Http) { }

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
        .toPromise()
        .then(response => response.json().data as Hero[])
        .catch(this.handleError);
}

getHeroesSlowly(): Promise<Hero[]> {
    return new Promise<Hero[]>(resolve =>
        setTimeout(resolve, 2000))
        .then(() => this.getHeroes());
}

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

Hata mesajının 'HeroService' üzerinde özelliği bulamıyor diye belirtmesi beni biraz şaşırttı; bu, program içinde oluşturulmuş bir sınıf ve Typescript'in bir parçası değil.

systemjs.config.js dosyam şöyle görünüyor:

SYSTEMJS.YAPILANDIRMA:

/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',
  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  // other libraries
  'rxjs':                       'npm:rxjs',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  }
}
});
})(this);

package.json dosyam şöyle görünüyor:

PACKAGE.JSON:

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings":"^1.3.2"
}
}

Eğer bu soru, ben görmediğim bu sorunun başka bir sürümünün tekrarıysa, beni ona yönlendirmekten çekinmeyin.

Teşekkür ederim.

Cevap #1

ToH eğitiminde, HTTP bölümündeki "Hata Yönetimi" kısmında bir şekilde "bahsedilmişti". Ancak, bu kod kısmını "hero.service.ts" dosyanıza eklemeniz gerektiği gerçekten net değildi (en azından metni tamamen okumama eğilimindeyseniz):

private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
 }

Bunu sadece HeroService sınıfının altına ekledim ve her şey çalıştı. Umarım senin için de işe yarar :).

Cevap #2

Özellik 'handleError', 'HeroService' türünde mevcut değil

Fonksiyonlar aynı zamanda özelliklerdir.

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
        .toPromise()
        .then(response => response.json().data as Hero[])
        .catch(this.handleError);  <=== Where is this? Not in HeroService
}

HeroService sınıfında bir handleError yöntemi tanımlamanız gerekiyor

handleError(error) {
  // do something with error
}

Görünüşe göre bu eğitimin bu kısmını kaçırmışsınız :-)

İlgili makaleler