Patrones de Modo Estricto

Receta

Escribe código React que prospera bajo la configuración más estricta de TypeScript. Domina patrones para strictNullChecks, noUncheckedIndexedAccess y exactOptionalPropertyTypes para detectar errores que configuraciones más flexibles pierden.

Ejemplo Funcional

// strictNullChecks: manejo seguro de valores anulables
type User = {
  id: string;
  name: string;
  address?: {
    street: string;
    city: string;
  };
};
 
function UserAddress({ user }: { user: User }) {
  // Sin strictNullChecks, esto devuelve silenciosamente undefined
  // Con strictNullChecks, TypeScript te obliga a manejar el caso
  if (!user.address) {
    return <p>Sin dirección registrada</p>;
  }
 
  return (
    <p>
      {user.address.street}, {user.address.city}
    </p>
  );
}

// noUncheckedIndexedAccess: acceso seguro a arrays y objetos
const colors = ["red", "green", "blue"];
 
// Sin noUncheckedIndexedAccess: colors[5] es string
// Con noUncheckedIndexedAccess: colors[5] es string | undefined
 
function getColor(index: number): string {
  const color = colors[index];
  if (!color) {
    return "default";
  }
  return color; // TypeScript ahora sabe que esto es string, no string | undefined
}

// Acceso seguro a registros
type FeatureFlags = Record<string, boolean>;
 
function isFeatureEnabled(flags: FeatureFlags, key: string): boolean {
  const value = flags[key];
  // Con noUncheckedIndexedAccess, value es boolean | undefined
  return value ?? false;
}

Análisis Profundo

Cómo Funciona

• strict: true habilita una familia de comprobaciones estrictas. Las más impactantes para React son strictNullChecks, strictFunctionTypes y noImplicitAny.
• strictNullChecks hace que null y undefined sean tipos distintos que deben manejarse explícitamente. Una variable tipada como string no puede ser null a menos que esté tipada como string | null.
• noUncheckedIndexedAccess añade | undefined a cualquier acceso de índice en arrays y registros. Esto detecta el error común de acceder a un índice de array que podría estar fuera de rango.
• exactOptionalPropertyTypes distingue entre una propiedad ausente y una explícitamente undefined. { name?: string } significa "name puede estar ausente" pero no { name: undefined }.
• strictFunctionTypes impone comprobación de parámetros contravariante en tipos de función. Esto detecta errores sutiles con tipos de manejador de eventos y props de callback.

Variaciones

Búsquedas seguras de mapa/objeto:

const userMap = new Map<string, User>();
 
function getUser(id: string): User {
  const user = userMap.get(id); // User | undefined
  if (!user) {
    throw new Error(`User ${id} not found`);
  }
  return user; // Estrechado a User
}

Aserción no-null como escape hatch:

// Úsalo raramente y solo cuando tengas la certeza de que el valor existe
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d")!; // Aserción no-null
// Mejor: guardia y lanzar excepción
const ctx2 = canvas.getContext("2d");
if (!ctx2) throw new Error("Canvas 2D context not available");

Manejo de encadenamiento opcional con nulls estrictos:

type Config = {
  api?: {
    baseUrl?: string;
    timeout?: number;
  };
};
 
function getApiUrl(config: Config): string {
  return config.api?.baseUrl ?? "https://api.example.com";
}

exactOptionalPropertyTypes en acción:

// Con exactOptionalPropertyTypes habilitado:
type Settings = {
  theme?: "light" | "dark";
};
 
// Permitido
const a: Settings = {};
const b: Settings = { theme: "light" };
 
// Error: undefined no es asignable a "light" | "dark"
// const c: Settings = { theme: undefined };

Notas de TypeScript

• Habilita estos incrementalmente si estás migrando: primero strict: true, luego noUncheckedIndexedAccess, luego exactOptionalPropertyTypes.
• Los operadores ?? (coalescencia nula) y ?. (encadenamiento opcional) son tus mejores herramientas bajo configuraciones estrictas. Manejan null | undefined limpiamente.
• Array.prototype.find() devuelve T | undefined incluso sin noUncheckedIndexedAccess. La configuración afecta principalmente al acceso entre corchetes arr[i].

Trampas

• noUncheckedIndexedAccess añade | undefined también al acceso a tuplas. Para tuplas con longitud conocida, esto puede parecer demasiado cauteloso. Usa desestructuración en su lugar: const [first, second] = tuple.
• exactOptionalPropertyTypes rompe código que explícitamente pasa undefined para limpiar campos opcionales. Puede que necesites usar delete obj.field en su lugar.
• Las aserciones no-null (!) eluden las comprobaciones estrictas completamente. Cada ! es un potencial fallo en tiempo de ejecución. Prefiere guardias y estrechamiento.
• Los tipos de bibliotecas de terceros pueden no ser compatibles con tus configuraciones estrictas. skipLibCheck: true ayuda, pero oculta problemas en tus propios archivos .d.ts.

Alternativas

Preguntas Frecuentes

type Settings = { theme?: "light" | "dark" };
 
const a: Settings = {};            // OK: propiedad ausente
const b: Settings = { theme: "light" }; // OK
// const c: Settings = { theme: undefined }; // ERROR

const colors = ["red", "green", "blue"];
 
function getColor(index: number): string {
  const color = colors[index]; // string | undefined
  if (!color) return "default";
  return color; // estrechado a string
}

Relacionado

• Conceptos Básicos de TypeScript
• Estrechamiento de Tipos
• Tipificación de Respuestas de API
• Archivos de Declaración