Patrones avanzados de TypeScript para aplicaciones React

// Una lista generica que funciona con cualquier tipo de dato
interface ListProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
  keyExtractor: (item: T) => string;
  emptyMessage?: string;
}

function List<T>({
  items,
  renderItem,
  keyExtractor,
  emptyMessage = "No se encontraron elementos",
}: ListProps<T>) {
  if (items.length === 0) {
    return <p className="text-gray-500">{emptyMessage}</p>;
  }

  return (
    <ul className="space-y-2">
      {items.map((item, index) => (
        <li key={keyExtractor(item)}>{renderItem(item, index)}</li>
      ))}
    </ul>
  );
}

// Uso: TypeScript infiere T como User del prop items
interface User {
  id: string;
  name: string;
  email: string;
}

<List
  items={users}
  keyExtractor={(user) => user.id}       // user esta tipado como User
  renderItem={(user) => <span>{user.name}</span>} // user esta tipado como User
/>

interface SelectProps<T> {
  options: T[];
  value: T | null;
  onChange: (value: T) => void;
  getLabel: (option: T) => string;
  getValue: (option: T) => string;
  placeholder?: string;
}

function Select<T>({
  options,
  value,
  onChange,
  getLabel,
  getValue,
  placeholder = "Selecciona una opcion",
}: SelectProps<T>) {
  return (
    <select
      value={value ? getValue(value) : ""}
      onChange={(e) => {
        const selected = options.find(
          (opt) => getValue(opt) === e.target.value
        );
        if (selected) onChange(selected);
      }}
    >
      <option value="" disabled>{placeholder}</option>
      {options.map((option) => (
        <option key={getValue(option)} value={getValue(option)}>
          {getLabel(option)}
        </option>
      ))}
    </select>
  );
}

// Uso con un tipo Country
interface Country {
  code: string;
  name: string;
  population: number;
}

<Select<Country>
  options={countries}
  value={selectedCountry}
  onChange={setSelectedCountry}
  getLabel={(c) => c.name}         // c esta tipado como Country
  getValue={(c) => c.code}         // c esta tipado como Country
/>

interface Column<T> {
  key: keyof T & string;
  header: string;
  render?: (value: T[keyof T], item: T) => React.ReactNode;
  sortable?: boolean;
}

interface TableProps<T> {
  data: T[];
  columns: Column<T>[];
  onRowClick?: (item: T) => void;
}

function Table<T extends Record<string, unknown>>({
  data,
  columns,
  onRowClick,
}: TableProps<T>) {
  return (
    <table className="w-full border-collapse">
      <thead>
        <tr>
          {columns.map((col) => (
            <th key={col.key} className="border-b p-3 text-left font-semibold">
              {col.header}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((item, rowIndex) => (
          <tr
            key={rowIndex}
            onClick={() => onRowClick?.(item)}
            className={onRowClick ? "cursor-pointer hover:bg-gray-50" : ""}
          >
            {columns.map((col) => (
              <td key={col.key} className="border-b p-3">
                {col.render
                  ? col.render(item[col.key], item)
                  : String(item[col.key])}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// Uso: las keys de las columnas se validan contra el tipo Product
interface Product {
  id: string;
  name: string;
  price: number;
  inStock: boolean;
}

<Table<Product>
  data={products}
  columns={[
    { key: "name", header: "Nombre del producto" },
    { key: "price", header: "Precio", render: (v) => `${v}` },
    { key: "inStock", header: "Disponible", render: (v) => (v ? "Si" : "No") },
    // { key: "invalido", header: "X" } // Error de TypeScript: "invalido" no esta en Product
  ]}
  onRowClick={(product) => console.log(product.name)} // product esta tipado como Product
/>

interface UserProfile {
  id: string;
  email: string;
  name: string;
  avatar: string;
  bio: string;
  role: "admin" | "editor" | "viewer";
  createdAt: Date;
  updatedAt: Date;
}

// Pick: Seleccionar propiedades especificas
type UserCard = Pick<UserProfile, "id" | "name" | "avatar">;
// Resultado: { id: string; name: string; avatar: string }

// Omit: Excluir propiedades especificas
type CreateUserInput = Omit<UserProfile, "id" | "createdAt" | "updatedAt">;
// Resultado: { email: string; name: string; avatar: string; bio: string; role: ... }

// Partial: Hacer todas las propiedades opcionales
type UpdateUserInput = Partial<Omit<UserProfile, "id">>;
// Resultado: { email?: string; name?: string; avatar?: string; ... }

// Required: Hacer todas las propiedades obligatorias
type CompleteProfile = Required<UserProfile>;

// Record: Crear un tipo con keys y valores especificos
type RolePermissions = Record<UserProfile["role"], string[]>;
// Resultado: { admin: string[]; editor: string[]; viewer: string[] }

const permissions: RolePermissions = {
  admin: ["read", "write", "delete", "manage"],
  editor: ["read", "write"],
  viewer: ["read"],
};

// Readonly: Hacer todas las propiedades inmutables
type FrozenUser = Readonly<UserProfile>;
// Todas las propiedades se vuelven readonly: no se pueden reasignar

// Extract y Exclude para tipos union
type AllRoles = "admin" | "editor" | "viewer" | "superadmin";
type StandardRoles = Exclude<AllRoles, "superadmin">;  // "admin" | "editor" | "viewer"
type AdminRoles = Extract<AllRoles, "admin" | "superadmin">; // "admin" | "superadmin"

// Modelar estados de datos asincronos con uniones discriminadas
type AsyncState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: string };

function useAsync<T>() {
  const [state, setState] = useState<AsyncState<T>>({ status: "idle" });

  const execute = async (promise: Promise<T>) => {
    setState({ status: "loading" });
    try {
      const data = await promise;
      setState({ status: "success", data });
    } catch (error) {
      setState({
        status: "error",
        error: error instanceof Error ? error.message : "Error desconocido",
      });
    }
  };

  return { state, execute };
}

// Componente que maneja exhaustivamente todos los estados
function UserProfile() {
  const { state, execute } = useAsync<User>();

  useEffect(() => {
    execute(fetchUser());
  }, []);

  switch (state.status) {
    case "idle":
      return <p>Listo para cargar</p>;
    case "loading":
      return <Spinner />;
    case "success":
      return <div>{state.data.name}</div>;  // data esta garantizado que existe
    case "error":
      return <p className="text-red-500">{state.error}</p>; // error esta garantizado
  }
}

type ModalState =
  | { type: "closed" }
  | { type: "confirm"; title: string; message: string; onConfirm: () => void }
  | { type: "edit"; itemId: string; initialData: FormData }
  | { type: "preview"; content: string };

function ModalManager({ state }: { state: ModalState }) {
  switch (state.type) {
    case "closed":
      return null;
    case "confirm":
      return (
        <ConfirmDialog
          title={state.title}
          message={state.message}
          onConfirm={state.onConfirm}
        />
      );
    case "edit":
      return <EditForm itemId={state.itemId} initialData={state.initialData} />;
    case "preview":
      return <PreviewPanel content={state.content} />;
  }
}

// as const estrecha los tipos a sus valores literales
const routes = {
  home: "/",
  blog: "/blog",
  about: "/about",
  contact: "/contact",
} as const;

// El tipo es: { readonly home: "/"; readonly blog: "/blog"; ... }
// Sin as const, seria: { home: string; blog: string; ... }

type Route = (typeof routes)[keyof typeof routes];
// Route = "/" | "/blog" | "/about" | "/contact"

// satisfies valida la forma sin ampliar el tipo
interface ThemeConfig {
  colors: Record<string, string>;
  spacing: Record<string, string>;
}

const theme = {
  colors: {
    primary: "#0c4a6e",
    secondary: "#082f49",
    accent: "#f59e0b",
  },
  spacing: {
    sm: "0.5rem",
    md: "1rem",
    lg: "2rem",
  },
} as const satisfies ThemeConfig;

// theme.colors.primary esta tipado como "#0c4a6e" (literal), no string
// Pero TypeScript verifico que cumple con la forma de ThemeConfig

// Ejemplo practico en React: configuracion de navegacion
interface NavItem {
  label: string;
  href: string;
  icon?: string;
}

const navigation = [
  { label: "Inicio", href: "/", icon: "home" },
  { label: "Blog", href: "/blog", icon: "book" },
  { label: "Acerca de", href: "/about" },
] as const satisfies readonly NavItem[];

// Cada item retiene tipos literales para label y href
// TypeScript tambien verifico que cada item tiene los campos label y href requeridos

// Tipo condicional: extraer el tipo de respuesta de una funcion API
type ApiResponse<T> = T extends (...args: unknown[]) => Promise<infer R> ? R : never;

async function fetchUsers(): Promise<User[]> {
  const res = await fetch("/api/users");
  return res.json();
}

type Users = ApiResponse<typeof fetchUsers>; // User[]

// Tipo mapeado: hacer todas las propiedades opcionales y anulables
type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

type NullableUser = Nullable<User>;
// { id: string | null; name: string | null; email: string | null }

// Tipo mapeado con remapeo de keys
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<User>;
// { getId: () => string; getName: () => string; getEmail: () => string }

// Ejemplo practico: tracking de campos modificados en formularios
type DirtyFields<T> = {
  [K in keyof T]?: boolean;
};

interface FormState<T> {
  values: T;
  initialValues: T;
  dirtyFields: DirtyFields<T>;
  isDirty: boolean;
}

// Deep partial para objetos anidados
type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

interface Settings {
  theme: {
    mode: "light" | "dark";
    colors: { primary: string; secondary: string };
  };
  notifications: {
    email: boolean;
    push: boolean;
  };
}

// Solo actualizar campos anidados especificos
function updateSettings(patch: DeepPartial<Settings>) {
  // fusionar patch con la configuracion actual
}

// Generador de utilidades CSS type-safe
type Size = "sm" | "md" | "lg" | "xl";
type Direction = "t" | "r" | "b" | "l" | "x" | "y";
type PaddingClass = `p${Direction}-${Size}`;
// "pt-sm" | "pt-md" | "pt-lg" | ... | "py-xl" (24 combinaciones)

// Nombres de event handlers type-safe
type DomEvent = "click" | "focus" | "blur" | "change";
type EventHandler = `on${Capitalize<DomEvent>}`;
// "onClick" | "onFocus" | "onBlur" | "onChange"

// Rutas API type-safe
type Resource = "users" | "posts" | "comments";
type Method = "get" | "create" | "update" | "delete";
type ApiEndpoint = `/api/${Resource}`;
type ApiAction = `${Method}${Capitalize<Resource>}`;
// "getUsers" | "createUsers" | "updatePosts" | "deleteComments" | ...

// Ejemplo practico: claves de traduccion type-safe
type Namespace = "hero" | "about" | "contact";
type HeroKeys = "title" | "subtitle" | "cta";
type AboutKeys = "heading" | "description";
type ContactKeys = "form_title" | "submit";

type TranslationKey =
  | `hero.${HeroKeys}`
  | `about.${AboutKeys}`
  | `contact.${ContactKeys}`;

function translate(key: TranslationKey): string {
  // implementacion
  return "";
}

translate("hero.title");      // valido
translate("contact.submit");  // valido
// translate("hero.invalido"); // Error de TypeScript

// Extraer el tipo resuelto de una Promise
type Unwrap<T> = T extends Promise<infer U> ? U : T;

type A = Unwrap<Promise<string>>;  // string
type B = Unwrap<Promise<User[]>>;  // User[]
type C = Unwrap<number>;           // number (no es una Promise, se devuelve tal cual)

// Extraer el tipo de props de un componente React
type ComponentProps<T> = T extends React.ComponentType<infer P> ? P : never;

type ButtonProps = ComponentProps<typeof Button>;
// Extrae la interfaz de props del componente Button

// Extraer el tipo de retorno de la primera funcion en una tupla
type FirstReturn<T> = T extends [(...args: unknown[]) => infer R, ...unknown[]]
  ? R
  : never;

// Extraer el tipo de elemento de un array
type ElementType<T> = T extends (infer E)[] ? E : never;

type UserElement = ElementType<User[]>;  // User

// Ejemplo practico: extraer tipos de retorno de Server Actions
type ServerActionReturn<T extends (...args: unknown[]) => Promise<unknown>> =
  T extends (...args: unknown[]) => Promise<infer R> ? R : never;

async function createPost(data: FormData): Promise<{ id: string; slug: string }> {
  // implementacion
  return { id: "1", slug: "test" };
}

type CreatePostResult = ServerActionReturn<typeof createPost>;
// { id: string; slug: string }

// Crear un branded type usando interseccion con un symbol unico
declare const brand: unique symbol;

type Brand<T, TBrand extends string> = T & { readonly [brand]: TBrand };

// Definir tipos de ID especificos
type UserId = Brand<string, "UserId">;
type PostId = Brand<string, "PostId">;
type CategoryId = Brand<string, "CategoryId">;

// Funciones constructoras para crear valores branded
function userId(id: string): UserId {
  return id as UserId;
}

function postId(id: string): PostId {
  return id as PostId;
}

// Ahora TypeScript previene mezclar IDs
function fetchUser(id: UserId): Promise<User> {
  return fetch(`/api/users/${id}`).then((r) => r.json());
}

function fetchPost(id: PostId): Promise<Post> {
  return fetch(`/api/posts/${id}`).then((r) => r.json());
}

const uid = userId("user_abc123");
const pid = postId("post_xyz789");

fetchUser(uid);  // OK
fetchPost(pid);  // OK
// fetchUser(pid); // Error de TypeScript: PostId no es asignable a UserId
// fetchPost(uid); // Error de TypeScript: UserId no es asignable a PostId

// Tambien puedes brandear otros primitivos
type Dollars = Brand<number, "Dollars">;
type Euros = Brand<number, "Euros">;

function dollars(amount: number): Dollars {
  return amount as Dollars;
}

function euros(amount: number): Euros {
  return amount as Euros;
}

function chargeInDollars(amount: Dollars) {
  // procesar pago
}

chargeInDollars(dollars(29.99));  // OK
// chargeInDollars(euros(29.99)); // Error de TypeScript

import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";

// El patron del prop 'as'
type PolymorphicProps<E extends ElementType> = {
  as?: E;
  children?: ReactNode;
} & Omit<ComponentPropsWithoutRef<E>, "as" | "children">;

function Text<E extends ElementType = "span">({
  as,
  children,
  ...props
}: PolymorphicProps<E>) {
  const Component = as || "span";
  return <Component {...props}>{children}</Component>;
}

// Uso: los props se tipan segun el elemento 'as'
<Text>Span por defecto</Text>
<Text as="p" className="text-lg">Parrafo</Text>
<Text as="a" href="/about" target="_blank">Enlace</Text>
// <Text as="a" href={123} /> // Error de TypeScript: href debe ser string
// <Text as="div" href="/test" /> // Error de TypeScript: div no tiene prop href

// Ejemplo mas practico: componente Box
type BoxProps<E extends ElementType> = PolymorphicProps<E> & {
  padding?: "sm" | "md" | "lg";
  rounded?: boolean;
};

function Box<E extends ElementType = "div">({
  as,
  padding = "md",
  rounded = false,
  className,
  children,
  ...props
}: BoxProps<E>) {
  const Component = as || "div";
  const paddingClasses = { sm: "p-2", md: "p-4", lg: "p-8" };

  return (
    <Component
      className={cn(
        paddingClasses[padding],
        rounded && "rounded-lg",
        className
      )}
      {...props}
    >
      {children}
    </Component>
  );
}

// Se renderiza como <section> con props especificos de section disponibles
<Box as="section" padding="lg" rounded aria-labelledby="heading">
  Contenido
</Box>

import { z } from "zod";

// Definir el esquema una sola vez
const UserSchema = z.object({
  id: z.string().cuid(),
  email: z.string().email("Direccion de email invalida"),
  name: z.string().min(2, "El nombre debe tener al menos 2 caracteres"),
  role: z.enum(["admin", "editor", "viewer"]),
  profile: z
    .object({
      bio: z.string().max(500).optional(),
      website: z.string().url().optional(),
      social: z.object({
        twitter: z.string().optional(),
        github: z.string().optional(),
      }),
    })
    .optional(),
  createdAt: z.date(),
});

// Inferir el tipo TypeScript del esquema
type User = z.infer<typeof UserSchema>;
// {
//   id: string;
//   email: string;
//   name: string;
//   role: "admin" | "editor" | "viewer";
//   profile?: {
//     bio?: string;
//     website?: string;
//     social: { twitter?: string; github?: string };
//   };
//   createdAt: Date;
// }

// Crear esquemas de input/output a partir del esquema base
const CreateUserSchema = UserSchema.omit({ id: true, createdAt: true });
type CreateUserInput = z.infer<typeof CreateUserSchema>;

const UpdateUserSchema = UserSchema.partial().required({ id: true });
type UpdateUserInput = z.infer<typeof UpdateUserSchema>;

// Usar en un Server Action con seguridad de tipos completa
async function createUser(formData: FormData) {
  const rawData = Object.fromEntries(formData);
  const validated = CreateUserSchema.parse(rawData);
  // validated esta tipado como CreateUserInput con todas las validaciones aplicadas
  return prisma.user.create({ data: validated });
}

// Usar con React Hook Form
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const ContactSchema = z.object({
  name: z.string().min(1, "El nombre es obligatorio"),
  email: z.string().email("Email invalido"),
  message: z.string().min(10, "El mensaje debe tener al menos 10 caracteres"),
});

type ContactForm = z.infer<typeof ContactSchema>;

function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<ContactForm>({
    resolver: zodResolver(ContactSchema),
  });

  // register("name") es type-safe: solo "name" | "email" | "message" son validos
  // errors.name?.message esta tipado como string | undefined
}

import { z } from "zod";
import { useState, useCallback } from "react";

// Branded types para endpoints API
type ApiEndpoint = Brand<string, "ApiEndpoint">;
function endpoint(path: string): ApiEndpoint {
  return path as ApiEndpoint;
}

// Union discriminada para estado de la peticion
type RequestState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T; fetchedAt: Date }
  | { status: "error"; error: string; retryCount: number };

// Hook generico con inferencia de esquema Zod
function useApiQuery<TSchema extends z.ZodType>(
  url: ApiEndpoint,
  schema: TSchema
) {
  type TData = z.infer<TSchema>;
  const [state, setState] = useState<RequestState<TData>>({ status: "idle" });

  const fetch = useCallback(async () => {
    setState({ status: "loading" });
    try {
      const response = await globalThis.fetch(url);
      const json = await response.json();
      const data = schema.parse(json); // Validacion en runtime + inferencia de tipos
      setState({ status: "success", data, fetchedAt: new Date() });
    } catch (error) {
      setState({
        status: "error",
        error: error instanceof Error ? error.message : "Error desconocido",
        retryCount: 0,
      });
    }
  }, [url, schema]);

  return { state, fetch } as const;
}

// Uso
const PostListSchema = z.array(
  z.object({
    id: z.string(),
    title: z.string(),
    slug: z.string(),
  })
);

function BlogList() {
  const { state, fetch } = useApiQuery(
    endpoint("/api/posts"),
    PostListSchema
  );

  // state.data esta tipado como { id: string; title: string; slug: string }[]
  // TypeScript asegura el manejo exhaustivo de todos los estados
}