Passer au contenu principal
eLearner.app
Module 1 · Leçon 1 sur 21/14 dans le cours~10 min
Leçons du module (1/2)

Types primitifs et annotations

TypeScript est un sur-ensemble typé (superset) de JavaScript, ce qui signifie qu'il ajoute une syntaxe pour les types statiques par-dessus la syntaxe JavaScript existante. Au moment de l'exécution, tout le code TypeScript est compilé en JavaScript pur et les types disparaissent complètement lors de la build.

Grâce à TypeScript, vous pouvez détecter les erreurs avant que le code ne soit exécuté dans le navigateur, ce qui rend le développement plus robuste, sûr et évolutif.


Les Types Primitifs

TypeScript prend en charge les types primitifs standard de JavaScript :

  • string : Représente des séquences de caractères (ex. 'Alice', "Hello").
  • number : Représente des valeurs numériques, entières ou décimales (ex. 42, 3.14).
  • boolean : Représente des valeurs de vérité (true ou false).
  • null et undefined : Représentent l'absence intentionnelle ou non d'une valeur.
TS
const username: string = 'Alice';
const score: number = 100;
const isActive: boolean = true;

Annotation des Variables et Inférence

En TypeScript, nous pouvons ajouter une annotation de type en insérant deux-points (:) suivis du type.

Si vous essayez d'assigner une valeur d'un type différent (par exemple, assigner une chaîne à age définie comme number), le compilateur TypeScript signalera immédiatement une erreur avant l'exécution.


Le Danger du Type any

Le type any est un type spécial qui indique à TypeScript de désactiver la vérification des types pour une variable donnée.

TS
let data: any = 42;
data = 'Hello'; // Nessun errore!
data.nonExistentMethod(); // Nessun errore a tempo di compilazione, ma crash a runtime!

L'utilisation de any annule tous les avantages de sécurité offerts par TypeScript. C'est considéré comme une mauvaise pratique à éviter presque toujours dans le code de production.


Annotation des Fonctions et le Type void

Nous pouvons annoter à la fois les paramètres et la valeur de retour d'une fonction :

TS
function calculateTax(price: number, taxRate: number): number {
  return price * taxRate;
}

Si une fonction ne retourne aucune valeur (par exemple, elle effectue seulement un console.log), son type de retour est void :

TS
function logMessage(message: string): void {
  console.log(message);
}

À toi de jouer

Exercice 1 : Variables Typées

Exercice#ts.m1.l1.e1
Tentatives : 0Chargement…

Déclare trois variables explicitement typées : username en tant que string avec la valeur 'Alice', score en tant que number avec la valeur 100, et isActive en tant que boolean avec la valeur true. N'utilise pas le type any.

Chargement de l'éditeur…
Afficher l'indice

Utilise la syntaxe : string, : number, et : boolean après le nom de chaque variable.

Solution disponible après 3 tentatives

Exercice 2 : Fonction de Saluto

Exercice#ts.m1.l1.e2
Tentatives : 0Chargement…

Crée une fonction appelée greet qui accepte un paramètre name de type string et retourne une chaîne au format 'Hello, ' suivi du nom. Spécifie explicitement le type du paramètre et le type de retour.

Chargement de l'éditeur…
Afficher l'indice

Déclare la fonction sous la forme function greet(name: string): string { ... } et retourne le message.

Solution disponible après 3 tentatives

Exercice 3 : Convertisseur de Température

Exercice#ts.m1.l1.e3
Tentatives : 0Chargement…

Déclare une fonction nommée celsiusToFahrenheit qui accepte un paramètre celsius de type number et retourne la température équivalente en degrés Fahrenheit (number). La formule est celsius * 9 / 5 + 32. Spécifie explicitement le type du paramètre et le type de retour.

Chargement de l'éditeur…
Afficher l'indice

Multiplie celsius par 9, divise par 5, ajoute 32 et retourne le résultat avec l'annotation : number sur la fonction.

Solution disponible après 3 tentatives

Exercice 4 : Calcul de la Remise

Exercice#ts.m1.l1.e4
Tentatives : 0Chargement…

Crée une fonction appelée calculateDiscount qui accepte un paramètre price de type number et un paramètre discountPercent de type number, et retourne le prix final après remise en tant que number. Spécifie explicitement le type des paramètres et le type de retour.

Chargement de l'éditeur…
Afficher l'indice

Soustrais le pourcentage de remise divisé par 100 de 1, puis multiplie par le prix initial. Assure-toi d'annoter les paramètres et le retour comme number.

Solution disponible après 3 tentatives