TypeScript - 45 minutes pour s’y mettre !

Depuis plusieurs années, TypeScript s'impose comme un choix incontournable dans le développement web. Que ce soit côté client ou serveur, il permet d'améliorer le développement des applications ainsi que leur maintenabilité et leur évolutivité.

Avec le temps, TypeScript s'est enrichi de nombreuses fonctionnalités visant à profiter des nouveautés d'ECMAScript, tout en améliorant son système de typage.

Toutes ces nouvelles fonctionnalités ont accru les connaissances nécessaires pour bien utiliser le langage. TypeScript peut donc être intimidant pour un débutant. C'est pourquoi je vous propose un condensé de tout ce qu'il faut savoir pour bien démarrer.

Transcript

1. 󰳕 TypeScript 45 minutes pour s’y mettre !
2. ❓ La question du jour… Il y a déjà JavaScript… alors pourquoi TypeScript ? 😅 Je vous montre ça tout de suite 😉
3. 🏷 Les avantages du typage • Trouver les erreurs à la compilation plutôt qu’à l'exécution • Améliorer la lisibilité du code • Moins de bugs (15% en moyenne) • Améliorer les fonctionnalités des éditeurs de code : ▪ Auto-complétion ▪ Inspecter / Rechercher du code ▪ Refactoring
4. 🖖 Hello! @spontoreau Sylvain Pontoreau 🎪 Orga 📕 Auteur Microsoft 󰳕 Je travaille avec
5. 🐦 @ParisTypeScript http://typescript.paris 🌐
6. 📖 Le moment “auto promotion”
7. $ tsc ⚙Comment ça marche ? ts 📜 js 📜 config 🛠 Transpilation ℹ Transpiler : Convertir un code A en un code B ayant le même niveau d'abstraction
8. 󰳕 Démo Comment démarrer un projet
9. $ tsc --init 🧬 Compatible avec JavaScript ? ts 📜 js 📜 Une ligne de JavaScript = Une ligne de TypeScript config 🛠 Renommer ⚠ Cette solution est un peu radicale si le code JavaScript contient beaucoup d’erreurs de typage
10. 🥤 Transition soft ! • // @ts-check Vérifier du code JavaScript avec TypeScript 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 result = sum([true, 2, "3"]); console.log(result); // 33 ... • checkJs: true (tsconfig.json)
11. 🏗 Architecture du compilateur Editors tsserver server.ts Language Service service.ts TS standalone compiler tsc.ts Core TypeScript Compiler core.ts, emitter.ts, checker.ts, parser.ts, …
12. 📥 Installation • Node.js & NPM sont requis ! TypeScript est disponible via un package NPM $ npm install typescript -D $ npm exec tsc -- --version $ npm install -g typescript $ tsc --version ▪ Globalement • Deux possibilités pour l’installation : ▪ Localement (recommandé)
13. 🛠 Configuration tsconfig.json • Un fichier qui contient les options de compilation $ npm exec tsc -- --init • Exemple : { "compilerOptions": { "target": "es2016", "module": "commonjs", "strict": true }, "include": [ "src/**/*" ] } • Initialisé par la commande suivante :
14. 🏷 Fichier de définition • Package NPM et TypeScript : Décrit le typage des fichiers JavaScript ▪ Écrit en TS -> 👌 ▪ Écrit en JS et fichier de définition inclut -> 👌 ▪ Écrit en JS sans fichier de définition inclut -> ✋ • Le fichier de définition doit être installé via npm (@types) • DefinitelyTyped (https://github.com/DefinitelyTyped) • lib.d.ts
15. 󰳕 Démo Installer des fichiers de définition
16. ⌨ Style de programmation TypeScript est un langage multi-paradigme • Impératif (type de base & fonction) • Orienté objet (classe, interface, abstraction, générique, décorateur, …) • Fonctionnel (type avancé & fonction) • Mix
17. 🦕 Type primitif boolean, number, string, array, null, undefined, object let str: string; let array: number[] = [1, 2, 3]; function fn(param: boolean): void { // Do something }
18. 👽 Type spéciaux et alias • any • unknown type Name = string; const name: Name = 'Sylvain Pontoreau'; type Person = { name: Name; age: number; }; const sylvain: Person = { name: 'Sylvain Pontoreau', age: 40, }; • alias
19. 󰳕 Démo Programmation impérative
20. 🗺 Programmation orienté objet
21. 󰳕 Démo Programmation orienté objet
22. ⚠ Typage et POO class Car { name: string; brand: string; engine: Engine = new Engine(); run(): void { engine.start(); }; } class Person { name: string; } function sayHelloToAPerson(person: Person) { console.log(`Hello ${ person.name }`); } const car = new Car(); car.name = '308'; car.brand = 'Peugeot'; const person = new Person(); person.name = 'Sylvain Pontoreau'; sayHelloToAPerson(person); sayHelloToAPerson(car); // Ça marche... 😅 TypeScript n’est pas un langage avec un typage nominal
23. 📚 Les différents système de type Type === contrainte statique • Systéme de typage : ▪ Dynamique ▪ Nominal ▪ Structurel • TypeScript -> Structurel
24. ✋ Autres points d’attention sur les types • Attention au type spécial any • Les types sont uniquements viable à la compilation • Le compilateur peut inférer les types • Typage structurel !== Typage nominale
25. 🤿 En profondeur dans le système de type Discriminated Union Intersection Union Type Guards Mapped Conditional Infer Immutability
26. 󰳕 Démo Typage avancé
27. Conclusion
28. Questions❓
29. 󰳕 Thanks!