Tipificación de respuestas API y Zod

import { z } from "zod";
 
const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string().email(),
});
 
type User = z.infer<typeof UserSchema>;
 
async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`https://api.example.com/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const json: unknown = await res.json();
  return UserSchema.parse(json);
}

// lib/api/schemas.ts - formas compartidas para endpoints de lista y detalle
import { z } from "zod";
 
export const ApiErrorSchema = z.object({
  error: z.object({
    code: z.string(),
    message: z.string(),
  }),
});
 
export const UserSummarySchema = z.object({
  id: z.string(),
  name: z.string(),
  avatarUrl: z.string().url().nullable(),
});
 
export const UserDetailSchema = UserSummarySchema.extend({
  email: z.string().email(),
  createdAt: z.string().datetime(),
});
 
export const UserListSchema = z.object({
  items: z.array(UserSummarySchema),
  nextCursor: z.string().nullable(),
});
 
export type UserSummary = z.infer<typeof UserSummarySchema>;
export type UserDetail = z.infer<typeof UserDetailSchema>;
export type UserList = z.infer<typeof UserListSchema>;

// lib/api/client.ts - un helper de fetch validado para la aplicación
import {
  ApiErrorSchema,
  UserDetailSchema,
  UserListSchema,
  type UserDetail,
  type UserList,
} from "./schemas";
 
const BASE = "https://api.example.com";
 
async function readJson(res: Response): Promise<unknown> {
  const text = await res.text();
  if (!text) return null;
  return JSON.parse(text) as unknown;
}
 
function throwApiError(status: number, body: unknown): never {
  const parsed = ApiErrorSchema.safeParse(body);
  if (parsed.success) {
    throw new Error(`${parsed.data.error.code}: ${parsed.data.error.message}`);
  }
  throw new Error(`HTTP ${status}`);
}
 
export async function fetchUserList(cursor?: string): Promise<UserList> {
  const url = new URL("/v1/users", BASE);
  if (cursor) url.searchParams.set("cursor", cursor);
 
  const res = await fetch(url);
  const json = await readJson(res);
  if (!res.ok) throwApiError(res.status, json);
 
  return UserListSchema.parse(json);
}
 
export async function fetchUserDetail(id: string): Promise<UserDetail> {
  const res = await fetch(`${BASE}/v1/users/${id}`);
  const json = await readJson(res);
  if (!res.ok) throwApiError(res.status, json);
 
  return UserDetailSchema.parse(json);
}

// app/users/[id].tsx - pantalla consume solo tipos validados
import { useEffect, useState } from "react";
import { ActivityIndicator, Text, View, StyleSheet } from "react-native";
import { useLocalSearchParams } from "expo-router";
import { fetchUserDetail, type UserDetail } from "../../lib/api/client";
 
export default function UserDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const [user, setUser] = useState<UserDetail | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const data = await fetchUserDetail(String(id));
        if (!cancelled) setUser(data);
      } catch (e) {
        if (!cancelled) setError(e instanceof Error ? e.message : "Request failed");
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [id]);
 
  if (error) {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>{error}</Text>
      </View>
    );
  }
 
  if (!user) {
    return (
      <View style={styles.center}>
        <ActivityIndicator />
      </View>
    );
  }
 
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>{user.name}</Text>
      <Text style={styles.meta}>{user.email}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 24 },
  center: { flex: 1, alignItems: "center", justifyContent: "center" },
  title: { fontSize: 22, fontWeight: "600" },
  meta: { marginTop: 8, color: "#64748b" },
  error: { color: "#dc2626" },
});

import { z } from "zod";
 
const NotificationSchema = z.discriminatedUnion("kind", [
  z.object({ kind: z.literal("push"), title: z.string(), body: z.string() }),
  z.object({ kind: z.literal("sms"), phone: z.string(), message: z.string() }),
]);
 
// El backend envía strings ISO; la aplicación quiere objetos Date
const EventSchema = z.object({
  id: z.string(),
  startsAt: z.string().datetime().transform((s) => new Date(s)),
});

import { z } from "zod";
 
// Única fuente de verdad - exporta esquema + tipo inferido juntos
export const DeviceSchema = z.object({
  id: z.string(),
  name: z.string(),
  platform: z.enum(["ios", "android"]),
});
 
export type Device = z.infer<typeof DeviceSchema>;
 
// Estrecha unknown sin afirmación
function isDevice(value: unknown): value is Device {
  return DeviceSchema.safeParse(value).success;
}
 
// Tipos de entrada vs salida al usar .transform o .default
type DeviceInput = z.input<typeof DeviceSchema>;
type DeviceOutput = z.output<typeof DeviceSchema>;