Conference Typescript2 Dashlane

 

world of typescript 200 

 

 Merci à Dashlane de nous recevoir. Belle application sur tablette à l'entrée où l'on nous demande pour des raisons de sécurité notre prénom, nom, email, entreprise... Et ce n'est pas tout: l'application nous prend en photo, cheese. Un badge est ensuite imprimé avec nos prenom+nom+entreprise+photo, très pratique poru reconnaitre ceux qui sont à la conférence! Bravo Dashlane pour cette très bonne organisation

 

Qu'est-ce que Dashlane? Un Password manager qui permet de gérer l'identité et les paiements en ligne.

Constat: tout le monde utilise 2 ou 3 mots de passe. Dashlane résoud ce souci en centralisant les mots de passes de manière chiffrée dans le cloud: on navigue en utilisant le client Dashlane et les mots de passes se remplissent dans la form et on est authentifié facilement.

6 milions d'utilisateurs dans le monde

Stack desktop C++ Android, Objective-C.

Node AWS, react.JS, NodeJS, Amazon web services

Les données sont cryptées en AES256.

On recrute: ceux qui sont intéréssés peuvent se présenter.

Pour la conf, 6 mois de Dashlane offerts: utiliser le code de promotion TYPESCRIPT

 

Paul présente le meetiup et remercie à Dashlane.

 

Une question? Posez-la ici

 

Yves-Emmanuel Jutard (Dashlane) pour le talk 1: Power Leveling your Typescript

 

http://fr.slideshare.net/Offirmo

 

https://speakerdeck.com/offirmo/power-leveling-your-typescript

 

Monter très rapidement en compétence, comme si on jouait à World of Warcraft pour monter rapidement les nuveaux. Si vous êtes débutants, vous allez devenir un grand maitre du typescript.

Où aller? Sur le site officiel du typescript.

Pourquoi? Parce qu'on veut un "linter". Javascript a un linter, typescript a un linter.

Je passe à Typescript parce qu'il est créé par Microsoft, et que Google l'utilise dans AngularJS2.

Les pours et les contres

 

Les pours

Auto-completion, documentation des types, aide au refactoring

Les contres

Nouveau langage à apprendre, stack plus compliquée, on ne peut pus utiliser nos outils javascript, il y a des bugs

 

On a l'impression qu'il y a plus d'inconvenients que d'avantages, mais en fait, sur du long terme, le typescript se révèlera gagnant

 

Quick check

 

Est-ce que vous avez une équipe? ...

On fait aussi des tests unitaires, de la code review en typescript.

 

 

Une question? Posez-la ici

 

 

Nouvelle quette: faire un Hello World en typescript

 

Aller sur typescript2 au lieu de la version 1

 

mettre à la racine le tsconfig.json, regarder la doc

 

Il y a des IDEs qui compilent tout seul. On peut transpiler du JS vers un autre JS. Le compilateur typescript va catcher les erreurs, on conrole la sortie là où l'on veut que les fichiers javascript arrivent. On peut dire quels fichiers sont en typescript et donc ceux qu'on doit compiler.

 

Side-quest: "know your transpiler"

 

J'écris mon typescript en ES6, targer, ES6, module = commonjs, et je l'execute en node V6 avec node en commonjs

 

Je peux aussi targeter node4 qui ne gère que 57% d'ES6, astuce, on passe par du code intermédiaire, et babel avec un es2015-node4

 

Nouvelle quête: "Write types"

 

On peut combiner les types, intéréssant

 

Par défaut en typescript, tous les types sont nullables

je créé une variable de type Foo, undefined, ca passe

 

Nouveauté de typescript2, on peut interdire les undefined

 

Enum vs unions

 

Astuce: on peut déclarer le même enum avec des pipes

 

Type vs Interface

 

Astuce: plutot utiliser les interfaces pour grouper et utiliser les types pour définir des alias

 

Module detection

 

Argument destrcturing

 

Une fonction prend 2 objets en paramètres, avec les { et }

 

Type limitations

 

object.assign()

.bind()

 

Une question? Posez-la ici

 

Casting: as X,as any as X

 

Ne pas utiliser le "any" en typescript, le caster vers quelquechose.

Si on veut forcer un type dans un autre, il faut faire un double cast: x as any as person.

Quand dans un test on veut mocker les datas par exemple

 

Overloading

 

2 fonctions avec le même nom mais avec des paramètres différents qui prend soit une string, ou plusieurs strings en paramètres

 

 

Hashes and JSON

 

Json peut être déclaré en type

 

typeof

 

on peut récupérer le type d'une variable

smell, hack, ca existe, mais pas évident à utiliser.

 

integrated libs

 

--lib, dom, es6, dom.iterable, webworker

 

Use a npm module

 

Le typescript ne peut pas consommer du javascript. La solution pour ca c'est d'utiliser un fichier qui va anoter . On l'installe avec npm I -D @types/lodash

 

 Back-end

 

Une question? Posez-la ici

 

Frond-End

 

Webpack, react

 

Exemple de stack typescript dans un navigateur

 

npm-run +cpx pour transpiler en mode --watch, c'est transpilé à la volée en permanence

 

Universal (module)

 

une version node stable, ES6, ou UMD

NE JAMAIS UTILISER EXPORT DEFAULTS

 

 Exemple d'un module NPM Hello World que l'on consomme dans node

 

Sub quests

 

typescript formatter: tsfmt...

 

Typescript, un superset de javascript, comme C++ est un superset de C

 

En fait c'est un superset du javascript bien écrit.

 

On peut demander de générer du javascript, MEME s'il y a des bugs

 

Une question? Posez-la ici

 

Félix BILLON (Dcube) pour le talk 2: Gestion des .d.ts avec Typescript 2.0

 

Ficher de définition ambiant. Le mot "ambiant" présente quelque chose qui fait partie de notre environnement: extension. "d.ts" . Si on ecrit du code javascript, on utilise un dts pour pouvoir utiliser notre code javascript dans notre projet typescript.

 

Démo avec Visual studio code sous Windows 10

Exemple avec la librairie angular typé en any:

let angular: any;

 

Une fois le fichier de définition chargé, j'ai accès à l'autocomplétion

 

astuce, dans le tsconfig.json , mettre "déclaration:true"

 

Référencer les.d.ts

 

Créer un fichie .d.ts

 

Une question? Posez-la ici

 

Dépendance entre les fichiers de définitions .d.ts

 

exemple un fichier de définitions pour étendre le namespace angular, c'est plus pratique en typescript 2.0

 

Où récupérer les définitions?

 

repo sur GIT, DefinitelyTyped(DT): repo git.

angular, animate, jquery, undescore, TSD: Typescript Definition manager (TSD)

tsd install jquery --save

 

TSD: demo

installation d'angular avec jsquery en dépendances. Le tsd.d.ts est intégré dans le tsconfig.json

 

 Typing est devenu la référence qui permet de trouver les fichiers de définition dans plusieurs sources DT ,npm, github, bower, bitbucket...

Les définitions peuvent être wrappées dans un namespace

Exemple: typings install dt~jquery ...

 


 Typescript2, ideal pour gerer les .dt.dts

 

Plus de CLI externe nécéssaire.

 

 

Options du compilateur: on peut rajouter un chemin vers les typings en local

Autre options où 'on peut préciser les types que l'on souhaite utiliser.

 

Une question? Posez-la ici

 

Charly POLY (Dashlane) pour le talk 3: Decorators in practice

 

comment typescript gère les decorators

 

feature experimental sur typescript, utiliser un flag

 

Qu'est-ce qu'un decorator: fonction que l'on va appliquer à un contexte (classe méthode) qui modifie le comportement d'une méthode existante. Exemple en python avec le framework Flask. O Sinatra en ruby.

 

Angular utilise pas mal les décorators, cela permet de faire de l'AOP, diviser les responsabilités, code plus maintenable, syntax sugar...

 

5 types de décorators

 

classes décorators, methods, decorators, param decorators, accessors decorators, property decorators.

 

3 facons de les definir un decorator:

@classDecorator, decorator factory, sans devoir se soucier de l'implementation, configurable decorator

 

Le method decorator est le plus utilisé

en javascript, un prototype correspond à un properti editor: champ value (valeur de la propriete ou a fonction rattachée  la clé dans le prototype)

 

At transpilling time

 

Typescript crée un appel à la méthode "_decorate"

1er rgument: liste de décorateurs, prototype, nom de la méthode, et null

Dans le cas d'un décorateur de méthode, on overide la méthode.

 

 Exemples de decorators: "depecrated-decorator", decorator factory

Projet avec @SpotifyQuery, avec des requetes REST et GraphQL

requete avec GraphQL pour récupérer les sons, les artistes, etc. Et donc le decorator ici fait la query et récupre les données: la méthode est allégée et ne traite plus que les données, au lieu de les rappratrier aussi.

Voir fonction @SpotifyQuery implementation

 

Souvenez-vous, Typescript chez Xebia http://blog.xebia.fr/2014/05/09/xebia-organise-un-hands-on-typescript-le-15-mai-prochain/