Slide 1

Slide 1 text

AngularJS + Typescript === <3

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

OK Typescript

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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);

Slide 11

Slide 11 text

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);

Slide 12

Slide 12 text

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); } } }

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Un peu de code ?

Slide 17

Slide 17 text

OK Typescript what’s wrong with you ?

Slide 18

Slide 18 text

OK Typescript what’s wrong with you ?

Slide 19

Slide 19 text

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