TypeScript Functions : définition et exemples

TypeScript permet de déclarer des types pour les fonctions, les paramètres et les valeurs de retour. Cela permet de détecter les erreurs au plus tôt et d’améliorer la qualité du code en vérifiant que les types de données corrects sont utilisés.

TypeScript Functions : qu’est-ce que c’est ?

Les fonctions TypeScript (en anglais TypeScript Functions) sont un composant central du langage de programmation TypeScript. Les fonctions en TypeScript sont similaires à celles de JavaScript, mais elles possèdent l’avantage supplémentaire du typage statique. Avec ce concept, les types de données pour les variables, les paramètres et les valeurs de retour sont déjà définis dans le code au moment de la conception (compile-time) et ne peuvent pas être modifiés pendant l’exécution. Vous réduisez ainsi les erreurs dans votre environnement de production.

Une autre caractéristique des fonctions TypeScript est leur flexibilité. Les fonctions peuvent avoir des valeurs optionnelles et par défaut pour les paramètres, ce qui facilite l’adaptation à différents cas d’utilisation. Parmi les applications possibles, on trouve le traitement des données, les interactions avec l’interface utilisateur, la programmation asynchrone et bien plus encore. Vous pouvez également définir des surcharges afin de proposer différentes fonctionnalités basées sur les valeurs d’entrée.

En plus de la déclaration de fonctions, TypeScript vous autorise aussi à utiliser des fonctions d’aide, qui ont une écriture plus courte. Elles sont souvent utilisées dans les pratiques de développement JavaScript modernes. Les fonctions TypeScript sont donc un élément clé qui améliore la sécurité et la lisibilité du code dans les projets TypeScript, tout en englobant la flexibilité et l’adaptabilité à de multiples exigences.

TypeScript Functions : syntaxe

La syntaxe des fonctions TypeScript est similaire à celle des fonctions JavaScript, car TypeScript est un langage superset de JavaScript. Le code de la fonction est placé entre accolades { }. La logique proprement dite de la fonction y est implémentée. Voici la syntaxe générale d’une fonction TypeScript :

function functionName(parameter1: type, parameter2: type): returnType {
    // Function Code
    return result; // (optional)
}

• function : ce mot-clé marque le début de la déclaration de la fonction.
• functionName : il s’agit du nom de la fonction. Vous devriez choisir un nom descriptif, qui reflète la tâche de la fonction.
• parameter1, parameter2 : il s’agit des paramètres que la fonction attend. Chaque paramètre est identifié par son nom et le type de données attendu (annotation de type).
• returnType : c’est le type de données que la fonction renvoie. Vous pouvez également indiquer void si la fonction ne renvoie pas de valeur.
• return result : facultatif, est utilisé si la fonction doit renvoyer une valeur.

L’appel des TypeScript Functions se fait en utilisant le nom de la fonction suivi de parenthèses. Dans les parenthèses, vous indiquez les arguments (valeurs d’entrée) pour la fonction, si elle attend des paramètres.

functionName(argument1, argument2, ...);

TypeScript Functions : exemples d’utilisation

Les fonctions TypeScript sont extrêmement polyvalentes et peuvent effectuer des calculs, des opérations et des processus complexes dans les applications.

Fonctions anonymes

Les fonctions anonymes en TypeScript sont des fonctions qui n’ont pas de nom et sont donc passées directement dans des expressions ou comme arguments à d’autres fonctions. Les fonctions anonymes sont avantageuses lorsque vous n’avez besoin d’une fonction qu’à un seul endroit du code et que vous ne souhaitez pas attribuer un nom de fonction spécifique.

var greet = function(name) {
    return "Bonjour, " + name + " !";
};
var message = greet("Marie");
console.log(message); // Output: "Bonjour, Marie !"

Dans cet exemple, la fonction anonyme est stockée dans la variable greet et est appelée plus tard pour créer un message d’accueil personnalisé pour le prénom « Marie ».

Parmi les fonctions anonymes, on trouve également les fonctions lambda, connues sous le nom de fonctions fléchées.

const add = (a: number, b: number) => a + b;
const result = add(3, 5); // Output: 8

Ici, une fonction anonyme qui effectue l’addition de deux nombres est assignée à la variable add et est ensuite appelée.

Paramètres par défaut

Les paramètres par défaut (en anglais Default Parameters ou Standard Parameters) vous permettent de définir des fonctions TypeScript de manière à ce qu’elles aient des valeurs par défaut pour les paramètres. Lorsque la fonction est appelée et qu’aucune valeur n’est passée pour un paramètre, la valeur par défaut est utilisée à la place.

function greet(name: string = "tout le monde") {
    return "Bonjour, " + name + " !";
}
console.log(greet()); // Output: "Bonjour, tout le monde !"
console.log(greet("Marie")); // Output: "Bonjour, Marie !"

Ici, la fonction greet a une valeur par défaut tout le monde pour le paramètre name. Si aucune valeur n’est passée pour name lors d’un appel à la fonction, la valeur par défaut est automatiquement utilisée.

Paramètres résiduels

Les paramètres résiduels (en anglais Rest Parameters ou Rest Operators) en TypeScript vous permettent de rassembler un nombre indéfini d’arguments sous forme de tableau TypeScript dans une fonction. Cela vous aide lorsque vous souhaitez écrire des fonctions qui doivent traiter un nombre variable d’arguments.

function sum(...numbers: number[]): number {
    let total = 0;
    for (const num of numbers) {
        total += num;
    }
    return total;
}
console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Dans cet exemple, la fonction sum collecte un nombre quelconque de nombres comme paramètre résiduel numbers et les additionne pour calculer le total. Vous pouvez passer autant de nombres que vous le souhaitez, la fonction les additionnera tous.

Surcharges

Les fonctions TypeScript avec des surcharges (Function Overloads) servent à définir plusieurs déclarations de fonctions avec les mêmes noms, mais avec des types de paramètres ou de retour différents. Cela aide TypeScript à sélectionner automatiquement la déclaration de fonction correcte en fonction des arguments passés et à effectuer des vérifications de type.

function concatenate(a: string, b: string): string;
function concatenate(a: number, b: number): string;
function concatenate(a: any, b: any): string {
    return a.toString() + b.toString();
}
console.log(concatenate("Bonjour, ", "tout le monde")); // Output: "Bonjour, tout le monde"
console.log(concatenate(3, 5)); // Output: "35"

Dans l’exemple ci-dessus, nous avons deux surcharges de fonction pour concatenate. La première accepte deux chaînes de caractères et la seconde deux nombres. L’implémentation réelle de la fonction convertit les arguments passés en chaînes de caractères et les concatène. TypeScript choisit automatiquement la surcharge appropriée en fonction des arguments passés et effectue les vérifications de type nécessaires.

Les surcharges de fonctions sont particulièrement adaptées si vous développez une API ou une bibliothèque pour laquelle vous souhaitez vous assurer que l’utilisation de la fonction est simple et sans erreur, indépendamment des différents types de paramètres pouvant être fournis par les utilisateurs.