Typage des fonctions fléchées
Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy. Leçon 23 sur 73.
Pour les fonctions fléchées, vous ajoutez des annotations de type aux paramètres à l'intérieur des parenthèses, tout comme pour les fonctions régulières. L'annotation du type de retour se place après la liste des paramètres mais avant la flèche (=>) :
const multiply = (a: number, b: number): number => {
return a * b;
};
const greet = (name: string): string => `Hello, ${name}!`;La différence clé par rapport aux déclarations de fonction régulières est que l'annotation de type de retour apparaît avant la flèche plutôt qu'après le nom de la fonction. Cela maintient la sécurité de type de TypeScript tout en préservant la syntaxe propre et moderne qui rend les fonctions fléchées populaires.
Défi
FacileConvertissez la déclaration de fonction régulière suivante en une fonction fléchée tout en conservant toutes les annotations de type :
function subtract(a: number, b: number): number {
return a - b;
}Créez une fonction fléchée nommée subtract qui effectue la même opération avec les mêmes types de paramètres et le même type de retour.
Ensuite, créez deux fonctions fléchées supplémentaires :
- Une fonction fléchée nommée
createMessagequi prend un paramètretextde typestringet retourne une chaîne de caractères au format"Message: [text]". Incluez des annotations de type explicites pour le paramètre et le type de retour. - Une fonction fléchée nommée
isPositivequi prend un paramètrenumde typenumberet retournetruesi le nombre est supérieur à 0, sinonfalse. Incluez des annotations de type explicites pour le paramètre et le type de retour.
Testez vos fonctions fléchées en les appelant avec les valeurs suivantes et en affichant les résultats :
- Appelez
subtractavec10et3 - Appelez
createMessageavec"Hello World" - Appelez
isPositiveavec-5 - Appelez
isPositiveavec8
Affichez chaque résultat sur une ligne distincte dans l'ordre spécifié ci-dessus.
Essayez vous-même
// TODO : Convertir la fonction régulière en fonction fléchée et créer les fonctions fléchées supplémentaires
// TODO : Créer la fonction fléchée subtract avec des annotations de type
// TODO : Créer la fonction fléchée createMessage avec des annotations de type
// TODO : Créer la fonction fléchée isPositive avec des annotations de type
// TODO : Tester vos fonctions fléchées et afficher les résultatsCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Introduction à TypeScript
1Premiers pas avec TS
Qu'est-ce que TypeScript ?Pourquoi utiliser TypeScript ?Votre premier code TypeScriptProcessus de compilation et erreursRécapitulatif : Introduction à TS4Travailler avec les fonctions
Typage des paramètres et valeurs de retourTypage des fonctions fléchéesLe type de retour 'void'Paramètres optionnels avec '?'Valeurs par défaut des paramètresTypage des paramètres RestDéfinir des types de fonctionsRécapitulatif : Créer des fonctions typées2Types fondamentaux
Types de base : str, num, booleanLe type 'any' : la porte de sortieLe type 'unknown'Travailler avec 'null' et 'undef'L'inférence de type en actionAnnotations de type explicitesRécapitulatif : Pratique des types fondamentaux5Types : Alias, Unions & Intersections
Alias de types pour les primitifsTypes d'union ('|')Travailler avec les types d'unionTypes littérauxTypes d'intersection ('&')Combiner des alias de typesRécapitulatif : Combinaisons de types avancées3Structure de données : Tableaux et Tuples
Tableaux typésModificateur 'readonly' pour les tableauxQu'est-ce qu'un tuple ?Déclaration et accès aux tuplesDéstructuration de tuplesTuples readonlyTableaux typés multidimensionnelsSpread operator avec les tableauxRécapitulatif : Tableaux et tuples6Typage des objets et interfaces
Annotations de type d'objet en ligneAlias de type pour les objetsIntroduction aux interfacesInterfaces vs Alias de typePropriétés optionnelles et ReadonlyÉtendre les interfaces et les typesAjout de méthodes aux interfacesRécapitulatif : Définir la structure des objetsEntraînez-vous par vous-même : Playground TypeScript