Fonctions en TypeScript

Cet article explique les fonctions en TypeScript.

YouTube Video

Fonctions en TypeScript

Les fonctions en TypeScript sont des fonctions JavaScript avec des annotations de type ajoutées. En TypeScript, vous pouvez écrire un code plus robuste en définissant clairement les types d'entrées (paramètres) et de sorties (valeurs de retour) pour les fonctions. Ci-dessous, nous présentons les méthodes de base pour définir des fonctions et certaines caractéristiques des fonctions en TypeScript.

Définition de Fonction de Base

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• La fonction add prend deux arguments de type number et retourne une valeur de type number.
• Elle prend deux arguments, x et y, tous deux de type number, avec leurs types explicitement spécifiés.
• Le type de retour est également spécifié comme : number.

Fonctions Anonymes (Expressions de Fonction)

Les fonctions anonymes et les expressions de fonction peuvent également être utilisées en TypeScript. Les types peuvent être annotés de la même manière.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• Vous pouvez assigner une fonction anonyme à une variable et l'appeler plus tard.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• Vous pouvez utiliser une expression de fonction nommée pour permettre des appels récursifs.

Fonctions Fléchées

Les annotations de type peuvent aussi être utilisées avec les fonctions fléchées.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

Ce code définit une fonction fléchée subtract avec des annotations de type qui prend deux nombres en arguments et retourne leur différence.

Paramètres Optionnels et Par Défaut

Les paramètres peuvent être rendus optionnels ou avoir des valeurs par défaut.

Paramètres Optionnels

Ajouter ? après le nom du paramètre le rend optionnel.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

Ce code accepte un argument optionnel ; si l'argument est fourni, il salue en utilisant le nom, sinon il retourne une salutation générique.

Paramètres Par Défaut

Vous pouvez également définir des valeurs par défaut pour les paramètres.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

Cette fonction utilise "Guest" comme valeur par défaut si aucun argument n'est passé, et salue en utilisant le nom spécifié ou par défaut.

Définition du Type de Fonction

Il est également possible de définir le type de la fonction elle-même. Par exemple, cela est utilisé lors du passage d'une fonction comme argument.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

Ce code définit un type de fonction Operation qui prend deux nombres et retourne un nombre, puis l'utilise pour créer et exécuter des fonctions d'addition et de multiplication.

Lorsqu'il n'y a pas de valeur de retour (type void)

Pour les fonctions sans valeur de retour, spécifiez le type void.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

Ce code définit une fonction void nommée logMessage qui prend un message sous forme de chaîne de caractères et l'affiche dans la console sans retourner de valeur.

Fonction de rappel

Le fait de passer une fonction en argument à une autre fonction et de l'exécuter ultérieurement s'appelle une fonction de rappel. Elle est fréquemment utilisée dans le traitement asynchrone et la gestion des événements.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

Dans cet exemple, une fonction qui affiche une valeur dans la console est transmise en tant que fonction de rappel.

Sinon, vous pouvez définir un type de fonction de rappel en utilisant type ou interface.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

Définir un type de fonction de rappel avec type ou interface améliore la réutilisabilité.

Surcharge de fonction

La surcharge de fonctions vous permet de définir des fonctions portant le même nom mais ayant des listes de paramètres différentes. En TypeScript, vous pouvez définir plusieurs fonctions avec le même nom et effectuer différentes opérations en fonction des types et du nombre de paramètres.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

En TypeScript, la surcharge est réalisée comme suit :.

• Signature de Surcharge

  • Définit comment la fonction peut être utilisée (sa signature). En répétant cela plusieurs fois, la surcharge devient possible.

• Signature d'Implémentation

  • Implémente le corps réel de la fonction. Cette partie est définie une seule fois et gère tous les cas déclarés dans les signatures de surcharge.

Règles de Surcharge

Les règles suivantes s'appliquent à la surcharge de fonctions :.

• Ordre de Définition des Signatures de Surcharge

  • Comme l'évaluation se fait de haut en bas, il est recommandé de définir d'abord les types spécifiques, puis les types plus génériques.

• Compatibilité de la Signature d'Implémentation

  • La signature de l'implémentation doit être compatible avec les arguments et les valeurs de retour de toutes les signatures de surcharge.

• Préciser les détails dans les signatures de surcharge

  • La signature de l'implémentation a tendance à être ambiguë, donc les détails doivent être spécifiés dans les signatures de surcharge.
  • Si seule la signature de l'implémentation est définie, l'inférence de type pour la fonction sera insuffisante.

Résumé

Les fonctions en TypeScript présentent les caractéristiques suivantes.

• Annotations de type
  • En spécifiant des types pour les arguments et les valeurs de retour, vous pouvez écrire du code plus sûr.
• Fonctions anonymes et fonctions fléchées
  • Elles peuvent être utilisées comme en JavaScript, et l’ajout d’annotations de type améliore la sécurité des types.
• Paramètres optionnels et par défaut
  • Vous pouvez rendre la spécification des arguments plus flexible selon les besoins.
• Définitions de type de fonction
  • Définissez le type de la fonction elle-même pour effectuer la vérification des types.
• Surcharge de fonction
  • Vous pouvez prendre en charge différents arguments avec le même nom de fonction.

En utilisant cela, vous pouvez écrire un code plus clair et plus robuste en TypeScript.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video