Kodokon kodokon.com

Pourquoi TypeScript, premier fichier typé

Découvrez ce qu'est TypeScript, le problème qu'il résout et écrivez votre tout premier fichier typé.

6 min · 3 questions

Ouvrir cette leçon dans Kodokon

Vous connaissez déjà JavaScript, le langage qui rend les pages web interactives. TypeScript est une extension de JavaScript : tout code JavaScript valide est aussi du code TypeScript. Sa grande nouveauté, ce sont les types. Un type décrit la nature d'une valeur : un texte, un nombre, un vrai ou faux… En indiquant le type de vos variables, vous permettez à l'ordinateur de vérifier votre code avant de l'exécuter.

Pourquoi est-ce utile ? En JavaScript, rien ne vous empêche de passer un texte là où un nombre était attendu. Le programme s'exécute quand même… et produit un résultat absurde, souvent découvert bien plus tard. Observez cet exemple : la fonction attend un prix sous forme de nombre, mais reçoit un texte.

JAVASCRIPT
function addTax(price) {
  return price + price * 0.2;
}

const total = addTax("100");
console.log(total); // "10020" au lieu de 120 !
En JavaScript, cette erreur passe totalement inaperçue.

Avec TypeScript, vous ajoutez une annotation de type : deux points suivis du type, juste après le nom d'un paramètre ou d'une variable. Le code TypeScript est ensuite compilé, c'est-à-dire traduit en JavaScript classique par un outil appelé compilateur (tsc). C'est pendant cette étape que les erreurs de type sont détectées et signalées.

TYPESCRIPT
function addTax(price: number): number {
  return price + price * 0.2;
}

const total = addTax(100);
console.log(total); // 120
Ici, écrire addTax("100") serait refusé avant l'exécution.

Écrivons maintenant votre premier fichier typé. Un fichier TypeScript porte l'extension .ts au lieu de .js. À l'intérieur, vous écrivez du JavaScript habituel, enrichi d'annotations de type.

TYPESCRIPT
let firstName: string = "Sarah";
let age: number = 28;

console.log(firstName + " a " + age + " ans.");
Votre premier fichier : hello.ts

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

  1. Qu'est-ce que TypeScript par rapport à JavaScript ?
    • Un langage totalement différent de JavaScript
    • Une extension de JavaScript qui ajoute les types
    • Un outil pour rendre JavaScript plus rapide
    • Un navigateur web
  2. Que se passe-t-il quand vous compilez un fichier .ts ?
    • Il est transformé en fichier JavaScript classique
    • Il est exécuté directement par le navigateur
    • Il est converti en page HTML
  3. Que signifie l'annotation dans let age: number ?
    • La variable age vaut toujours zéro
    • La variable age ne peut contenir que des nombres
    • La variable age est un texte
    • La variable age est facultative