0Pricing
TypeScript Academy · Lección

Estrategia para un paquete de tipos compartidos

Cree un paquete de tipos específico que se utilice en todo el monorepo.

Estrategia para un paquete de tipos compartidos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Por qué usar un paquete de tipos compartido?

Compartir tipos entre el frontend y el backend elimina las divergencias entre los contratos de la API. Una única fuente de verdad permite detectar errores durante la compilación cuando cambia la estructura de la API.

// packages/types/src/index.ts
export interface User { id: string; name: string; email: string; }
export interface ApiResponse<T> { data: T; error?: string; }

Estructura del paquete

Mantenga el paquete de tipos minimalista: solo exportaciones de tipos, sin lógica de ejecución. Así no tendrá efectos secundarios y podrá aplicar tree-shaking.

packages/types/
├── src/
│   ├── index.ts      # re-exports all
│   ├── user.ts
│   ├── product.ts
│   └── api.ts
├── tsconfig.json
└── package.json

tsconfig para un paquete de tipos

Habilite emitDeclarationOnly para no generar JavaScript: solo archivos .d.ts a los que hagan referencia los consumidores.

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Consumo del paquete de tipos

Haga referencia al paquete de tipos tanto en la API como en la aplicación web e importe los tipos con import type para evitar sobrecarga durante la ejecución.

import type { User, ApiResponse } from "@myapp/types";

async function getUser(id: string): Promise<ApiResponse<User>> {
  // ...
}

Conservación de la seguridad de serialización de los tipos

Los tipos compartidos entre el cliente y el servidor solo deben incluir valores serializables como JSON. Evite los objetos Date; use string (ISO) en su lugar.

// Good: serialization-safe
interface Event { id: string; createdAt: string; /* ISO date */ }
// Bad: Date is not JSON-serializable
interface Event { id: string; createdAt: Date; }

Versionado del paquete de tipos

Versione el paquete de tipos con semver. Un cambio incompatible, como eliminar o cambiar el nombre de un campo, requiere aumentar la versión mayor.

# Breaking change: major bump
npm version major
# Adding optional fields: minor bump
npm version minor

Generación de tipos a partir de OpenAPI

Automatice el paquete de tipos generándolo a partir de una especificación de OpenAPI mediante openapi-typescript. Así se garantiza que los tipos siempre coincidan con el backend.

npx openapi-typescript ./api/openapi.yaml -o ./packages/types/src/api.ts

Uso de Zod para tipos de ejecución y de compilación

Defina los tipos con esquemas de Zod e infiera a partir de ellos los tipos de TypeScript. Tanto la validación durante la ejecución como los tipos estáticos proceden de la misma fuente.

import { z } from "zod";
export const UserSchema = z.object({ id: z.string(), name: z.string() });
export type User = z.infer<typeof UserSchema>;

Cómo evitar dependencias circulares

El paquete de tipos no debe importar elementos de otros paquetes del workspace para evitar cadenas de dependencias circulares. Manténgalo como un nodo hoja del grafo de dependencias.

// types/ should not import from ui/ or api/
// ui/ and api/ both import from types/

Pruebas de corrección de tipos

Use tsd para escribir aserciones a nivel de tipos que verifiquen que los tipos compartidos cumplen las expectativas.

import { expectType } from "tsd";
import type { User } from "@myapp/types";
expectType<User>({ id: "1", name: "Alice", email: "a@b.com" });

Resumen: estrategia de tipos compartidos

Un paquete de tipos compartido elimina las divergencias de la API: emite solo declaraciones, mantiene los tipos serializables como JSON, usa versionado semántico, puede generarse automáticamente a partir de OpenAPI y se prueba con tsd.

Comprobación rápida

¿Por qué los tipos compartidos de una API deben usar string en lugar de Date?

Lo que ha aprendido

Un paquete de tipos compartido es una única fuente de verdad para los contratos de la API. Manténgalo limitado a declaraciones, seguro para JSON y versionado con semver; también puede generarlo a partir de OpenAPI para eliminar las divergencias entre el frontend y el backend.

Preguntas frecuentes

¿La lección «Estrategia para un paquete de tipos compartidos» es gratis?

Sí — el texto completo de «Estrategia para un paquete de tipos compartidos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Estrategia para un paquete de tipos compartidos»?

Cree un paquete de tipos específico que se utilice en todo el monorepo. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Estrategia para un paquete de tipos compartidos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Explicación de las referencias de proyectos de TypeScript
  2. Espacios de trabajo pnpm con TypeScript
  3. Estrategia para un paquete de tipos compartidos
  4. Compilaciones incrementales y caché en monorepos
← Volver a TypeScript Academy