Fonctions fléchées et typage contextuel
Utilisez les fonctions fléchées avec assurance et découvrez comment le typage contextuel déduit les types des paramètres et des valeurs de retour selon l’utilisation.
Fonctions fléchées et typage contextuel est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 3 leçons au total.
Pourquoi les fonctions fléchées et le contexte ?
Les fonctions fléchées offrent une syntaxe concise et un this lexical. Grâce au typage contextuel, TypeScript déduit les types des paramètres et des valeurs de retour à partir de l'utilisation (par exemple, les méthodes de tableau), ce qui réduit le code répétitif tout en conservant la sécurité.
Notions de base des fonctions fléchées
Annotez les paramètres et les valeurs de retour lorsque cela améliore la clarté. Les fonctions fléchées sont compactes et conservent le this environnant, contrairement aux déclarations de fonctions.
// Arrow syntax: parameters => expression/body
const greet = (name: string): string => {
return `Hello, ${name}`;
};
console.log(greet("Ada"));Contexte avec map
Le typage contextuel : map connaît le type des éléments, le paramètre de la fonction fléchée est donc déduit comme étant de type number, et le résultat comme étant de type number[].
// Context supplies types: numbers.map expects (n:number)=>number
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // n inferred as number
console.log(doubled);Valeurs de retour déduites
Les API typées (Promise, méthodes de tableau) orientent l'inférence des paramètres et des valeurs de retour, ce qui réduit le besoin d'annotations explicites.
// Promise.then infers the callback parameter and return type
const toLength = (s: string) => s.length;
Promise.resolve("TS")
.then(s => toLength(s)) // s inferred as string
.then(len => console.log(len));Paramètres facultatifs et valeurs par défaut
Les fonctions fléchées prennent en charge les paramètres par défaut et facultatifs. Réduisez le type possible ou fournissez des valeurs de remplacement (par exemple, ??) avant d'utiliser des paramètres facultatifs.
// Optional + default with arrows
const padLeft = (text: string, width = 2, ch?: string): string => {
const fill = (ch ?? " ").repeat(Math.max(0, width));
return fill + text;
};
console.log(padLeft("X")); // default width 2, default char " "
console.log(padLeft("X", 4, "."));Pièges à éviter
Pièges à éviter :
- Des annotations excessives perturbent l'inférence ; commencez au minimum.
- Soyez explicite lorsque les API ne sont pas typées (any) ou lorsque l'intention n'est pas claire.
- N'oubliez pas que les fonctions fléchées capturent lexicalement this — ce qui est idéal pour les fonctions de rappel, mais à éviter lorsqu'un this dynamique est nécessaire.
Vérification du typage contextuel
Vérification rapide : que signifie le « typage contextuel » pour les fonctions fléchées ?
Récapitulatif et suite
Récapitulatif : les fonctions fléchées offrent une syntaxe concise et un this lexical. Le typage contextuel permet à l'utilisation de guider l'inférence, afin que les fonctions de rappel restent courtes tout en étant sûres du point de vue des types.
Questions Fréquemment Posées
La leçon « Fonctions fléchées et typage contextuel » est-elle gratuite ?
Oui — le texte complet de « Fonctions fléchées et typage contextuel » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Fonctions fléchées et typage contextuel » ?
Utilisez les fonctions fléchées avec assurance et découvrez comment le typage contextuel déduit les types des paramètres et des valeurs de retour selon l’utilisation. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.
Combien de temps prend la leçon « Fonctions fléchées et typage contextuel » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?
Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- if/else, switch, boucles ; vérité et vérifications strictes
- Fonctions : paramètres, valeurs par défaut/facultatifs/variadiques ; types de retour
- Fonctions fléchées et typage contextuel