AngularJS + Typescript === <3

My presentation @ngparis on angular + typescript

Transcript

1. AngularJS + Typescript === <3
   

   View Slide

2. Me Myself & I
   Paul Souche
   Développeur Front-end
   @
   @paulsouche
   https://github.com/paulsouche
   

   View Slide

3. JavaScript types...
   NaN === NaN //false
   0.1 + 0.2 === 0.3 //false
   '' == [] //true
   '' //false, [] true
   [] + [] --> ''
   {} + [] --> '[object Object]'
   [] + {} --> 0
   {} + {} --> NaN
   ...
   

   View Slide

4. JavaScript types...
   6 types
   “undefined”
   “boolean”
   “string”
   “number”
   “object”
   “function”
   6 falsy type
   undefined “undefined”
   false “boolean”
   ‘’ “string”
   0 “number”
   null “object”
   NaN “number”
   

   View Slide

5. in AngularJS
   You can use :
   ● isDefined
   ● isUndefined
   ● isString
   ● isNumber
   ● isObject
   ● isDate
   ● isArray
   ● isElement
   ● isFunction
   ● isPrototypeOf
   and...
   

   View Slide

6. Classes types
   methods :
   ● contructor
   ● toString.call()
   ● stackOverflow
   

   View Slide

7. Conclusion
   No strong typings in JavaScript
   and won’t be better in ES6
   

   View Slide

8. OK Typescript
   

   View Slide

9. OK Typescript how do you work ?
   function greeter(person: string) {
   return "Hello, " + person;
   }
   var user = "Jane User";
   var universalAnswer = 42;
   document.body.innerHTML = greeter(user);
   document.body.innerHTML = greeter(universalAnswer); //throw
   

   View Slide

10. OK Typescript how do I strong type ?
    interface Person {
    firstname: string;
    lastname: string;
    }
    function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
    }
    var user = {firstname: "Jane", lastname: "User"};
    document.body.innerHTML = greeter(user);
    

    View Slide

11. OK Typescript what about es6 classes ?
    class Student {
    fullname : string;
    constructor(public firstname, public middleinitial, public lastname) {
    this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
    }
    interface Person {
    firstname: string;
    lastname: string;
    }
    function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
    }
    var user = new Student("Jane", "M.", "User");
    document.body.innerHTML = greeter(user);
    

    View Slide

12. OK Typescript what about es6 modules ?
    module Validation {
    export interface StringValidator {
    isAcceptable(s: string): boolean;
    }
    var lettersRegexp = /^[A-Za-z]+$/;
    var numberRegexp = /^[0-9]+$/;
    export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
    return lettersRegexp.test(s);
    }
    }
    export class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
    return s.length === 5 && numberRegexp.test(s);
    }
    }
    }
    

    View Slide

13. OK Typescript how do I get the compiler ?
    npm install -g typescript
    

    View Slide

14. OK Typescript how do I watch my code ?
    lint :
    https://github.com/palantir/tslint
    https://github.com/palantir/grunt-tslint
    https://github.com/panuhorsmalahti/gulp-tslint
    compile :
    https://github.com/k-maru/grunt-typescript
    https://github.com/ivogabe/gulp-typescript
    

    View Slide

15. OK Typescript and my dependencies ?
    DefinitelyTyped Interfaces :
    ● AngularJS
    ● ng-route
    ● ng-resource
    ● ng-animate
    ● ng-cookies
    ● angular-ui-router & ui-bootstrap
    ● Underscore / Lodash / Jquery ...
    

    View Slide

16. Un peu de code ?
    

    View Slide

17. OK Typescript what’s wrong with you ?
    

    View Slide

18. OK Typescript what’s wrong with you ?
    

    View Slide

19. Q & A
    Special thanks :
    ng-paris
    David Rousset @Davrous
    L’équipe ADEO
    AngularJS 1.6.5
    You
    

    View Slide