Angular（あるいはNestJS） ではじめるTypeScript Fukuoka JS #8

Noriyuki Shinpuku ng-fukuoka organizer @puku0x 2 VEGA corporation Co., Ltd.

3

TypeScript ● Superset of JavaScript ● Type safety ● Strong tools 4 TypeScript ES201x ES5

5 https://speakerdeck.com/pirosikick/the-state-of-javascript-in-fecf-2018-number-fec-fukuoka

6 https://2018.stateofjs.com/javascript-flavors/typescript/

7

8 Angular

Angular A platform for building modern Web Apps ● Move faster ● Scale better ● Reach further https://angular.io/ 9

10 Angular Protractor Forms PWA Augury Language Services Router Elements CDK Universal Karma Labs Compiler i18n Http Material Animations CLI Angular products

11

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'.

Interfaces 13 export interface Todo { id: number; text: string; enabled: boolean; } export interface OnInit { ngOnInit(): void; }

Example: Life cycle hooks 14 @Component({...}) export class AppComponent implements OnInit, OnDestroy { ngOnInit() {...} ngOnDestroy() {...} }

Component @Component({ selector: 'app-root', template: `

Hello, {{ title }} !

`, }) export class AppComponent { title = 'Angular'; } 15

Decorator 16 @Component({ selector: 'app-sample', template: `

Hello, {{ title }} !

`, }) export class SampleComponent { title = 'Angular'; }

tsconfig.json 17 { "compilerOptions": { "target": "es5", "experimentalDecorators": true } }

Decorators 18 ● @Component ● @Directive ● @Pipe ● @Injectable ● @Input / @Output

Generics 19 @Component({ selector: 'app-button', template: ` Click ` }) export class SampleComponent { @Output() clickButton = new EventEmitter(); }

Example: Dependency injection 20 @Injectable() export class UserService { constructor(private http: HttpClient) {} fetchUsers() { return this.http.get('/users'); } }

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 todos$.pipe( filter(todo => todo.enabled), map(todo => todo.text) ).subscribe(text => console.log(text)); // 'bbb'

22 https://next.angular.io/getting-started

for backend? 23

24 https://nestjs.com

25

Controller 26 @Controller('cats') export class CatsController { @Get() findAll(): string { return 'This action returns all cats'; } }

Entity (TypeORM) 27 @Entity() export class Photo { @PrimaryGeneratedColumn() id: number; @Column({ length: 500 }) name: string; }

@puku0x Noriyuki Shinpuku ng-fukuoka organizer Thank you! 28