Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularではじめるTypeScript

 AngularではじめるTypeScript

puku0x

May 15, 2019
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. 3

  2. 7

  3. Angular A platform for building modern Web Apps • Move

    faster • Scale better • Reach further https://angular.io/ 9
  4. 10 Angular Protractor Forms PWA Augury Language Services Router Elements

    CDK Universal Karma Labs Compiler i18n Http Material Animations CLI Angular products
  5. 11

  6. Type safety 12 function add(a: number, b: number) { return

    a + b; } add(1, 2); // 3 add(1, '2'); // Argument of type '"2"' is not assignable to parameter of type 'number'.
  7. Interfaces 13 export interface Todo { id: number; text: string;

    enabled: boolean; } export interface OnInit { ngOnInit(): void; }
  8. Example: Life cycle hooks 14 @Component({...}) export class AppComponent implements

    OnInit, OnDestroy { ngOnInit() {...} ngOnDestroy() {...} }
  9. Component @Component({ selector: 'app-root', template: `<p>Hello, {{ title }} !</p>`,

    }) export class AppComponent { title = 'Angular'; } 15
  10. Decorator 16 @Component({ selector: 'app-sample', template: `<p>Hello, {{ title }}

    !</p>`, }) export class SampleComponent { title = 'Angular'; }
  11. Generics 19 @Component({ selector: 'app-button', template: ` <button (click)="clickButton.emit(true)">Click</button> `

    }) export class SampleComponent { @Output() clickButton = new EventEmitter<boolean>(); }
  12. Example: Dependency injection 20 @Injectable() export class UserService { constructor(private

    http: HttpClient) {} fetchUsers() { return this.http.get<User[]>('/users'); } }
  13. Example: RxJS 21 const a: Todo = { id: 1,

    text: 'aaa', enabled: false }; const b: Todo = { id: 2, text: 'bbb', enabled: true }; const todos$ = from([a, b]); // Observable<Todo> todos$.pipe( filter(todo => todo.enabled), map(todo => todo.text) ).subscribe(text => console.log(text)); // 'bbb'
  14. 25