#experiences18 TypeScript: Why? When? How? Félix Billon (DCube) Sylvain PONTOREAU (Microsoft)

#experiences18 Microsoft experiences18 Jeu-concours Twitter Un pack Surface Go à gagner* ! *Voir toutes les conditions dans le règlement lié au jeu concours  Le tweet cumulant le plus de Retweets remporte la Surface Go (1 lot/jour) 1 Prenez une photo de la session à laquelle vous participez 2 Ajoutez #experienceslive et #experiences18 à votre tweet 3 Partagez ! #experienceslive 1 2 3

#experiences18 Microsoft experiences18 Félix Billon Tech Lead @felix_billon Vos speakers pour cette session! Sylvain Pontoreau Premier Field Engineer @spontoreau

#experiences18 Microsoft experiences18 Meetup- Paris TypeScript #experiences18 @ParisTypeScript

#experiences18 Microsoft experiences18 Sommaire ## Introduction ## Typage ## Spécificités du langage ## Fonctionnement interne ## De JavaScript à TypeScript ## Conclusion #experiences18

#experiences18 Microsoft experiences18 Introduction

#experiences18 Microsoft experiences18 Le commencement • Octobre 2012 : preview. • Avril 2014 : release 1.0.

#experiences18 Microsoft experiences18 Le renouveau • Fin 2014 : Annonce d'AtScript. • Mars 2015 : Angular 2 sera finalement basé sur TypeScript. • Septembre 2016 : TypeScript 2.0 !

#experiences18 Microsoft experiences18 Où en est-on aujourd'hui ? Popularité Github npm Stackoverflow

#experiences18 Microsoft experiences18 TypeScript dans le monde open source Visual Studio Code Angular Ionic / Stencil rxjs NativeScript TensorFlow.js NestJS vue.js En cours

#experiences18 Microsoft experiences18 TypeScript chez Microsoft Visual Studio Code CosmosDB BotBuilder Azure Isomorphic Teams Skype Sharepoint Babylon.js

#experiences18 Microsoft experiences18 Vous êtes en bonne compagnie! • Dashlane

#experiences18 Microsoft experiences18 Les outils de développement Microsoft Visual Studio Visual Studio Code

#experiences18 Microsoft experiences18 Typage

#experiences18 Microsoft experiences18 Les types, pourquoi?

#experiences18 Microsoft experiences18 Les types basiques • boolean, number, string, array, void, null, undefined, object. let name: string; let list: number[] = [1, 2, 3]; function fn(param: boolean): void { // Do something }

#experiences18 Microsoft experiences18 Classes et interfaces interface Ninja { nbShuriken: number; throwShuriken: () => void; } class NinjaTurtle implements Ninja { nbShuriken: number; constructor() { this.nbShuriken = 6; } throwShuriken(): void { // Throw shuriken }; } let leonardo: Ninja = new NinjaTurtle(); let donatelo: NinjaTutle = new NinjaTurtle();

#experiences18 Microsoft experiences18 Les types, comment ? any

#experiences18 Microsoft experiences18 Duck typings class Order { id: number; } class User { id: number; name: string; } function processOrder(order: Order) { // Do something } const order: Order = { id: 10 }; const user: User = { id: 54, name: "Félix" }; processOrder(order); processOrder(user); //

#experiences18 Microsoft experiences18 Les fichiers de définition ✋

#experiences18 Microsoft experiences18 Les fichiers de définition $ npm install --save-dev @types/angular { "name": "angular-with-dts", "version": "1.0.0", "dependencies": { "angular": "1.5.8" }, "devDependencies": { "@types/angular":"1.5.20" } } • Installation : • Contenu package.json :

#experiences18 Microsoft experiences18 Les spécificités du langage

#experiences18 Microsoft experiences18 Abstraction abstract class Animal { name: string; abstract say(): void; } class Dog extends Animal { } class Dog extends Animal { say(): void { throw new Error("Not implemented."); } }

#experiences18 Microsoft experiences18 Retour sur les interfaces interface Animal { name: string; say?: () => void; } interface Animal { readonly name: string; say?: () => void; } interface Say { () => void; } Ne peut pas être implémenté par une classe !

#experiences18 Microsoft experiences18 La généricité abstract class Animal { readonly name: string; constructor(name: string) { this.name = name; } abstract say() : void; } class AnimalFactory { ctor: new (name: string) => T; constructor(ctor: new (name: string) => T) { this.ctor = ctor; } create(name: string): T { return new this.ctor(name); } }

#experiences18 Microsoft experiences18 L'asynchronisme getAnimals(): Promise { fetch("http://awesome-zoo.com") .then((response) => { response.json((data) => { return data; }); }); } async getAnimals(): Promise { const res = await fetch("…"); return await res.json(); } Compatible ES3+

#experiences18 Microsoft experiences18 Les modules, TypeScript à la rescousse! export class Animal { // … } import { Animal } from "./animal";

#experiences18 Microsoft experiences18 Les decorateurs

#experiences18 Microsoft experiences18 Les decorateurs function log(target: object, key: string, descriptor: PropertyDescriptor) { const calledFunction = descriptor.value; descriptor.value = function () { for(let i = 0, l = arguments.length; i < l; i++) { console.log(arguments[i]); } return calledFunction.apply(this, arguments); }; return descriptor; }

#experiences18 Microsoft experiences18 Les decorateurs class Calculator { @log sum(...numbers: number[]): number { return numbers.reduce((previous, current) => previous + current); } } const calculator = new Calculator(); const result = calculator.sum(1, 2, 3, 4, 5); //Affiche: 1 2 3 4 5 console.log(result); //Affiche 15

#experiences18 Microsoft experiences18 Fonctionnement interne

#experiences18 Microsoft experiences18 Architecture

#experiences18 Microsoft experiences18 tsconfig.json • Fichier de configuration contenant les options de compilations. • Initialisé à l'aide de la CLI : • Exemple de contenue : { "compilerOptions": { "target": "es5", "module": "es2015", "removeComments": true, "sourceMap": true }, "include": [ "src/**/*" ] } $ tsc --init

#experiences18 Microsoft experiences18 De JavaScript à TypeScript

#experiences18 Microsoft experiences18 JavaScript vers TypeScript $ tsc --init

#experiences18 Microsoft experiences18 JavaScript vers TypeScript // @ts-check true function sum(numbers) { return numbers .reduce(function(previous, next) { return previous + next; }); } var result = sum([true, 2, "3"]); console.log(result); // 33 ... // @ts-check /** * @param {number[]} numbers */ function sum(numbers) { return numbers .reduce(function(previous, next) { return previous + next; }); } var value = sum([true, 2, "3"]); console.log(result); // 33 ...

#experiences18 Microsoft experiences18 Conclusion

#experiences18 Microsoft experiences18 Conclusion

#experiences18 Microsoft experiences18 Conclusion Questions ?

#experiences18 Microsoft experiences18 Notez maintenant cette session Rendez-vous sur la fiche de la session sur http://experiences18.microsoft.fr Cliquez sur le bouton « Evaluer » #experienceslive

#experiences18 Microsoft experiences18 Merci à vous !

No content