9 patrones de TypeScript que eliminan bugs antes de ejecutar el código

// ❌ Esto permite 8 combinaciones. La mayoría no tienen sentido.
interface FetchState {
  isLoading: boolean
  data: User | null
  error: Error | null
}

// ¿Qué hacés con esto?
const estado = { isLoading: true, data: someUser, error: someError }

// ✅ Solo 4 combinaciones, todas válidas
type FetchState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: Error }

function renderFetch(state: FetchState<User>): string {
  switch (state.status) {
    case "success":
      return `Hola, ${state.data.name}` // TypeScript sabe que data existe acá
    case "error":
      return `Error: ${state.error.message}` // y que error existe acá
    // ...
  }
}

// ❌ Ambos son string — TypeScript no puede distinguirlos
function getPost(userId: string, postId: string) { ... }

const userId = "user_123"
const postId = "post_456"

getPost(postId, userId) // compilá, deployá, rompé

type Brand<T, B extends string> = T & { readonly __brand: B }

type UserId = Brand<string, "UserId">
type PostId = Brand<string, "PostId">

function getPost(userId: UserId, postId: PostId) { ... }

const uid = "user_123" as UserId
const pid = "post_456" as PostId

getPost(uid, pid)  // ✅
getPost(pid, uid)  // ❌ Error en compilación — exactamente lo que queremos

function createUserId(raw: string): UserId {
  if (!raw.startsWith("user_")) throw new Error(`ID inválido: ${raw}`)
  return raw as UserId
}

type Role = "admin" | "editor" | "reader"

// ❌ Anotar con Record amplía los valores — pierde true/false como literales
const perms: Record<Role, { canPublish: boolean }> = {
  admin: { canPublish: true },
}
// perms.admin.canPublish es boolean, no true

// ❌ Sin anotar, TypeScript no avisa si olvidás un rol
const perms2 = {
  admin: { canPublish: true },
  // ...olvidaste editor y reader
}

const perms = {
  admin:  { canPublish: true,  canEdit: true  },
  editor: { canPublish: false, canEdit: true  },
  reader: { canPublish: false, canEdit: false },
} satisfies Record<Role, { canPublish: boolean; canEdit: boolean }>

// perms.admin.canPublish es true (literal preservado)
// TypeScript avisa si olvidás un rol o ponés un campo extra

const ROUTES = {
  home:  "/",
  blog:  "/blog",
  admin: "/admin",
} as const satisfies Record<string, `/${string}`>

type AppRoute = typeof ROUTES[keyof typeof ROUTES]
// AppRoute = "/" | "/blog" | "/admin" — los literales, no string

// "Si T es una Promise de algo, capturá ese algo en R"
type Awaited_<T> = T extends Promise<infer R> ? R : T

type A = Awaited_<Promise<string>>   // string
type B = Awaited_<Promise<number[]>> // number[]

type AsyncReturn<T extends (...args: never[]) => Promise<unknown>> =
  T extends (...args: never[]) => Promise<infer R> ? R : never

async function getPosts(page: number): Promise<PaginatedResult<Post>> {
  return prisma.post.findMany(...)
}

// Si cambia getPosts, cambia esto solo — sin mantener tipos a mano
type GetPostsResult = AsyncReturn<typeof getPosts>
// GetPostsResult = PaginatedResult<Post>

type RouteParam<T extends string> =
  T extends `${string}:${infer Param}` ? Param : never

type BlogParam = RouteParam<"/blog/:slug">  // "slug"
type UserParam = RouteParam<"/users/:id">   // "id"

type NotificationType = "comment" | "like" | "follow" | "mention"

// ❌ Sin exhaustive check, TypeScript no avisa del caso nuevo
function handle(type: NotificationType): string {
  if (type === "comment") return "Nuevo comentario"
  if (type === "like")    return "Le gustó tu post"
  if (type === "follow")  return "Nuevo seguidor"
  return "Notificación" // "mention" cae acá silenciosamente
}

function assertNever(value: never, message?: string): never {
  throw new Error(message ?? `Caso no manejado: ${JSON.stringify(value)}`)
}

function handle(type: NotificationType): string {
  switch (type) {
    case "comment": return "Nuevo comentario"
    case "like":    return "Le gustó tu post"
    case "follow":  return "Nuevo seguidor"
    case "mention": return "Te mencionaron"
    default:
      return assertNever(type) // si olvidás un case, esto falla en compilación
  }
}

// tsconfig.json: "noUncheckedIndexedAccess": true

const posts = ["post-1", "post-2"]
const first = posts[99]  // string | undefined, no string
if (first !== undefined) {
  console.log(first.toUpperCase()) // seguro
}

// 1. Branded types para los IDs
type PostId   = Brand<string, "PostId">
type AuthorId = Brand<string, "AuthorId">

// 2. Discriminated union para los estados
type Post =
  | (BasePost & { status: "draft" })
  | (BasePost & { status: "scheduled"; publishAt: Date })
  | (BasePost & { status: "published"; publishedAt: Date; slug: string; views: number })
  | (BasePost & { status: "archived"; archivedAt: Date; reason: string })

// 3. satisfies para las transiciones
const transitions = {
  publish: (slug: string): Transition => (post) => ({ ... }),
  archive: (reason: string): Transition => (post) => ({ ... }),
} satisfies Record<string, (...args: never[]) => Transition>

// 4. infer para extraer los nombres de transiciones
type TransitionName = keyof typeof transitions  // "publish" | "archive"

// 5. Exhaustive check en el renderer
function renderPost(post: Post): string {
  switch (post.status) {
    case "draft":     return "✏️ Borrador"
    case "scheduled": return "⏰ Programado"
    case "published": return `✅ /${post.slug}`
    case "archived":  return `📦 ${post.reason}`
    default:          return assertNever(post)
  }
}

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noPropertyAccessFromIndexSignature": true,
    "verbatimModuleSyntax": true
  }
}

// ❌ ¿Qué pasa si esto falla? No hay forma de saberlo sin leer la implementación.
async function getUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`)
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  return res.json()
}

// El llamador asume que siempre funciona
const user = await getUser("u1")  // puede explotar, TypeScript no avisa

type Ok<T>  = { readonly ok: true;  readonly value: T }
type Err<E> = { readonly ok: false; readonly error: E }
type Result<T, E = Error> = Ok<T> | Err<E>

const ok  = <T>(value: T): Ok<T>  => ({ ok: true,  value })
const err = <E>(error: E): Err<E> => ({ ok: false, error })

type UserError =
  | { code: "NOT_FOUND"; message: string }
  | { code: "NETWORK";   message: string }

async function getUser(id: string): Promise<Result<User, UserError>> {
  const res = await fetch(`/api/users/${id}`).catch(e =>
    err({ code: "NETWORK" as const, message: String(e) })
  )
  if (res instanceof Response && res.status === 404)
    return err({ code: "NOT_FOUND", message: `User ${id} no existe` })
  // ...
}

// Ahora TypeScript te obliga a manejar ambos casos:
const result = await getUser("u1")
if (!result.ok) {
  switch (result.error.code) {
    case "NOT_FOUND": console.log("Usuario no encontrado"); break
    case "NETWORK":   console.log("Error de red");          break
  }
  return
}
console.log(result.value.name) // TypeScript sabe que es User

// tryCatch envuelve cualquier función que pueda lanzar
function tryCatch<T>(fn: () => T): Result<T, Error> {
  try   { return ok(fn()) }
  catch (e) { return err(e instanceof Error ? e : new Error(String(e))) }
}

// Pipeline de validación encadenado
const result = tryCatch(() => JSON.parse(rawInput))
// { ok: true, value: {...} } o { ok: false, error: SyntaxError }

// value is Post — el "type predicate" le dice a TypeScript qué es el valor
function isPost(value: unknown): value is Post {
  return (
    typeof value === "object" &&
    value !== null &&
    "slug" in value &&
    "title" in value &&
    typeof (value as Post).title === "string"
  )
}

function processContent(raw: unknown): string {
  if (isPost(raw)) return `Post: ${raw.title}`  // TypeScript sabe que raw es Post acá
  return "Desconocido"
}

function isDefined<T>(value: T | null | undefined): value is T {
  return value !== null && value !== undefined
}

const rawPosts: (Post | null | undefined)[] = [post1, null, post2, undefined]

// ❌ ANTES: filter(Boolean) devuelve (Post | null | undefined)[] — no removió los null del tipo
const bad = rawPosts.filter(Boolean)

// ✅ DESPUÉS: filter con type predicate limpia el tipo también
const clean = rawPosts.filter(isDefined)
// clean es Post[] — TypeScript lo sabe sin castings
clean.forEach(post => console.log(post.title))

function assertIsPost(value: unknown): asserts value is Post {
  if (!isPost(value)) throw new Error(`Dato inválido: ${JSON.stringify(value)}`)
}

async function publishPost(rawData: unknown) {
  assertIsPost(rawData)
  // A partir de acá, TypeScript sabe que rawData es Post — sin if, sin castings
  console.log(`Publicando: ${rawData.title}`)
}

// { [K in keyof T]: ... } — "para cada key de T, hacé algo"

type Nullable<T>  = { [K in keyof T]: T[K] | null }
type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T

// Key remapping con `as` — renombrá las keys durante el mapeo
type AsyncGetters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => Promise<T[K]>
}

type UserGetters = AsyncGetters<{ id: string; name: string }>
// { getId: () => Promise<string>; getName: () => Promise<string> }

type PostStatusConfig = {
  label: string
  color: string
  icon: string
}

const POST_STATUS = {
  draft:     { label: "Borrador",   color: "#9ca3af", icon: "✏️"  },
  scheduled: { label: "Programado", color: "#fbbf24", icon: "⏰"  },
  published: { label: "Publicado",  color: "#00ff88", icon: "✅"  },
  archived:  { label: "Archivado",  color: "#8b5cf6", icon: "📦"  },
} satisfies Record<"draft" | "scheduled" | "published" | "archived", PostStatusConfig>

// satisfies verifica que estén todos los estados y todos los campos
// Los valores mantienen sus literales — color es "#9ca3af", no string
type PostStatusKey = keyof typeof POST_STATUS
// "draft" | "scheduled" | "published" | "archived"

type FormFields<T> = {
  [K in keyof T]: {
    value: string
    error: string | null
    touched: boolean
  }
}

// El tipo del formulario se deriva del modelo — si cambia User, cambia UserForm
type UserForm = FormFields<Pick<User, "name" | "email">>

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noPropertyAccessFromIndexSignature": true,
    "verbatimModuleSyntax": true
  }
}