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. Angular(あるいはNestJS)
    ではじめるTypeScript
    Fukuoka JS #8

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Component
    @Component({
    selector: 'app-root',
    template: `Hello, {{ title }} !`,
    })
    export class AppComponent {
    title = 'Angular';
    }
    15

    View full-size slide

  12. Decorator
    16
    @Component({
    selector: 'app-sample',
    template: `Hello, {{ title }} !`,
    })
    export class SampleComponent {
    title = 'Angular';
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. for backend?
    23

    View full-size slide

  20. 24
    https://nestjs.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide