AngularではじめるTypeScript

FukuokaJS #8
https://fukuokajs.connpass.com/event/129155/

Transcript

1. Angular（あるいはNestJS） ではじめるTypeScript Fukuoka JS #8
2. Noriyuki Shinpuku ng-fukuoka organizer @puku0x 2 VEGA corporation Co., Ltd.
4. TypeScript • Superset of JavaScript • Type safety • Strong tools 4 TypeScript ES201x ES5
5. 5 https://speakerdeck.com/pirosikick/the-state-of-javascript-in-fecf-2018-number-fec-fukuoka
6. 6 https://2018.stateofjs.com/javascript-flavors/typescript/
8. 8 Angular
9. Angular A platform for building modern Web Apps • Move faster • Scale better • Reach further https://angular.io/ 9
10. 10 Angular Protractor Forms PWA Augury Language Services Router Elements CDK Universal Karma Labs Compiler i18n Http Material Animations CLI Angular products
12. 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'.
13. Interfaces 13 export interface Todo { id: number; text: string; enabled: boolean; } export interface OnInit { ngOnInit(): void; }
14. Example: Life cycle hooks 14 @Component({...}) export class AppComponent implements OnInit, OnDestroy { ngOnInit() {...} ngOnDestroy() {...} }
15. Component @Component({ selector: 'app-root', template: `<p>Hello, {{ title }} !</p>`, }) export class AppComponent { title = 'Angular'; } 15
16. Decorator 16 @Component({ selector: 'app-sample', template: `<p>Hello, {{ title }} !</p>`, }) export class SampleComponent { title = 'Angular'; }
17. tsconfig.json 17 { "compilerOptions": { "target": "es5", "experimentalDecorators": true } }
18. Decorators 18 • @Component • @Directive • @Pipe • @Injectable • @Input / @Output
19. Generics 19 @Component({ selector: 'app-button', template: ` <button (click)="clickButton.emit(true)">Click</button> ` }) export class SampleComponent { @Output() clickButton = new EventEmitter<boolean>(); }
20. Example: Dependency injection 20 @Injectable() export class UserService { constructor(private http: HttpClient) {} fetchUsers() { return this.http.get<User[]>('/users'); } }
21. 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'
22. 22 https://next.angular.io/getting-started
23. for backend? 23
24. 24 https://nestjs.com
26. Controller 26 @Controller('cats') export class CatsController { @Get() findAll(): string { return 'This action returns all cats'; } }
27. Entity (TypeORM) 27 @Entity() export class Photo { @PrimaryGeneratedColumn() id: number; @Column({ length: 500 }) name: string; }
28. @puku0x Noriyuki Shinpuku ng-fukuoka organizer Thank you! 28