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

Fonctions typées

Les fonctions sont les briques de base de toute application JavaScript. En TypeScript, nous pouvons annoter avec précision à la fois les arguments d'entrée et les valeurs de retour, ce qui rend nos interfaces et appels de fonction extrêmement sûrs et auto-documentés.


Paramètres Optionnels et par Défaut

En JavaScript, chaque paramètre est optionnel et, s'il n'est pas fourni, prend la valeur undefined. En TypeScript, par défaut, chaque paramètre déclaré est obligatoire.

Cependant, nous pouvons définir des paramètres optionnels à l'aide du point d'interrogation (?), ou spécifier des valeurs par défaut directement dans la signature.

1. Paramètres Optionnels

Les paramètres optionnels doivent être placés après les paramètres obligatoires :

TS
function greetUser(name: string, title?: string): string {
  if (title) {
    return `Buongiorno ${title} ${name}`;
  }
  return `Ciao ${name}`;
}

2. Paramètres par Défaut

Si aucune valeur n'est fournie pour un paramètre ayant une valeur par défaut, TypeScript infère son type et attribue la valeur définie :

TS
function greetUserWithDefault(name: string, prefix: string = 'Ciao'): string {
  return `${prefix} ${name}`;
}

Paramètres Rest (...args)

Lorsque nous voulons accepter un nombre variable d'arguments, nous pouvons utiliser l'opérateur rest. En TypeScript, ces paramètres doivent être typés comme un tableau :

TS
function sumAll(message: string, ...numbers: number[]): string {
  const total = numbers.reduce((sum, n) => sum + n, 0);
  return `${message} ${total}`;
}

Signatures de Fonctions (Function Types)

Nous pouvons définir le type d'une fonction de manière indépendante pour ensuite le réutiliser dans la déclaration de variables ou de callbacks :

TS
// Definizione del tipo tramite alias
type MathOperation = (a: number, b: number) => number;

const add: MathOperation = (x, y) => x + y;
const multiply: MathOperation = (x, y) => x * y;

Cette approche est fondamentale lorsque l'on passe des fonctions en tant qu'arguments à d'autres fonctions (callbacks).


À toi de jouer

Exercice 1 : Paramètres Optionnels

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

Crée une fonction nommée formatName qui accepte un paramètre firstName (string) et un paramètre optionnel lastName (string). Si lastName est fourni, retourne 'firstName lastName', sinon retourne uniquement 'firstName'.

Chargement de l'éditeur…
Afficher l'indice

Rappelle-toi que le paramètre optionnel se déclare avec lastName?: string après le paramètre obligatoire.

Solution disponible après 3 tentatives

Exercice 2 : Paramètres par Défaut

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

Crée une fonction appelée power qui accepte une base (nombre) et un exponent (nombre avec une valeur par défaut égale à 2). La fonction doit calculer et retourner la valeur de la base élevée à l'exposant (utilise Math.pow).

Chargement de l'éditeur…
Afficher l'indice

Utilise base: number et exponent: number = 2 dans la signature de la fonction.

Solution disponible après 3 tentatives

Exercice 3 : Signature de la Fonction

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

Définis un alias de type appelé BinaryOp décrivant une fonction qui accepte deux paramètres de type nombre et retourne un nombre. Déclare ensuite une constante nommée sum de type BinaryOp qui implémente l'addition.

Chargement de l'éditeur…
Afficher l'indice

La syntaxe pour le type de fonction est (a: number, b: number) => number.

Solution disponible après 3 tentatives

Exercice 4 : Fonction Callback

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

Crée une fonction nommée processItems qui accepte deux paramètres : items (un tableau de chaînes) et callback (une fonction qui accepte une seule chaîne et ne retourne rien, c'est-à-dire void). La fonction doit exécuter une boucle for...of sur chaque élément de items et le passer à la callback.

Chargement de l'éditeur…
Afficher l'indice

Déclare la signature sous la forme processItems(items: string[], callback: (item: string) => void): void et utilise une boucle pour appeler la callback.

Solution disponible après 3 tentatives