0Pricing
TypeScript Academy · Lección

Tipado contextual: inferencia a partir del contexto

Comprenda cómo TypeScript infiere tipos a partir del contexto circundante.

Tipado contextual: inferencia a partir del contexto es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 4. 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 4 lecciones en total.

¿Qué es el tipado contextual?

El tipado contextual ocurre cuando TypeScript infiere el tipo de una expresión según la posición en la que aparece: el contexto proporciona el tipo, no el valor en sí.

document.addEventListener("click", (e) => {
  // e is inferred as MouseEvent from the event type
  console.log(e.clientX);
});

Tipado contextual en callbacks

Cuando pasa un callback a una función tipada, TypeScript infiere los tipos de los parámetros a partir de la firma esperada del callback.

const nums = [1, 2, 3];
nums.forEach((n) => {
  // n inferred as number from Array<number>
  console.log(n.toFixed(2));
});

Tipado contextual y literales de objeto

Cuando se asigna un literal de objeto a una variable tipada, los tipos de sus propiedades se infieren a partir de ese tipo, lo que permite realizar comprobaciones precisas.

interface Config { timeout: number; retries: number; }
const config: Config = {
  timeout: 3000,
  retries: 3,
  // extra: true // Error: excess property
};

Tipado contextual en JSX

En React, las props de los controladores de eventos tienen tipado contextual, por lo que los tipos de los parámetros de evento se infieren automáticamente.

function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
  return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />

Tipado contextual frente a anotaciones explícitas

El tipado contextual es potente, pero las anotaciones explícitas pueden sobrescribirlo. Cuando ambos están presentes, la anotación explícita tiene prioridad.

const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)

Tipado contextual con desestructuración

Los parámetros desestructurados de las funciones con tipado contextual también heredan sus tipos del contexto.

const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
  // key: string, value: number — contextually typed
  console.log(key.toUpperCase(), value * 2);
});

Tipado contextual y tipos de retorno

Cuando una función se asigna a una variable tipada, el tipo de retorno también se infiere contextualmente.

type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OK

Tipado contextual en expresiones condicionales

TypeScript puede propagar los tipos contextuales a las expresiones ternarias y a los operadores lógicos.

const result: string | null =
  Math.random() > 0.5 ? "yes" : null; // both arms typed by context

Limitaciones del tipado contextual

El tipado contextual no se aplica cuando la expresión está en una posición sin contexto, como una variable independiente sin anotación.

const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;

Inferencia bidireccional

TypeScript realiza una inferencia de tipos bidireccional: descendente, desde el contexto, y ascendente, desde la expresión. Ambas direcciones colaboran para proporcionar el tipo más preciso posible.

function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as string

Resumen: tipado contextual

El tipado contextual permite que TypeScript infiera tipos a partir de la posición en la que se usa una expresión. Los callbacks, las asignaciones, las props de JSX y la desestructuración se benefician de este mecanismo de inferencia.

Comprobación rápida

¿Cuándo se aplica el tipado contextual a un parámetro de callback?

Lo que ha aprendido

El tipado contextual consiste en que TypeScript infiere los tipos a partir de la posición, en lugar del valor. Hace que los callbacks, los controladores de eventos y las asignaciones tipadas sean concisos y mantengan la seguridad de tipos.

Preguntas frecuentes

¿La lección «Tipado contextual: inferencia a partir del contexto» es gratis?

Sí — el texto completo de «Tipado contextual: inferencia a partir del contexto» 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 4 lecciones en total.

¿Qué aprenderé en «Tipado contextual: inferencia a partir del contexto»?

Comprenda cómo TypeScript infiere tipos a partir del contexto circundante. 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 2 de 4.

¿Cuánto tiempo toma la lección «Tipado contextual: inferencia a partir del contexto»?

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

  1. Mecánica de ampliación y reducción de tipos
  2. Tipado contextual: inferencia a partir del contexto
  3. Comprobación de propiedades adicionales y frescura
  4. Aserciones const y as const
← Volver a TypeScript Academy