Explorer le Typage Avancé en TypeScript : Fonctions, Surcharge et Génériques

Par jlerouge, 14 mars, 2025
Typescript

Rebonjours, chers lecteurs

Dans l’article précédent, nous avons parlé des fonctionnalités que TypeScript met à notre disposition, telles que les types spéciaux et les différents types d’interfaces. Dans cet article, nous allons explorer des concepts avancés, tels que le typage des fonctions, ainsi que les techniques de surcharge et les génériques.

Texte alternatif

Typage des fonctions :

En TypeScript, typer ses fonctions permet d’écrire un code plus clair et plus fiable. En définissant précisément les types des paramètres et du retour, on évite les erreurs courantes et on s’assure que chaque fonction fait exactement ce qu’on attend d’elle. Que ce soit pour indiquer si un paramètre est optionnel, donner une valeur par défaut ou préciser qu’une fonction ne retourne rien, le typage renforce la robustesse du code et facilite la maintenance sur le long terme. Dans quelques instants types de fonctions

Paramètres optionnels et valeurs par défaut

  • Les paramètres optionnels nous donne la posibilité de rendre un paramètre optionnel avec ? ou de lui assigner une valeur par défaut. Ici, message? signifie que ce paramètre est optionnel et ?? permet d'utiliser "Bonjour" si message est undefined. Allons examiner la démonstration suivante :
function saluer(nom: string, message?: string): string {
  return `${message ?? "Bonjour"}, ${nom} !`;
}

console.log(saluer("Jean")); // résultat : Bonjour, Jean !
console.log(saluer("Jean", "Salut")); résultat : // Salut, Jean

Fonctions fléchées et inférence de type

  • Les fonctions fléchées connue aussi sous les fonctions lambda permettent d’écrire des fonctions plus concises. Cependant, TypeScript ajoute une couche de fonctionnalités. Dans l’exemple suivant, on va additionner deux différentes type de variable l’un sera number/int et l’autre sera string. Vous ditez peut-être que cela va va pas causer une erreur ? Oui et non, j’espère que vous n’avez déjà pas oublier que Javascript est un language sans typage et que Typescript l’est.
#Javascript : 
const add = (a, b) => a + b;
console.log(add(“5”, 3)); //  le retour va 53 concaténer

#Typescript
const add = (a: number, b: number): number => a + b;
console.log(add(5, 3)); // 8
// console.log(add("5", 3)); ❌ Erreur : Argument de type 'string' non assignable à un paramètre
Caractéristique JavaScript TypeScript
Syntaxe ✅ Oui ✅ Oui
Conserve cette ✅ Oui ✅ Oui
Annotations de type ❌ Non ✅ Oui
Inférence de type ❌ Non ✅ Oui
Sécurité au niveau du typage ❌ Non ✅ Oui

Les signatures d'appels

  • En Typescript, les fonctions peuvent posséder des propriétés en plus de pouvoir être invoquées. Toutefois, la syntaxe d'expression de type de fonction ne permet pas de déclarer des propriétés. Si nous souhaitons décrire quelque chose de "callable" avec des propriétés, nous pouvons définir une signature d'appel dans un type d'objet :

type DescribableFunction = {
  description: string;  // Propriété 'description' de la fonction DescribableFunction
  (someArg: number): boolean;  
};

// Fonction qui affiche la description et le résultat de l'appel de la fonction
function doSomething(fn: DescribableFunction) {
  console.log(fn.description + " returned " + fn(6));  // Affiche description et résultat de fn(6)
}

// Fonction qui retourne true si l'argument est supérieur à 3
function myFunc(someArg: number) {
  return someArg > 3;
}


myFunc.description = "default description";  

// Appel de la fonction doSomething avec myFunc
doSomething(myFunc);

Surcharge de fonction

  • La surcharge de fonction permet de définir plusieurs manières d'appeler une même fonction, en fonction des types ou du nombre d'arguments que vous lui passez. C'est un peu comme si vous disiez à TypeScript : "Voici différentes façons dont je peux appeler cette fonction, et je veux que tu choisisses la bonne selon les arguments que je donne.". Par exemple, imaginons une fonction qui accueille quelqu'un. Si on lui donne juste le nom, elle répond de manière simple, mais si on lui donne aussi l'âge, elle fait une réponse un peu plus détaillée. TypeScript va automatiquement choisir la bonne version de la fonction en fonction des arguments.
function greet(person: string): string;  // Signature pour un argument de type string
function greet(person: string, age: number): string;  // Signature pour un argument de type string et un autre de type 
// Implémentation de la fonction
function greet(person: string, age?: number): string {
  if (age) {
    return `Bonjour ${person}, vous avez ${age} ans.`;
  }
  return `Bonjour ${person}!`;
}
console.log(greet("Jasmine"));           // Appel avec un seul argument Retour : Bonjour Jasmine
console.log(greet("Gabriel", 21));      // Appel avec deux arguments Retour : Bonjour Gabriel, vous avez 21 ans.

Pourquoi utiliser la surcharge ?

  • La surcharge est utile lorsqu'une fonction peut accomplir plusieurs tâches selon les types d'arguments qu'elle reçoit, mais vous voulez garder une interface propre et claire pour l'utilisateur de la fonction.

Recyclage avec les fonctions génériques

Texte alternatif Enfin, nous avons les fonctions génériques qui offrent la possibilité de rédiger un code adaptable et réutilisable en utilisant des types qui varient plutôt que des types fixes, mais on peut déjà se poser la question : quelle est leur utilité?

Pourquoi utiliser des fonctions génériques ?

❌Problème sans fonction générique : Si on veut une fonction qui renvoie la même valeur qu’elle reçoit, on peut écrire :

function identityString(value: string): string {
  return value;
}

function identityNumber(value: number): number {
  return value;
} //
  • Problème : On doit dupliquer la fonction pour chaque type (string, number, etc.).

💡 Solution avec une fonction générique :

function identity<T>(value: T): T {
  return value;
console.log(identity<string>("Hello")); // "Hello"
console.log(identity<number>(42)); // 42
console.log(identity<boolean>(true)); // true
} //


console.log(identity<string>("Je sauve du temps et de la frustration :)")); // 
console.log(identity<number>(69)); // 69
console.log(identity<boolean>(true)); // true
  • On peut réutiliser la fonction sans avoir déclarer une autre! :
Comment peut appliquer cela dans un projet complexe?
  • Réutilisation : Évite la duplication du code pour différents types.
  • Sécurité du typage : Prévient les erreurs de type.
  • Extension : Ajoute facilement des fonctionnalités sans toucher au code existant.
  • Tests simplifiés : Facilite la réutilisation des tests.

C'est impressionnant de voir à quel point les développeurs d'aujourd'hui disposent de nombreux outils puissants qui leur facilite leurs tâches.

Résumé

Typage des fonctions en TypeScript

  • Typage des fonctions : Améliore la clarté et la fiabilité du code en spécifiant les types des paramètres et du retour.
  • Paramètres optionnels et valeurs par défaut : Permet de rendre certains paramètres optionnels ou de leur assigner une valeur par défaut.
  • Fonctions fléchées : Offrent des fonctions plus concises avec une inférence de type pour garantir la sécurité. Surcharge de fonction : Permet de définir plusieurs signatures pour une même fonction, en fonction des arguments.

Fonctions Génériques

  • Fonctions génériques : Permettent un code réutilisable et flexible avec des types variables au lieu de types fixes.

Références :

Étiquettes

Commentaires