Funciones flecha y tipado contextual
Utilice funciones flecha con confianza y descubra cómo el tipado contextual infiere los tipos de parámetros y de retorno a partir del uso.
Funciones flecha y tipado contextual es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 3 lecciones en total.
Por qué usar funciones flecha y contexto
Las funciones flecha ofrecen una sintaxis concisa y un this léxico. Con el tipado contextual, TypeScript infiere los tipos de los parámetros y del valor de retorno a partir del uso (por ejemplo, en métodos de matrices), de modo que escribe menos código repetitivo sin perder seguridad.
Conceptos básicos de las funciones flecha
Anote los parámetros y los valores de retorno cuando eso mejore la claridad. Las funciones flecha son compactas y conservan el this del contexto circundante, a diferencia de las declaraciones de función.
// Arrow syntax: parameters => expression/body
const greet = (name: string): string => {
return `Hello, ${name}`;
};
console.log(greet("Ada"));Contexto mediante map
Tipado contextual: map conoce el tipo del elemento, por lo que el parámetro de la función flecha se infiere como number y el resultado como 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);Valores de retorno inferidos
Las API tipadas (Promise, métodos de matrices) guían la inferencia de los parámetros y los valores de retorno, lo que reduce la necesidad de anotaciones explícitas.
// 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));Opcionales y valores predeterminados
Las funciones flecha admiten parámetros predeterminados y opcionales. Estreche el tipo o proporcione valores alternativos (por ejemplo, ??) antes de utilizar los opcionales.
// 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, "."));Errores comunes
Errores comunes:
- Anotar en exceso perjudica la inferencia; empiece con lo mínimo.
- Sea explícito cuando las API no estén tipadas (any) o cuando la intención no sea clara.
- Recuerde que las funciones flecha capturan this léxicamente: son excelentes para callbacks, pero evítelas cuando necesite un this dinámico.
Comprobación del tipado contextual
Comprobación rápida: ¿Qué significa «tipado contextual» en las funciones flecha?
Repaso y siguiente paso
Repaso: Las funciones flecha ofrecen una sintaxis concisa y un this léxico. El tipado contextual permite que el uso guíe la inferencia, por lo que los callbacks siguen siendo breves y seguros en cuanto a tipos.
Preguntas frecuentes
¿La lección «Funciones flecha y tipado contextual» es gratis?
Sí — el texto completo de «Funciones flecha y tipado contextual» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Funciones flecha y tipado contextual»?
Utilice funciones flecha con confianza y descubra cómo el tipado contextual infiere los tipos de parámetros y de retorno a partir del uso. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar TypeScript Academy?
No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Funciones flecha y tipado contextual»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?
Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- If/else, switch y bucles; veracidad y comprobaciones estrictas
- Funciones: parámetros, valores predeterminados/opcionales/rest
- Funciones flecha y tipado contextual