TypeScript - Fonctions Anonymes : Un Guide Pour Les Débutants

Salut là, future star du codage ! Aujourd'hui, on va plonger dans le monde passionnant de TypeScript et explorer un concept qui pourrait sembler un peu mystérieux au départ : les fonctions anonymes. Ne t'inquiète pas si cela sonne comme un nom de code d'agent secret - d'ici la fin de ce tutoriel, tu manipuleras ces fonctions comme un pro !

Qu'est-ce que les fonctions anonymes ?

Avant de rentrer dans le vif du sujet, définissons ce que nous entendons par "fonctions anonymes". Dans le monde de la programmation, nous avons souvent l'habitude de donner des noms à nos fonctions, comme "calculateTotal" ou "sendEmail". Mais parfois, nous créons des fonctions qui n'ont pas besoin d'un nom - elles sont comme les héros masqués de l'univers du codage. Ces merveilles sans nom, c'est ce que nous appelons les fonctions anonymes.

Imaginons que tu es à un bal masqué. Tout le monde porte des masques, et tu ne peux pas voir leurs visages ou connaître leurs noms. Mais ils peuvent toujours danser, parler et s'amuser. C'est un peu comme ce que font les fonctions anonymes dans notre code - elles effectuent des tâches sans avoir besoin d'une introduction formelle !

Maintenant, regardons les différentes manières de créer ces fonctions incognito en TypeScript.

Définir des fonctions anonymes avec le mot-clé 'function'

La première manière de créer une fonction anonyme est d'utiliser le bon vieux mot-clé 'function'. Voici à quoi cela ressemble :

let greet = function(name: string) {
console.log("Bonjour, " + name + "!");
};

greet("Alice"); // Output : Bonjour, Alice!

Dans cet exemple, nous créons une fonction qui dit bonjour à quelqu'un. Décomposons cela :

1. Nous commencer par let greet =. Cela nous permet de créer une variable appelée 'greet'.
2. Après le signe égal, nous avons function(name: string) { ... }. C'est notre fonction anonyme.
3. À l'intérieur des accolades { }, nous avons le corps de la fonction - ce que la fonction fait réellement.
4. Ensuite, nous pouvons utiliser cette fonction en appelant greet("Alice").

C'est comme si nous avions créé un robot amical qui peut dire bonjour à n'importe qui, et nous avons donné au robot le nom de code 'greet' !

Définir des fonctions anonymes en utilisant la syntaxe des fonctions fléchées

Maintenant, regardons une manière plus moderne et concise d'écrire des fonctions anonymes - la syntaxe des fonctions fléchées. C'est comme la voiture de sport des fonctions : élégante, rapide et stylée !

let add = (a: number, b: number): number => {
return a + b;
};

console.log(add(5, 3)); // Output : 8

Voici ce qui se passe :

1. Nous créons une variable appelée 'add'.
2. La partie (a: number, b: number) définit les paramètres que notre fonction prend.
3. Le : number après les parenthèses spécifie que notre fonction retournera un nombre.
4. Le => rend cette fonction une fonction fléchée (elle ressemble un peu à une flèche, non ?).
5. À l'intérieur des { }, nous avons notre corps de fonction.

Nous pouvons même rendre cela plus court pour les fonctions simples :

let multiply = (a: number, b: number): number => a * b;

console.log(multiply(4, 6)); // Output : 24

Dans ce cas, nous avons supprimé les { } et le mot-clé return. C'est comme si notre fonction disait : "Je suis tellement simple, je n'ai pas besoin de tous ces symboles supplémentaires !"

Utiliser des fonctions anonymes comme fonctions de rappel

Maintenant, c'est là que les fonctions anonymes brillent vraiment - en tant que fonctions de rappel. Une fonction de rappel est une fonction que nous passons à une autre fonction en tant qu'argument. C'est comme dire à un ami : "Hey, quand tu auras fini ta tâche, fais-moi cette chose pour moi."

Regardons un exemple en utilisant la fonction setTimeout :

setTimeout(() => {
console.log("Ce message apparaîtra après 2 secondes !");
}, 2000);

Dans ce code :

1. setTimeout est une fonction qui attend un certain temps avant de faire quelque chose.
2. Le premier argument est notre fonction anonyme, écrite en tant que fonction fléchée.
3. Le second argument (2000) est le nombre de millisecondes à attendre (2 secondes).

C'est comme si nous avions mis un minuteur et dit : "Quand tu sonneras, affiche ce message !"

Voici un autre exemple en utilisant les méthodes d'array :

let numbers = [1, 2, 3, 4, 5];

let doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // Output : [2, 4, 6, 8, 10]

Dans ce cas :

1. Nous avons un tableau de nombres.
2. Nous utilisons la méthode map, qui applique une fonction à chaque élément du tableau.
3. Notre fonction anonyme (num) => num * 2 double chaque nombre.
4. Le résultat est un nouveau tableau avec tous les nombres doublés.

C'est comme si nous avions créé une machine qui prend chaque nombre, le double, et le met dans une nouvelle boîte !

Conclusion

Et voilà, les amis ! Nous avons levé le voile sur le mystère des fonctions anonymes en TypeScript. Souviens-toi, ces fonctions sont comme de petits elfes utiles dans ton code - elles font leur travail sans avoir besoin d'un nom d'étiquette formel.

Voici un résumé rapide des méthodes que nous avons apprises, présenté sous forme de tableau :

Méthode	Syntaxe	Exemple
Mot-clé Function	let funcName = function(params) { ... }	let greet = function(name: string) { console.log("Bonjour, " + name); }
Fonction Fléchée (multi-ligne)	let funcName = (params) => { ... }	let add = (a: number, b: number) => { return a + b; }
Fonction Fléchée (single-line)	let funcName = (params) => expression	let multiply = (a: number, b: number) => a * b;
En tant que fonction de rappel	someFunction(() => { ... })	setTimeout(() => { console.log("C'est l'heure !"); }, 1000);

Pratique ces différentes méthodes, et bientôt tu créeras des fonctions anonymes comme un ninja du codage ! Souviens-toi, en programmation, comme dans la vie, parfois les forces les plus puissantes travaillent dans l'ombre. Bon codage !

Credits: Image by storyset