docs(toh): add return types

closes 
This commit is contained in:
Jesús Rodríguez 2016-07-27 15:00:59 +02:00 committed by Ward Bell
parent fccb32d3f8
commit e9a41bac47
19 changed files with 87 additions and 56 deletions

@ -102,6 +102,8 @@ export class AppComponent {
// #enddocregion selected-hero // #enddocregion selected-hero
// #docregion on-select // #docregion on-select
onSelect(hero: Hero) { this.selectedHero = hero; } onSelect(hero: Hero): void {
this.selectedHero = hero;
}
// #enddocregion on-select // #enddocregion on-select
} }

@ -89,5 +89,7 @@ export class AppComponent {
heroes = HEROES; heroes = HEROES;
selectedHero: Hero; selectedHero: Hero;
onSelect(hero: Hero) { this.selectedHero = hero; } onSelect(hero: Hero): void {
this.selectedHero = hero;
}
} }

@ -7,7 +7,7 @@ import { Component } from '@angular/core';
import { Hero } from './hero'; import { Hero } from './hero';
// #docregion hero-service-import // #docregion hero-service-import
import { HeroService } from './hero.service.1'; import { HeroService } from './hero.service.2';
// #enddocregion hero-service-import // #enddocregion hero-service-import
// Testable but never shown // Testable but never shown
@ -41,7 +41,7 @@ export class AppComponent implements OnInit {
constructor(private heroService: HeroService) { } constructor(private heroService: HeroService) { }
// #enddocregion ctor // #enddocregion ctor
// #docregion getHeroes // #docregion getHeroes
getHeroes() { getHeroes(): void {
// #docregion get-heroes // #docregion get-heroes
this.heroes = this.heroService.getHeroes(); this.heroes = this.heroService.getHeroes();
// #enddocregion get-heroes // #enddocregion get-heroes
@ -50,7 +50,7 @@ export class AppComponent implements OnInit {
// #docregion ng-on-init // #docregion ng-on-init
// #docregion on-init // #docregion on-init
ngOnInit() { ngOnInit(): void {
// #enddocregion on-init // #enddocregion on-init
this.getHeroes(); this.getHeroes();
// #docregion on-init // #docregion on-init
@ -58,6 +58,8 @@ export class AppComponent implements OnInit {
// #enddocregion on-init // #enddocregion on-init
// #enddocregion ng-on-init // #enddocregion ng-on-init
onSelect(hero: Hero) { this.selectedHero = hero; } onSelect(hero: Hero): void {
this.selectedHero = hero;
}
// #docregion on-init // #docregion on-init
} }

@ -82,14 +82,16 @@ export class AppComponent implements OnInit {
constructor(private heroService: HeroService) { } constructor(private heroService: HeroService) { }
// #docregion get-heroes // #docregion get-heroes
getHeroes() { getHeroes(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes); this.heroService.getHeroes().then(heroes => this.heroes = heroes);
} }
// #enddocregion get-heroes // #enddocregion get-heroes
ngOnInit() { ngOnInit(): void {
this.getHeroes(); this.getHeroes();
} }
onSelect(hero: Hero) { this.selectedHero = hero; } onSelect(hero: Hero): void {
this.selectedHero = hero;
}
} }

@ -1,6 +1,6 @@
// #docplaster // #docplaster
// #docregion // #docregion
// #docregion empty-class // #docregion empty-class, full
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
// #enddocregion empty-class // #enddocregion empty-class
@ -9,11 +9,16 @@ import { HEROES } from './mock-heroes';
// #docregion empty-class, getHeroes-stub // #docregion empty-class, getHeroes-stub
@Injectable() @Injectable()
export class HeroService { export class HeroService {
// #enddocregion empty-class // #enddocregion empty-class, getHeroes-stub, full
getHeroes() { /*
// #enddocregion getHeroes-stub // #docregion getHeroes-stub
return HEROES; getHeroes(): void {
// #docregion getHeroes-stub
} }
// #docregion empty-class // #enddocregion getHeroes-stub
*/
// #docregion full
getHeroes(): Hero[] {
return HEROES;
}
// #docregion empty-class, getHeroes-stub
} }

@ -0,0 +1,13 @@
// #docregion
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
getHeroes(): Hero[] {
return HEROES;
}
}

@ -9,14 +9,14 @@ import { HEROES } from './mock-heroes';
@Injectable() @Injectable()
export class HeroService { export class HeroService {
// #docregion get-heroes // #docregion get-heroes
getHeroes() { getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES); return Promise.resolve(HEROES);
} }
// #enddocregion get-heroes, just-get-heroes // #enddocregion get-heroes, just-get-heroes
// #enddocregion // #enddocregion
// See the "Take it slow" appendix // See the "Take it slow" appendix
// #docregion get-heroes-slowly // #docregion get-heroes-slowly
getHeroesSlowly() { getHeroesSlowly(): Promise<Hero[]> {
return new Promise<Hero[]>(resolve => return new Promise<Hero[]>(resolve =>
setTimeout(() => resolve(HEROES), 2000) // 2 seconds setTimeout(() => resolve(HEROES), 2000) // 2 seconds
); );

@ -17,10 +17,10 @@ export class DashboardComponent implements OnInit {
constructor(private heroService: HeroService) { } constructor(private heroService: HeroService) { }
ngOnInit() { ngOnInit(): void {
this.heroService.getHeroes() this.heroService.getHeroes()
.then(heroes => this.heroes = heroes.slice(1, 5)); .then(heroes => this.heroes = heroes.slice(1, 5));
} }
gotoDetail(hero: Hero) { /* not implemented yet */} gotoDetail(hero: Hero): void { /* not implemented yet */}
} }

@ -29,13 +29,13 @@ export class DashboardComponent implements OnInit {
} }
// #enddocregion ctor // #enddocregion ctor
ngOnInit() { ngOnInit(): void {
this.heroService.getHeroes() this.heroService.getHeroes()
.then(heroes => this.heroes = heroes.slice(1, 5)); .then(heroes => this.heroes = heroes.slice(1, 5));
} }
// #docregion gotoDetail // #docregion gotoDetail
gotoDetail(hero: Hero) { gotoDetail(hero: Hero): void {
let link = ['/detail', hero.id]; let link = ['/detail', hero.id];
this.router.navigate(link); this.router.navigate(link);
} }

@ -16,7 +16,7 @@ import { HeroService } from './hero.service';
}) })
// #docregion implement // #docregion implement
export class HeroDetailComponent implements OnInit { export class HeroDetailComponent implements OnInit {
// #enddocregion implement // #enddocregion implement
hero: Hero; hero: Hero;
// #docregion ctor // #docregion ctor
@ -27,7 +27,7 @@ export class HeroDetailComponent implements OnInit {
// #enddocregion ctor // #enddocregion ctor
// #docregion ngOnInit // #docregion ngOnInit
ngOnInit() { ngOnInit(): void {
this.route.params.forEach((params: Params) => { this.route.params.forEach((params: Params) => {
let id = +params['id']; let id = +params['id'];
this.heroService.getHero(id) this.heroService.getHero(id)
@ -37,7 +37,7 @@ export class HeroDetailComponent implements OnInit {
// #enddocregion ngOnInit // #enddocregion ngOnInit
// #docregion goBack // #docregion goBack
goBack() { goBack(): void {
window.history.back(); window.history.back();
} }
// #enddocregion goBack // #enddocregion goBack

@ -6,19 +6,19 @@ import { Injectable } from '@angular/core';
@Injectable() @Injectable()
export class HeroService { export class HeroService {
getHeroes() { getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES); return Promise.resolve(HEROES);
} }
// See the "Take it slow" appendix // See the "Take it slow" appendix
getHeroesSlowly() { getHeroesSlowly(): Promise<Hero[]> {
return new Promise<Hero[]>(resolve => return new Promise<Hero[]>(resolve =>
setTimeout(() => resolve(HEROES), 2000) // 2 seconds setTimeout(() => resolve(HEROES), 2000) // 2 seconds
); );
} }
// #docregion getHero // #docregion getHero
getHero(id: number) { getHero(id: number): Promise<Hero> {
return this.getHeroes() return this.getHeroes()
.then(heroes => heroes.find(hero => hero.id === id)); .then(heroes => heroes.find(hero => hero.id === id));
} }

@ -25,17 +25,19 @@ export class HeroesComponent implements OnInit {
private router: Router, private router: Router,
private heroService: HeroService) { } private heroService: HeroService) { }
getHeroes() { getHeroes(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes); this.heroService.getHeroes().then(heroes => this.heroes = heroes);
} }
ngOnInit() { ngOnInit(): void {
this.getHeroes(); this.getHeroes();
} }
onSelect(hero: Hero) { this.selectedHero = hero; } onSelect(hero: Hero): void {
this.selectedHero = hero;
}
gotoDetail() { gotoDetail(): void {
this.router.navigate(['/detail', this.selectedHero.id]); this.router.navigate(['/detail', this.selectedHero.id]);
} }
// #docregion renaming // #docregion renaming

@ -19,12 +19,12 @@ export class DashboardComponent implements OnInit {
private heroService: HeroService) { private heroService: HeroService) {
} }
ngOnInit() { ngOnInit(): void {
this.heroService.getHeroes() this.heroService.getHeroes()
.then(heroes => this.heroes = heroes.slice(1, 5)); .then(heroes => this.heroes = heroes.slice(1, 5));
} }
gotoDetail(hero: Hero) { gotoDetail(hero: Hero): void {
let link = ['/detail', hero.id]; let link = ['/detail', hero.id];
this.router.navigate(link); this.router.navigate(link);
} }

@ -27,7 +27,7 @@ export class HeroDetailComponent implements OnInit {
} }
// #docregion ngOnInit // #docregion ngOnInit
ngOnInit() { ngOnInit(): void {
this.route.params.forEach((params: Params) => { this.route.params.forEach((params: Params) => {
if (params['id'] !== undefined) { if (params['id'] !== undefined) {
let id = +params['id']; let id = +params['id'];
@ -43,7 +43,7 @@ export class HeroDetailComponent implements OnInit {
// #enddocregion ngOnInit // #enddocregion ngOnInit
// #docregion save // #docregion save
save() { save(): void {
this.heroService this.heroService
.save(this.hero) .save(this.hero)
.then(hero => { .then(hero => {
@ -54,7 +54,7 @@ export class HeroDetailComponent implements OnInit {
} }
// #enddocregion save // #enddocregion save
// #docregion goBack // #docregion goBack
goBack(savedHero: Hero = null) { goBack(savedHero: Hero = null): void {
this.close.emit(savedHero); this.close.emit(savedHero);
if (this.navigated) { window.history.back(); } if (this.navigated) { window.history.back(); }
} }

@ -28,11 +28,13 @@ export class HeroSearchComponent implements OnInit {
// #docregion searchTerms // #docregion searchTerms
// Push a search term into the observable stream. // Push a search term into the observable stream.
search(term: string) { this.searchTerms.next(term); } search(term: string): void {
this.searchTerms.next(term);
}
// #enddocregion searchTerms // #enddocregion searchTerms
// #docregion search // #docregion search
ngOnInit() { ngOnInit(): void {
this.heroes = this.searchTerms this.heroes = this.searchTerms
.debounceTime(300) // wait for 300ms pause in events .debounceTime(300) // wait for 300ms pause in events
.distinctUntilChanged() // ignore if next search term is same as previous .distinctUntilChanged() // ignore if next search term is same as previous
@ -49,8 +51,8 @@ export class HeroSearchComponent implements OnInit {
} }
// #enddocregion search // #enddocregion search
gotoDetail(hero: Hero) { gotoDetail(hero: Hero): void {
let link = ['/detail', hero.id]; let link = ['/detail', hero.id];
this.router.navigate(link); this.router.navigate(link);
} }
} }

@ -1,6 +1,7 @@
// #docregion // #docregion
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http'; import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import { Hero } from './hero'; import { Hero } from './hero';
@ -9,7 +10,7 @@ export class HeroSearchService {
constructor(private http: Http) {} constructor(private http: Http) {}
search(term: string) { search(term: string): Observable<Hero[]> {
return this.http return this.http
.get(`app/heroes/?name=${term}`) .get(`app/heroes/?name=${term}`)
.map((r: Response) => r.json().data as Hero[]); .map((r: Response) => r.json().data as Hero[]);

@ -1,7 +1,7 @@
// #docplaster // #docplaster
// #docregion // #docregion
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http'; import { Headers, Http, Response } from '@angular/http';
// #docregion rxjs // #docregion rxjs
import 'rxjs/add/operator/toPromise'; import 'rxjs/add/operator/toPromise';
@ -17,7 +17,7 @@ export class HeroService {
constructor(private http: Http) { } constructor(private http: Http) { }
getHeroes() { getHeroes(): Promise<Hero[]> {
return this.http.get(this.heroesUrl) return this.http.get(this.heroesUrl)
// #docregion to-promise // #docregion to-promise
.toPromise() .toPromise()
@ -31,7 +31,7 @@ export class HeroService {
} }
// #enddocregion getHeroes // #enddocregion getHeroes
getHero(id: number) { getHero(id: number): Promise<Hero> {
return this.getHeroes() return this.getHeroes()
.then(heroes => heroes.find(hero => hero.id === id)); .then(heroes => heroes.find(hero => hero.id === id));
} }
@ -46,7 +46,7 @@ export class HeroService {
// #enddocregion save // #enddocregion save
// #docregion delete // #docregion delete
delete(hero: Hero) { delete(hero: Hero): Promise<Response> {
let headers = new Headers(); let headers = new Headers();
headers.append('Content-Type', 'application/json'); headers.append('Content-Type', 'application/json');
@ -75,7 +75,7 @@ export class HeroService {
// #docregion put // #docregion put
// Update existing Hero // Update existing Hero
private put(hero: Hero) { private put(hero: Hero): Promise<Hero> {
let headers = new Headers(); let headers = new Headers();
headers.append('Content-Type', 'application/json'); headers.append('Content-Type', 'application/json');
@ -90,7 +90,7 @@ export class HeroService {
// #enddocregion put // #enddocregion put
// #docregion handleError // #docregion handleError
private handleError(error: any) { private handleError(error: any): Promise<any> {
console.error('An error occurred', error); console.error('An error occurred', error);
return Promise.reject(error.message || error); return Promise.reject(error.message || error);
} }

@ -24,7 +24,7 @@ export class HeroesComponent implements OnInit {
private router: Router, private router: Router,
private heroService: HeroService) { } private heroService: HeroService) { }
getHeroes() { getHeroes(): void {
this.heroService this.heroService
.getHeroes() .getHeroes()
.then(heroes => this.heroes = heroes) .then(heroes => this.heroes = heroes)
@ -32,19 +32,19 @@ export class HeroesComponent implements OnInit {
} }
// #docregion addHero // #docregion addHero
addHero() { addHero(): void {
this.addingHero = true; this.addingHero = true;
this.selectedHero = null; this.selectedHero = null;
} }
close(savedHero: Hero) { close(savedHero: Hero): void {
this.addingHero = false; this.addingHero = false;
if (savedHero) { this.getHeroes(); } if (savedHero) { this.getHeroes(); }
} }
// #enddocregion addHero // #enddocregion addHero
// #docregion deleteHero // #docregion deleteHero
deleteHero(hero: Hero, event: any) { deleteHero(hero: Hero, event: any): void {
event.stopPropagation(); event.stopPropagation();
this.heroService this.heroService
.delete(hero) .delete(hero)
@ -56,16 +56,16 @@ export class HeroesComponent implements OnInit {
} }
// #enddocregion deleteHero // #enddocregion deleteHero
ngOnInit() { ngOnInit(): void {
this.getHeroes(); this.getHeroes();
} }
onSelect(hero: Hero) { onSelect(hero: Hero): void {
this.selectedHero = hero; this.selectedHero = hero;
this.addingHero = false; this.addingHero = false;
} }
gotoDetail() { gotoDetail(): void {
this.router.navigate(['/detail', this.selectedHero.id]); this.router.navigate(['/detail', this.selectedHero.id]);
} }
} }

@ -129,7 +129,7 @@ code-example(language="bash").
### Return Mocked Heroes ### Return Mocked Heroes
Back in the `HeroService` we import the mock `HEROES` and return it from the `getHeroes` method. Back in the `HeroService` we import the mock `HEROES` and return it from the `getHeroes` method.
Our `HeroService` looks like this: Our `HeroService` looks like this:
+makeExample('toh-4/ts/app/hero.service.1.ts', null, 'app/hero.service.ts')(format=".") +makeExample('toh-4/ts/app/hero.service.1.ts', 'full', 'app/hero.service.ts')(format=".")
:marked :marked
### Use the Hero Service ### Use the Hero Service
We're ready to use the `HeroService` in other components starting with our `AppComponent`. We're ready to use the `HeroService` in other components starting with our `AppComponent`.