Tipando State

Receta

Tipifica correctamente el state de tu componente con useState y useReducer. Maneja valores simples, objetos complejos, state nullable, y reductores de unión discriminada.

Ejemplo Funcional

// useState simple - el tipo se infiere
const [count, setCount] = useState(0); // number
const [name, setName] = useState(""); // string
const [enabled, setEnabled] = useState(false); // boolean

// Tipificación explícita para state complejo o nullable
type User = {
  id: string;
  name: string;
  email: string;
};
 
const [user, setUser] = useState<User | null>(null);
 
// Más tarde...
if (user) {
  console.log(user.name); // TypeScript sabe que user no es null aquí
}

// useReducer con acciones de unión discriminada
type CounterState = {
  count: number;
  lastAction: string;
};
 
type CounterAction =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: number }
  | { type: "reset" };
 
function counterReducer(state: CounterState, action: CounterAction): CounterState {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload, lastAction: "increment" };
    case "decrement":
      return { count: state.count - action.payload, lastAction: "decrement" };
    case "reset":
      return { count: 0, lastAction: "reset" };
  }
}
 
function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0, lastAction: "none" });
 
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment", payload: 1 })}>+1</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

Profundización

Cómo Funciona

• useState infiere el tipo del valor inicial. useState(0) te da [number, Dispatch<SetStateAction<number>>].
• Cuando el valor inicial no representa todos los estados posibles (por ejemplo, comenzando como null pero eventualmente manteniendo un objeto), debes proporcionar un parámetro de tipo explícito: useState<User | null>(null).
• useReducer infiere los tipos de state y action de la firma de la función reductora. Definir el reductor con tipos de parámetro explícitos te da seguridad de tipos completa en el cuerpo del reductor y en las llamadas dispatch.
• Las acciones de unión discriminada (acciones con un campo type literal) permiten que TypeScript estreche la action dentro de cada rama case, dándote acceso a campos payload específicos de la rama.

Variaciones

Inicializador perezoso:

const [data, setData] = useState<Map<string, User>>(() => new Map());

State con una tupla:

const [coords, setCoords] = useState<[number, number]>([0, 0]);

useReducer con Immer:

import { useImmerReducer } from "use-immer";
 
function reducer(draft: CounterState, action: CounterAction) {
  switch (action.type) {
    case "increment":
      draft.count += action.payload;
      draft.lastAction = "increment";
      break;
    case "reset":
      draft.count = 0;
      draft.lastAction = "reset";
      break;
  }
}
 
const [state, dispatch] = useImmerReducer(reducer, { count: 0, lastAction: "none" });

Notas de TypeScript

• SetStateAction<T> es T | ((prev: T) => T). Esto es por qué tanto setCount(5) como setCount(prev => prev + 1) funcionan.
• Para useReducer, el tipo de retorno del reductor debe coincidir con el tipo del state. TypeScript lo aplica automáticamente cuando anotas los parámetros del reductor.
• Evita las aserciones as con state. Si TypeScript se queja, usualmente significa que tus tipos necesitan ajuste, no un cast.

Trampas

• Usar useState<User>() sin un valor inicial te da User | undefined, no User. Siempre proporciona un valor inicial o tipifica explícitamente como User | undefined.
• Pasar un objeto literal a setUser sin propagar el state anterior reemplaza el objeto completo. TypeScript capturará campos requeridos faltantes, lo cual es en realidad útil.
• Tipificar state como any derrota el propósito. Incluso para formas dinámicas, usa Record<string, unknown> o un tipo adecuado.
• Olvidar manejar el caso null en state nullable lleva a errores en tiempo de ejecución que TypeScript intenta prevenir mediante verificaciones estrictas de null.

Alternativas

Preguntas Frecuentes

const [data, setData] = useState<Map<string, User>>(() => new Map());

import { useImmerReducer } from "use-immer";
 
function reducer(draft: CounterState, action: CounterAction) {
  switch (action.type) {
    case "increment":
      draft.count += action.payload;
      break;
  }
}

Relacionado

• Typing Props
• Typing Context
• Discriminated Unions
• Typing Events