Увійти Реєстрація
Блог Серії
Кар'єра
Вакансії Компанії
Навчання
Документація Співбесіди Тестування Відео
Екосистема
Пакети Ресурси Проєкти Інструменти Події
Інше
Про нас Реклама

Навіщо project references і composite у великих проєктах і монорепозиторіях?

Великий кодовий масив в одному tsconfig.json перевіряється цілком при кожній зміні. Project references ділять його на окремі проєкти з явними залежностями, і TypeScript перевіряє лише змінене та залежне від нього.

Структура:

// tsconfig.json (корінь) - лише посилання
{
  "files": [],
  "references": [
    { "path": "./packages/shared" },
    { "path": "./packages/web" },
    { "path": "./packages/admin" }
  ]
}

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

// packages/web/tsconfig.json
{
  "references": [{ "path": "../shared" }]
}
tsc -b            # зібрати всі проєкти в порядку залежностей
tsc -b --watch

composite: true - вимоги до проєкту, на який посилаються: генерація .d.ts, явний rootDir, усі файли в include. Залежний проєкт бачить лише оголошення (.d.ts) залежності, а не її вихідний код - тому перевірка швидша.

incremental - зберегти результати попередньої перевірки у файлі .tsbuildinfo і наступного разу перевіряти лише змінене. Для composite увімкнено автоматично.

Що це дає:

  • швидкість: зміна в admin не змушує перевіряти web;
  • межі: пакет не може імпортувати з іншого, якщо на нього немає посилання, - архітектура перевіряється компілятором;
  • різні налаштування для частин: код браузера з lib: ["dom"], конфіги й сервер - з типами Node.js. Саме так шаблон Vite ділить проєкт на tsconfig.app.json і tsconfig.node.json.

TypeScript 7 збирає незалежні проєкти паралельно (прапорець --builders), тож виграш від поділу ще більший. Обмежувач - граф залежностей: проєкт збирається лише після тих, від яких залежить. Опція isolatedDeclarations дає змогу генерувати .d.ts без перевірки типів залежностей і розпаралелити й це.

Пастки:

  • rootDir з TypeScript 6.0 за замовчуванням - каталог з tsconfig.json. Якщо вихідні файли в src/, а rootDir не вказано, результат опиниться в dist/src/... замість dist/...;
  • застарілі .d.ts: редактор може показувати старі типи залежності, доки її не перезібрано;
  • skipLibCheck (пропустити перевірку .d.ts) теж помітно пришвидшує збірку, але ховає помилки в оголошеннях власних пакетів - його вмикають свідомо.

Докладніше в документації: Project references

Схожі питання