0Pricing
TypeScript Academy · Lección

Explicación de las referencias de proyectos de TypeScript

Utilice la configuración composite y references para compilaciones con varios paquetes.

Explicación de las referencias de proyectos de TypeScript es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 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.

¿Qué son las referencias de proyectos?

Las referencias de proyectos permiten dividir una base de código de TypeScript en varios proyectos de tsconfig que declaran dependencias entre sí, lo que posibilita compilaciones incrementales y aisladas.

// tsconfig.json (root)
{
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/ui" }
  ]
}

Proyectos compuestos

Cada proyecto referenciado debe tener "composite": true en su tsconfig. Esto habilita el almacenamiento en caché de las declaraciones y el seguimiento de dependencias.

// packages/core/tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "outDir": "./dist"
  }
}

Compilación con tsc --build

Ejecute tsc --build (o tsc -b) desde la raíz para compilar todos los proyectos referenciados en el orden de sus dependencias.

# Build all projects
tsc --build

# Build and watch
tsc --build --watch

# Clean build outputs
tsc --build --clean

Recompilaciones incrementales

Después de la primera compilación, tsc --build solo recompila los proyectos cuyos archivos de origen o dependencias hayan cambiado, lo que acelera considerablemente los repositorios grandes.

# Only changed packages are rebuilt
tsc --build
# Output: 2/5 projects up to date — skipping

Consumo de archivos de declaración

Un proyecto referenciado consume sus dependencias mediante los archivos .d.ts generados en dist/, en lugar de volver a analizar los archivos de TypeScript de origen.

// packages/ui imports from packages/core
import { Button } from "@myapp/core"; // resolved via dist/index.d.ts

Configuración de rutas

Configure paths en el tsconfig raíz o use exports en package.json para que TypeScript resuelva correctamente los imports de paquetes durante el desarrollo.

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"]
    }
  }
}

Conservación del orden de compilación

TypeScript determina automáticamente el orden de compilación a partir del grafo de referencias. Las referencias circulares se detectan y se notifican como errores.

// Circular reference error example:
// packages/core references packages/ui
// packages/ui references packages/core
// Error: Circular project reference

outDir y rootDir

Cada proyecto compuesto debe tener configurados outDir y rootDir para controlar la estructura de salida y evitar que se filtren archivos entre los límites de los paquetes.

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

Integración con herramientas de compilación

Turborepo, Nx y Lerna se integran con las referencias de proyectos para almacenar compilaciones en caché y ejecutarlas en paralelo según el grafo de dependencias.

// turbo.json — declare TypeScript build as a pipeline step
{
  "pipeline": {
    "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }
  }
}

Observación de varios proyectos

tsc --build --watch observa todos los proyectos referenciados y los recompila incrementalmente con cada cambio, ofreciendo una respuesta casi inmediata en los monorepos.

# Terminal: tsc --build --watch
# [9:00:01 AM] Found 0 errors. Watching for file changes.

Resumen: referencias de proyectos

Las referencias de proyectos dividen TypeScript en unidades de compilación aisladas y almacenables en caché. Configure composite: true, declare references y use tsc --build para obtener compilaciones incrementales rápidas y correctas en monorepos.

Comprobación rápida

¿Qué opción de tsconfig es necesaria para que otro proyecto pueda referenciar un proyecto?

Lo que ha aprendido

Las referencias de proyectos de TypeScript permiten realizar compilaciones rápidas y aisladas en monorepos. Configure composite: true, declare las dependencias mediante references y compile con tsc --build para obtener una compilación incremental.

Preguntas frecuentes

¿La lección «Explicación de las referencias de proyectos de TypeScript» es gratis?

Sí — el texto completo de «Explicación de las referencias de proyectos de TypeScript» 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 «Explicación de las referencias de proyectos de TypeScript»?

Utilice la configuración composite y references para compilaciones con varios paquetes. 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 1 de 4.

¿Cuánto tiempo toma la lección «Explicación de las referencias de proyectos de TypeScript»?

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