Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript - 45 minutes pour s’y mettre !

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.

Sylvain PONTOREAU

August 02, 2023
Tweet

More Decks by Sylvain PONTOREAU

Other Decks in Programming

Transcript

  1. ❓ La question du jour… Il y a déjà JavaScript…

    alors pourquoi TypeScript ? 😅 Je vous montre ça tout de suite 😉
  2. 🏷 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
  3. $ tsc ⚙Comment ça marche ? ts 📜 js 📜

    config 🛠 Transpilation ℹ Transpiler : Convertir un code A en un code B ayant le même niveau d'abstraction
  4. $ 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
  5. 🥤 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)
  6. 🏗 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, …
  7. 📥 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é)
  8. 🛠 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 :
  9. 🏷 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
  10. ⌨ 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
  11. 🦕 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 }
  12. 👽 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
  13. ⚠ 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
  14. 📚 Les différents système de type Type === contrainte statique

    • Systéme de typage : ▪ Dynamique ▪ Nominal ▪ Structurel • TypeScript -> Structurel
  15. ✋ 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
  16. 🤿 En profondeur dans le système de type Discriminated Union

    Intersection Union Type Guards Mapped Conditional Infer Immutability