Tipos Utilitarios para React

Receta

Usa los tipos utilitarios integrados de TypeScript para transformar y componer tipos de props de React. Deriva nuevos tipos de tipos existentes en lugar de duplicar definiciones.

Ejemplo de Funcionamiento

// Base type
type User = {
  id: string;
  name: string;
  email: string;
  role: "admin" | "editor" | "viewer";
  createdAt: Date;
};
 
// Partial - all fields become optional (great for update forms)
type UpdateUserPayload = Partial<User>;
 
// Pick - select specific fields
type UserPreview = Pick<User, "id" | "name">;
 
// Omit - exclude specific fields
type CreateUserPayload = Omit<User, "id" | "createdAt">;
 
// Record - typed key-value map
type RolePermissions = Record<User["role"], string[]>;
 
const permissions: RolePermissions = {
  admin: ["read", "write", "delete"],
  editor: ["read", "write"],
  viewer: ["read"],
};

// Practical component using derived types
type UserFormProps = {
  initialData?: Partial<User>;
  onSubmit: (data: CreateUserPayload) => void;
};
 
function UserForm({ initialData, onSubmit }: UserFormProps) {
  const [form, setForm] = useState<CreateUserPayload>({
    name: initialData?.name ?? "",
    email: initialData?.email ?? "",
    role: initialData?.role ?? "viewer",
  });
 
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(form);
      }}
    >
      <input
        value={form.name}
        onChange={(e) => setForm({ ...form, name: e.target.value })}
      />
      <input
        value={form.email}
        onChange={(e) => setForm({ ...form, email: e.target.value })}
      />
      <button type="submit">Save</button>
    </form>
  );
}

Análisis Profundo

Cómo Funciona

• Partial<T> hace que todas las propiedades en T sean opcionales. Útil para payloads de actualización donde solo cambias algunos campos.
• Required<T> es el inverso de Partial - hace que todas las propiedades sean requeridas. Útil para normalizar objetos de configuración con valores por defecto.
• Pick<T, K> crea un tipo solo con las claves especificadas de T. Úsalo para crear sub-tipos enfocados.
• Omit<T, K> crea un tipo con todas las claves excepto las especificadas. Común para payloads de creación donde el servidor genera el id.
• Record<K, V> crea un tipo de objeto con claves de tipo K y valores de tipo V. Perfecto para mapas de búsqueda.
• Extract<T, U> extrae miembros de una unión que coinciden con U. Extract<User["role"], "admin" | "editor"> devuelve "admin" | "editor".
• Exclude<T, U> elimina miembros de una unión que coinciden con U. El inverso de Extract.

Variaciones

Extrayendo tipos de props de componentes:

// Get props from an existing component
type ButtonProps = React.ComponentProps<typeof Button>;
 
// Get props of an HTML element
type DivProps = React.ComponentPropsWithoutRef<"div">;
 
// Extend HTML element props
type CardProps = React.ComponentPropsWithoutRef<"div"> & {
  title: string;
  elevated?: boolean;
};

Props de solo lectura:

type ImmutableUser = Readonly<User>;
// All fields are now readonly - prevents accidental mutation
 
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};

Tipos mapeados para estado de formulario:

type FormErrors<T> = Partial<Record<keyof T, string>>;
 
type UserFormErrors = FormErrors<CreateUserPayload>;
// { name?: string; email?: string; role?: string }

NonNullable para eliminar null/undefined:

type MaybeUser = User | null | undefined;
type DefiniteUser = NonNullable<MaybeUser>; // User

Notas de TypeScript

• Los tipos utilitarios se componen: Partial<Pick<User, "name" | "email">> te da { name?: string; email?: string }.
• React.ComponentProps<typeof MyComponent> extrae el tipo de props de cualquier componente, incluso de terceros donde el tipo no está exportado.
• Parameters<T> y ReturnType<T> funcionan en tipos de funciones. ReturnType<typeof useAuth> te da el tipo de retorno de un hook personalizado.

Errores Comunes

• Omit no genera error en claves que no existen en el tipo original. Omit<User, "nonExistent"> silenciosamente devuelve el tipo completo User.
• Partial hace que todo sea opcional, incluso campos que deberían permanecer requeridos. Usa Partial<Pick<T, K>> & Omit<T, K> para hacer solo algunos campos opcionales.
• Record<string, T> permite cualquier clave de string. Esto puede ocultar errores tipográficos. Prefiere claves de unión literal cuando el conjunto de claves se conoce.
• Los objetos profundamente anidados no se ven afectados por Partial o Readonly. Estos solo operan en propiedades de nivel superior. Necesitas tipos recursivos personalizados para transformaciones profundas.

Alternativas

FAQs

type ButtonProps = React.ComponentProps<typeof Button>;
type DivProps = React.ComponentPropsWithoutRef<"div">;

type UpdateUser = Partial<Pick<User, "name" | "email">> & Omit<User, "name" | "email">;

type AuthData = ReturnType<typeof useAuth>;

type FormErrors<T> = Partial<Record<keyof T, string>>;

Relacionado

• Typing Props
• Generics
• Discriminated Unions
• Type Narrowing