0Pricing
TypeScript Academy · Урок

Объяснение ссылок на проекты TypeScript

Используйте параметры composite и references для сборок из нескольких пакетов

«Объяснение ссылок на проекты TypeScript» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Что такое ссылки на проекты

Ссылки на проекты позволяют разделить кодовую базу TypeScript на несколько проектов tsconfig, которые объявляют зависимости друг от друга, обеспечивая инкрементальные изолированные сборки.

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

Составные проекты

Каждый проект, на который есть ссылка, должен содержать в своём tsconfig параметр "composite": true. Это включает кэширование объявлений и отслеживание зависимостей.

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

Сборка с помощью tsc --build

Запустите tsc --build (или tsc -b) из корневого каталога, чтобы собрать все проекты, на которые есть ссылки, в порядке зависимостей.

# Build all projects
tsc --build

# Build and watch
tsc --build --watch

# Clean build outputs
tsc --build --clean

Инкрементальные пересборки

После первой сборки tsc --build перекомпилирует только проекты, исходные файлы или зависимости которых изменились, что значительно ускоряет работу с большими репозиториями.

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

Использование файлов объявлений

Проект, на который есть ссылка, использует свои зависимости через созданные файлы .d.ts в dist/, а не повторно разбирает исходные файлы TypeScript.

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

Настройка путей

Настройте paths в корневом tsconfig или используйте exports в package.json, чтобы TypeScript корректно разрешал импорты пакетов во время разработки.

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

Сохранение порядка сборки

TypeScript автоматически определяет порядок сборки по графу ссылок. Циклические ссылки обнаруживаются и сообщаются как ошибки.

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

outDir и rootDir

Для каждого составного проекта следует настроить outDir и rootDir, чтобы управлять структурой вывода и не допускать утечки файлов за границы пакета.

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

Интеграция с инструментами сборки

Turborepo, Nx и Lerna интегрируются со ссылками на проекты, кэшируя и выполняя сборки параллельно на основе графа зависимостей.

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

Наблюдение за несколькими проектами

tsc --build --watch отслеживает все проекты, на которые есть ссылки, и инкрементально перекомпилирует их при каждом изменении, обеспечивая почти мгновенную обратную связь в монорепозиториях.

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

Итоги: ссылки на проекты

Ссылки на проекты разделяют TypeScript на изолированные единицы сборки, поддерживающие кэширование. Установите composite: true, объявите references и используйте tsc --build для быстрых корректных инкрементальных сборок в монорепозиториях.

Быстрая проверка

Какая опция tsconfig необходима, чтобы на проект мог ссылаться другой проект?

Чему Вы научились

Ссылки на проекты TypeScript обеспечивают быстрые изолированные сборки в монорепозиториях. Настройте composite: true, объявите зависимости через references и выполняйте сборку с помощью tsc --build для инкрементальной компиляции.

Часто задаваемые вопросы

Урок «Объяснение ссылок на проекты TypeScript» бесплатный?

Да — полный текст урока «Объяснение ссылок на проекты TypeScript» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Объяснение ссылок на проекты TypeScript»?

Используйте параметры composite и references для сборок из нескольких пакетов Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Объяснение ссылок на проекты TypeScript»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Объяснение ссылок на проекты TypeScript
  2. Рабочие пространства pnpm с TypeScript
  3. Стратегия общего пакета типов
  4. Инкрементальные сборки и кэш в монорепозиториях
← Назад к TypeScript Academy