TypeScript Academy · Lección

Tipado de las props de componentes de React

Defina interfaces para las props y utilice FC frente a tipos de retorno explícitos.

Tipado de las props de componentes de React es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 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.

Bienvenida

Esta lección aborda cómo tipar las props de componentes de React en TypeScript con React.

Interfaz de props del componente

Defina una interfaz de props para los componentes de React que documente y haga cumplir la API del componente.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

FC frente a tipo de retorno explícito

React.FC añade children y otros tipos automáticamente. El tipo de retorno explícito (JSX.Element | null) suele ser más claro.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

Tipado de useState

El tipo de useState se infiere a partir del valor inicial. Proporcione un parámetro de tipo cuando el valor inicial sea null o ambiguo.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

Tipado de useReducer

useReducer funciona mejor con un tipo de acción basado en una unión discriminada.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

Tipado de useRef para el DOM

useRef para elementos del DOM necesita un argumento de tipo. Inicialícelo con null, ya que el elemento todavía no existe.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Tipado de controladores de eventos

Los tipos de eventos de React incluyen React.ChangeEvent, React.MouseEvent y React.FormEvent.

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

Componentes genéricos

Los componentes genéricos aceptan un parámetro de tipo para crear listas y selectores flexibles y con seguridad de tipos.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

forwardRef con TypeScript

forwardRef necesita parámetros de tipo tanto para el tipo del elemento de la ref como para las props.

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <label>{label}<input {...props} ref={ref} /></label>
  )
);

Tipos de retorno de hooks personalizados

Especifique explícitamente los valores de retorno de los hooks personalizados para evitar que las tuplas se infieran como any[].

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

Contexto con TypeScript

Tipifique el contexto de React con una unión que incluya undefined para obligar a los consumidores a comprobar si existe el contexto.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Comprobación rápida

¿Cuál es el tipo correcto para una ref a un elemento de entrada HTML?

Resumen

Tipifique las props de React con interfaces, useState con parámetros de tipo, los eventos con tipos de eventos de React, las refs con genéricos de elementos del DOM y forwardRef con dos parámetros de tipo. Los componentes genéricos permiten crear interfaces de usuario reutilizables y con seguridad de tipos.

Preguntas frecuentes

¿La lección «Tipado de las props de componentes de React» es gratis?

Sí — el texto completo de «Tipado de las props de componentes de React» 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 de las props de componentes de React»?

Defina interfaces para las props y utilice FC frente a tipos de retorno explícitos. 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 1 de 4.

¿Cuánto tiempo toma la lección «Tipado de las props de componentes de React»?

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

Tipado de las props de componentes de React
Tipado de useState y useReducer
Tipado de useRef y controladores de eventos
Componentes genéricos y forwardRef

← Volver a TypeScript Academy