React con TypeScript: los tipos que de verdad necesitas

React con TypeScript

React con TypeScript: props, estado, eventos, refs y context | We.Inc

Chuleta con buscador de tipos de React en TypeScript: props, children, useState, eventos, refs, context, reducers y componentes genéricos, cada uno con código para copiar.

En React con TypeScript sobre todo tipas las props de un componente, y la inferencia se encarga del resto. Describe las props con una interface, usa React.ReactNode para children, pasa un argumento de tipo a useState cuando el valor inicial es demasiado estrecho y elige tipos de evento como React.ChangeEvent<HTMLInputElement> para los handlers. Los archivos con JSX usan la extensión .tsx.

Los tipos más usados

Qué tipar
Tipo

Cualquier cosa renderizable como children
React.ReactNode

Exactamente un elemento JSX
React.ReactElement

Handler de cambio en un input
React.ChangeEvent<HTMLInputElement>

Handler de clic en un botón
React.MouseEvent<HTMLButtonElement>

Handler de envío de formulario
React.FormEvent<HTMLFormElement>

Prop de estilo en línea
React.CSSProperties

Todas las props de un elemento nativo
React.ComponentProps<"button">

Busca en la chuleta lo que intentas tipar, como un handler de clic o una ref, y copia la línea. Después vienen ejemplos más completos de context, reducers y componentes genéricos.

Escribe una palabra como event, ref o children en el buscador.
Filtra por grupo si la lista es larga.
Copia el fragmento junto a la fila que coincide.
Lee los ejemplos completos de abajo para patrones que necesitan más de una línea.

Deja que la inferencia trabaje. useState(0) ya es un number; añade un argumento de tipo solo para uniones, valores que pueden ser null o arrays vacíos.
No anotes los componentes como React.FC por costumbre. Una función normal con props tipadas es más corta y maneja children de forma explícita.
Pasa el ratón sobre un atributo como onChange en tu editor para ver el tipo de evento exacto que espera React y cópialo en tu handler.
Instala @types/react y @types/react-dom como dependencias de desarrollo; frameworks como Next.js los añaden por ti.

Preguntas frecuentes

¿Cómo tipo children?

Añade children: React.ReactNode a la interface de props. ReactNode cubre strings, números, elementos, arrays y null. Usa React.ReactElement solo cuando el componente deba recibir un único elemento JSX.

¿Por qué mi valor de useState tiene el tipo never[]?

Un array vacío no le da al comprobador nada de lo que inferir. Pasa el tipo de los elementos: useState<string[]>([]). Lo mismo vale para valores iniciales null, como en useState<User | null>(null).

¿Cómo tipo una ref a un elemento del DOM?

Usa useRef<HTMLInputElement>(null) y asígnala con ref={inputRef}. Lee inputRef.current comprobando null, porque vale null hasta que React monta el elemento y de nuevo después de desmontarlo.

¿Cómo paso una ref a mi propio componente?

La documentación actual de React muestra un componente de función que recibe ref como una prop normal y la coloca en el elemento interno. Tipa esa prop como React.Ref<HTMLInputElement>. El código más antiguo envuelve el componente en forwardRef.

¿Qué valor por defecto debería tener createContext?

Cuando no hay un valor por defecto razonable, usa createContext<Value | null>(null) y envuelve useContext en un pequeño hook que lance un error si el valor es null. Así cada consumidor obtiene un tipo no nulo y un error claro si falta el provider.

Primero las props, lo demás viene solo

La mayoría de los errores de tipos en un código React empiezan en el límite de un componente. Escribe una interface para las props, desestructúralas en la firma y el comprobador validará cada lugar donde se usa el componente.
Las props opcionales llevan un signo de interrogación y normalmente un valor por defecto en la desestructuración, como size = "md". Las props de unión como variant: "primary" | "ghost" te dan autocompletado y rechazan erratas.

Eventos y formularios

Cada handler recibe un evento sintético de React tipado según el elemento del que viene. Usa event.currentTarget para leer el elemento al que está asociado el handler; su tipo sale del argumento genérico.
Si prefieres tipar el handler completo, React también exporta tipos de handler, por ejemplo React.ChangeEventHandler<HTMLInputElement>.

Componentes genéricos

Una lista o un select que funcione con cualquier tipo de elemento puede recibir un parámetro de tipo. Los datos que se le pasan fijan el tipo, y las render props reciben elementos bien tipados sin casts.

Ejemplos completos

Un componente con props y children tipados

Las props opcionales tienen valores por defecto en la firma; children acepta cualquier cosa renderizable.

Context con un hook seguro

El hook lanza un error claro fuera del provider y devuelve un valor no nulo dentro de él.

useReducer con una unión discriminada

Dentro de cada case la acción se estrecha, así action.item solo existe donde debe.

Un componente de lista genérico

T queda fijado por los elementos que recibe, así renderItem recibe el tipo correcto.

Dar foco a un input mediante una prop ref

El padre crea la ref; el hijo la coloca en el input real.

Props

Objeto de props

Props

Children de cualquier tipo

Props

Un solo elemento como hijo

Props

Variante limitada a unos pocos valores

Props

Pasar las props nativas de un botón

Props

Prop de estilo

Props

Prop de callback

State

Estado numérico (inferido)

State

Estado que puede ser null

State

Estado de array vacío

State

Unión de estados

State

Setter pasado como prop

Events

Cambio en un input de texto

Events

Cambio en un select

Events

Clic en un botón

Events

Envío de formulario

Events

Pulsación de tecla

Events

Tipo del handler completo

Refs

Ref a un elemento del DOM

Refs

Ref que guarda el id de un temporizador

Refs

Ref recibida como prop

Context

Context sin valor por defecto

Reducer

Unión de acciones

Todos

Props

Estado

Eventos

Refs

Context

Reducer

Chuleta de React con TypeScript

Buscar en la chuleta

event, ref, children...

Filtrar por grupo

Copiar

Se muestran {n} de {v} filas

Ninguna fila coincide. Prueba con una palabra más corta.

Empieza gratis · Sin tarjeta de crédito

React con TypeScript: los tipos que de verdad necesitas