From e9a41bac471399a783be3bffd10863cb7d01ee8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesu=CC=81s=20Rodri=CC=81guez?= Date: Wed, 27 Jul 2016 15:00:59 +0200 Subject: [PATCH] docs(toh): add return types closes #1983 --- .../_examples/toh-2/ts/app/app.component.ts | 4 +++- .../_examples/toh-3/ts/app/app.component.ts | 4 +++- .../_examples/toh-4/ts/app/app.component.1.ts | 10 ++++++---- .../_examples/toh-4/ts/app/app.component.ts | 8 +++++--- .../_examples/toh-4/ts/app/hero.service.1.ts | 19 ++++++++++++------- .../_examples/toh-4/ts/app/hero.service.2.ts | 13 +++++++++++++ .../_examples/toh-4/ts/app/hero.service.ts | 4 ++-- .../toh-5/ts/app/dashboard.component.2.ts | 4 ++-- .../toh-5/ts/app/dashboard.component.ts | 4 ++-- .../toh-5/ts/app/hero-detail.component.ts | 6 +++--- .../_examples/toh-5/ts/app/hero.service.ts | 6 +++--- .../toh-5/ts/app/heroes.component.ts | 10 ++++++---- .../toh-6/ts/app/dashboard.component.ts | 4 ++-- .../toh-6/ts/app/hero-detail.component.ts | 6 +++--- .../toh-6/ts/app/hero-search.component.ts | 10 ++++++---- .../toh-6/ts/app/hero-search.service.ts | 3 ++- .../_examples/toh-6/ts/app/hero.service.ts | 12 ++++++------ .../toh-6/ts/app/heroes.component.ts | 14 +++++++------- public/docs/ts/latest/tutorial/toh-pt4.jade | 2 +- 19 files changed, 87 insertions(+), 56 deletions(-) create mode 100644 public/docs/_examples/toh-4/ts/app/hero.service.2.ts diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts index 5d10fc55a9..3e7c86f150 100644 --- a/public/docs/_examples/toh-2/ts/app/app.component.ts +++ b/public/docs/_examples/toh-2/ts/app/app.component.ts @@ -102,6 +102,8 @@ export class AppComponent { // #enddocregion selected-hero // #docregion on-select - onSelect(hero: Hero) { this.selectedHero = hero; } + onSelect(hero: Hero): void { + this.selectedHero = hero; + } // #enddocregion on-select } diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts index fe5a5b98ad..022efc31eb 100644 --- a/public/docs/_examples/toh-3/ts/app/app.component.ts +++ b/public/docs/_examples/toh-3/ts/app/app.component.ts @@ -89,5 +89,7 @@ export class AppComponent { heroes = HEROES; selectedHero: Hero; - onSelect(hero: Hero) { this.selectedHero = hero; } + onSelect(hero: Hero): void { + this.selectedHero = hero; + } } diff --git a/public/docs/_examples/toh-4/ts/app/app.component.1.ts b/public/docs/_examples/toh-4/ts/app/app.component.1.ts index 5a0a4d0524..675c7a64d0 100644 --- a/public/docs/_examples/toh-4/ts/app/app.component.1.ts +++ b/public/docs/_examples/toh-4/ts/app/app.component.1.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; import { Hero } from './hero'; // #docregion hero-service-import -import { HeroService } from './hero.service.1'; +import { HeroService } from './hero.service.2'; // #enddocregion hero-service-import // Testable but never shown @@ -41,7 +41,7 @@ export class AppComponent implements OnInit { constructor(private heroService: HeroService) { } // #enddocregion ctor // #docregion getHeroes - getHeroes() { + getHeroes(): void { // #docregion get-heroes this.heroes = this.heroService.getHeroes(); // #enddocregion get-heroes @@ -50,7 +50,7 @@ export class AppComponent implements OnInit { // #docregion ng-on-init // #docregion on-init - ngOnInit() { + ngOnInit(): void { // #enddocregion on-init this.getHeroes(); // #docregion on-init @@ -58,6 +58,8 @@ export class AppComponent implements OnInit { // #enddocregion on-init // #enddocregion ng-on-init - onSelect(hero: Hero) { this.selectedHero = hero; } + onSelect(hero: Hero): void { + this.selectedHero = hero; + } // #docregion on-init } diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts index 00bee85659..b16acb8375 100644 --- a/public/docs/_examples/toh-4/ts/app/app.component.ts +++ b/public/docs/_examples/toh-4/ts/app/app.component.ts @@ -82,14 +82,16 @@ export class AppComponent implements OnInit { constructor(private heroService: HeroService) { } // #docregion get-heroes - getHeroes() { + getHeroes(): void { this.heroService.getHeroes().then(heroes => this.heroes = heroes); } // #enddocregion get-heroes - ngOnInit() { + ngOnInit(): void { this.getHeroes(); } - onSelect(hero: Hero) { this.selectedHero = hero; } + onSelect(hero: Hero): void { + this.selectedHero = hero; + } } diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts index 5a15d5c285..86c8aaadad 100644 --- a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts +++ b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion -// #docregion empty-class +// #docregion empty-class, full import { Injectable } from '@angular/core'; // #enddocregion empty-class @@ -9,11 +9,16 @@ import { HEROES } from './mock-heroes'; // #docregion empty-class, getHeroes-stub @Injectable() export class HeroService { - // #enddocregion empty-class - getHeroes() { - // #enddocregion getHeroes-stub - return HEROES; - // #docregion getHeroes-stub + // #enddocregion empty-class, getHeroes-stub, full + /* + // #docregion getHeroes-stub + getHeroes(): void { } - // #docregion empty-class + // #enddocregion getHeroes-stub + */ + // #docregion full + getHeroes(): Hero[] { + return HEROES; + } + // #docregion empty-class, getHeroes-stub } diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.2.ts b/public/docs/_examples/toh-4/ts/app/hero.service.2.ts new file mode 100644 index 0000000000..d14fe02410 --- /dev/null +++ b/public/docs/_examples/toh-4/ts/app/hero.service.2.ts @@ -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; + } +} diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.ts b/public/docs/_examples/toh-4/ts/app/hero.service.ts index 87eb9ec673..01272c1395 100644 --- a/public/docs/_examples/toh-4/ts/app/hero.service.ts +++ b/public/docs/_examples/toh-4/ts/app/hero.service.ts @@ -9,14 +9,14 @@ import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { // #docregion get-heroes - getHeroes() { + getHeroes(): Promise { return Promise.resolve(HEROES); } // #enddocregion get-heroes, just-get-heroes // #enddocregion // See the "Take it slow" appendix // #docregion get-heroes-slowly - getHeroesSlowly() { + getHeroesSlowly(): Promise { return new Promise(resolve => setTimeout(() => resolve(HEROES), 2000) // 2 seconds ); diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts index eaa39fb4b8..38decd2b50 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts @@ -17,10 +17,10 @@ export class DashboardComponent implements OnInit { constructor(private heroService: HeroService) { } - ngOnInit() { + ngOnInit(): void { this.heroService.getHeroes() .then(heroes => this.heroes = heroes.slice(1, 5)); } - gotoDetail(hero: Hero) { /* not implemented yet */} + gotoDetail(hero: Hero): void { /* not implemented yet */} } diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts index a56b724c95..3deb5bc2ec 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -29,13 +29,13 @@ export class DashboardComponent implements OnInit { } // #enddocregion ctor - ngOnInit() { + ngOnInit(): void { this.heroService.getHeroes() .then(heroes => this.heroes = heroes.slice(1, 5)); } // #docregion gotoDetail - gotoDetail(hero: Hero) { + gotoDetail(hero: Hero): void { let link = ['/detail', hero.id]; this.router.navigate(link); } diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts index 940b4493aa..5513904452 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts @@ -16,7 +16,7 @@ import { HeroService } from './hero.service'; }) // #docregion implement export class HeroDetailComponent implements OnInit { - // #enddocregion implement +// #enddocregion implement hero: Hero; // #docregion ctor @@ -27,7 +27,7 @@ export class HeroDetailComponent implements OnInit { // #enddocregion ctor // #docregion ngOnInit - ngOnInit() { + ngOnInit(): void { this.route.params.forEach((params: Params) => { let id = +params['id']; this.heroService.getHero(id) @@ -37,7 +37,7 @@ export class HeroDetailComponent implements OnInit { // #enddocregion ngOnInit // #docregion goBack - goBack() { + goBack(): void { window.history.back(); } // #enddocregion goBack diff --git a/public/docs/_examples/toh-5/ts/app/hero.service.ts b/public/docs/_examples/toh-5/ts/app/hero.service.ts index c0e987e7c9..67215fb228 100644 --- a/public/docs/_examples/toh-5/ts/app/hero.service.ts +++ b/public/docs/_examples/toh-5/ts/app/hero.service.ts @@ -6,19 +6,19 @@ import { Injectable } from '@angular/core'; @Injectable() export class HeroService { - getHeroes() { + getHeroes(): Promise { return Promise.resolve(HEROES); } // See the "Take it slow" appendix - getHeroesSlowly() { + getHeroesSlowly(): Promise { return new Promise(resolve => setTimeout(() => resolve(HEROES), 2000) // 2 seconds ); } // #docregion getHero - getHero(id: number) { + getHero(id: number): Promise { return this.getHeroes() .then(heroes => heroes.find(hero => hero.id === id)); } diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts index 49fcf10c17..da66bfa7af 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts @@ -25,17 +25,19 @@ export class HeroesComponent implements OnInit { private router: Router, private heroService: HeroService) { } - getHeroes() { + getHeroes(): void { this.heroService.getHeroes().then(heroes => this.heroes = heroes); } - ngOnInit() { + ngOnInit(): void { 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]); } // #docregion renaming diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts index 4a90a4d6bf..dd2e2ef2ce 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts @@ -19,12 +19,12 @@ export class DashboardComponent implements OnInit { private heroService: HeroService) { } - ngOnInit() { + ngOnInit(): void { this.heroService.getHeroes() .then(heroes => this.heroes = heroes.slice(1, 5)); } - gotoDetail(hero: Hero) { + gotoDetail(hero: Hero): void { let link = ['/detail', hero.id]; this.router.navigate(link); } diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts index 062917401e..4329f63a2c 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts @@ -27,7 +27,7 @@ export class HeroDetailComponent implements OnInit { } // #docregion ngOnInit - ngOnInit() { + ngOnInit(): void { this.route.params.forEach((params: Params) => { if (params['id'] !== undefined) { let id = +params['id']; @@ -43,7 +43,7 @@ export class HeroDetailComponent implements OnInit { // #enddocregion ngOnInit // #docregion save - save() { + save(): void { this.heroService .save(this.hero) .then(hero => { @@ -54,7 +54,7 @@ export class HeroDetailComponent implements OnInit { } // #enddocregion save // #docregion goBack - goBack(savedHero: Hero = null) { + goBack(savedHero: Hero = null): void { this.close.emit(savedHero); if (this.navigated) { window.history.back(); } } diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts index 25ada285ac..be071f0eba 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts @@ -28,11 +28,13 @@ export class HeroSearchComponent implements OnInit { // #docregion searchTerms // 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 // #docregion search - ngOnInit() { + ngOnInit(): void { this.heroes = this.searchTerms .debounceTime(300) // wait for 300ms pause in events .distinctUntilChanged() // ignore if next search term is same as previous @@ -49,8 +51,8 @@ export class HeroSearchComponent implements OnInit { } // #enddocregion search - gotoDetail(hero: Hero) { + gotoDetail(hero: Hero): void { let link = ['/detail', hero.id]; this.router.navigate(link); } -} +} \ No newline at end of file diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts index 95a31707eb..ae2e47670a 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts @@ -1,6 +1,7 @@ // #docregion import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; +import { Observable } from 'rxjs'; import { Hero } from './hero'; @@ -9,7 +10,7 @@ export class HeroSearchService { constructor(private http: Http) {} - search(term: string) { + search(term: string): Observable { return this.http .get(`app/heroes/?name=${term}`) .map((r: Response) => r.json().data as Hero[]); diff --git a/public/docs/_examples/toh-6/ts/app/hero.service.ts b/public/docs/_examples/toh-6/ts/app/hero.service.ts index 04012768be..21d036ad9e 100644 --- a/public/docs/_examples/toh-6/ts/app/hero.service.ts +++ b/public/docs/_examples/toh-6/ts/app/hero.service.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion import { Injectable } from '@angular/core'; -import { Headers, Http } from '@angular/http'; +import { Headers, Http, Response } from '@angular/http'; // #docregion rxjs import 'rxjs/add/operator/toPromise'; @@ -17,7 +17,7 @@ export class HeroService { constructor(private http: Http) { } - getHeroes() { + getHeroes(): Promise { return this.http.get(this.heroesUrl) // #docregion to-promise .toPromise() @@ -31,7 +31,7 @@ export class HeroService { } // #enddocregion getHeroes - getHero(id: number) { + getHero(id: number): Promise { return this.getHeroes() .then(heroes => heroes.find(hero => hero.id === id)); } @@ -46,7 +46,7 @@ export class HeroService { // #enddocregion save // #docregion delete - delete(hero: Hero) { + delete(hero: Hero): Promise { let headers = new Headers(); headers.append('Content-Type', 'application/json'); @@ -75,7 +75,7 @@ export class HeroService { // #docregion put // Update existing Hero - private put(hero: Hero) { + private put(hero: Hero): Promise { let headers = new Headers(); headers.append('Content-Type', 'application/json'); @@ -90,7 +90,7 @@ export class HeroService { // #enddocregion put // #docregion handleError - private handleError(error: any) { + private handleError(error: any): Promise { console.error('An error occurred', error); return Promise.reject(error.message || error); } diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts index e5c5ab1c49..b3d17549e8 100644 --- a/public/docs/_examples/toh-6/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts @@ -24,7 +24,7 @@ export class HeroesComponent implements OnInit { private router: Router, private heroService: HeroService) { } - getHeroes() { + getHeroes(): void { this.heroService .getHeroes() .then(heroes => this.heroes = heroes) @@ -32,19 +32,19 @@ export class HeroesComponent implements OnInit { } // #docregion addHero - addHero() { + addHero(): void { this.addingHero = true; this.selectedHero = null; } - close(savedHero: Hero) { + close(savedHero: Hero): void { this.addingHero = false; if (savedHero) { this.getHeroes(); } } // #enddocregion addHero // #docregion deleteHero - deleteHero(hero: Hero, event: any) { + deleteHero(hero: Hero, event: any): void { event.stopPropagation(); this.heroService .delete(hero) @@ -56,16 +56,16 @@ export class HeroesComponent implements OnInit { } // #enddocregion deleteHero - ngOnInit() { + ngOnInit(): void { this.getHeroes(); } - onSelect(hero: Hero) { + onSelect(hero: Hero): void { this.selectedHero = hero; this.addingHero = false; } - gotoDetail() { + gotoDetail(): void { this.router.navigate(['/detail', this.selectedHero.id]); } } diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade index 920be42806..73bf0c9407 100644 --- a/public/docs/ts/latest/tutorial/toh-pt4.jade +++ b/public/docs/ts/latest/tutorial/toh-pt4.jade @@ -129,7 +129,7 @@ code-example(language="bash"). ### Return Mocked Heroes Back in the `HeroService` we import the mock `HEROES` and return it from the `getHeroes` method. 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 ### Use the Hero Service We're ready to use the `HeroService` in other components starting with our `AppComponent`.