BBL TypeScript

Transcript

1. Emmanuel DEMEY - Zenika Lille - @EmmanuelDemey BBL TypeScript
2. Emmanuel DEMEY Consultant Formateur Web Zenika Lille
9. Introduction • Langage créé par Anders Hejlsberg en 2012 • Projet open-source maintenu par Microsoft (Version actuelle 1.8) • Phase de compilation nécessaire pour générer du JavaScript • Tout programme JavaScript est un programme TypeScript • Support d'ES3 / ES5 / ES2015 • Alternatives : CoffeeScript, Dart ou Flow • Certaines fonctionnalités n'ont aucun impact sur le JavaScript généré
10. Introduction
11. Par où commencer ?
12. Par où commencer ?
14. npm i -g typescript tsc dog.ts
15. --declaration --module --project --target --watch -- charset --diagnostics --emitBOM -- emitDecoratorMetadata --experimentalDecorators -- inlineSourceMap --inlineSources --isolatedModules --jsx --reactNamespace --locale --mapRoot -- moduleResolution --newLine --noEmit --noEmitError --noEmitHelpers --noImplicityAny --noLib -- noResolve --outDir --outFile --preserveConsEnums -- removeComments --rootDir --sourceMap -- sourceRoot --stripInternal --allowJs
16. npm i -g typescript tsc --init
17. { "compilerOptions": { "module": "commonjs", "target": "es3", "noImplicitAny": false, "outDir": "built", "rootDir": ".", "sourceMap": false }, "exclude": [ "node_modules" ] }
18. var gulp = require('gulp'), typescript = require('gulp-typescript'), uglify = require('gulp-uglify'), tsProject = ts.createProject(’tsconfig.json'); gulp.task('typescript', function() { gulp.src('src/**/*.ts') .pipe(typescript(tsProject)) .pipe(uglify()) .pipe(gulp.dest('dist/')); });
19. Je veux écrire du TS !!!
20. //hello.js function sayHello(){ console.log(‘Hello Axa!’); }
21. //hello.jsts function sayHello(){ console.log(‘Hello Axa!’); }
22. Introduction
23. Fonctionnalités • Toutes les fonctionnalités ES2015 • Types • Inférence de Types • Interfaces • scopes private / protected / public • Décorateurs • Génériques • Fichier de Définitions • Enum • Méthodes statiques • Type Union
24. import {Animal} from ‘./animal’ class Cat extends Animal{ constructor(nom = ‘kitten’) { super(nom); } parle() { console.log(this.nom + ' fait miaou.'); } }
25. import {AnimalI} from ‘./animal’ class Cat implements AnimalI{ private toys:List<Toy>; constructor(public nom:string = ‘kitten’) { } @log parle():void { console.log(this.nom + ' fait miaou.'); } }
26. Et son intégration...
28. typings tsd
29. npm i -g typings typings init typings install angular --ambient
30. Fichier de Définition AngularJS interface IHttpService { get<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>; delete<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>; head<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>; jsonp<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>; post<T>(url: string, data: any, config?: IRequestShortcutConfig): IHttpPromise<T>; put<T>(url: string, data: any, config?: IRequestShortcutConfig): IHttpPromise<T>; patch<T>(url: string, data: any, config?: IRequestShortcutConfig): IHttpPromise<T>; }
31. Utiliser TypeScript avec AngularJS angular.module(‘mod’).service(‘UserService’, UserService); class UserService { constructor(private $http:ng.IHttpService) {} getUsers():ng.IHttpPromise<User>{ return this.$http.get(‘/api/users’); } }
32. TypeScript 1.7 / 1.8
33. TypeScript > 1.7 • async / await • le type this • ES2016 Exponentiation operator • Support des décorateurs en ES3 • Amélioration des type guards • --allowJs • String literal types
34. Questions ?
35. Merci à tous