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

В больших проектах на TypeScript часто возникает необходимость отделять общий код от основного проекта.
Сделать это можно например с помощью Project References.

Рабочий пример можно посмотреть на github.

Например в нашем проекте мы будем использовать такую структуру папок:

|- shared (общий код между проектами)
|- server (бекенд)
|- client (фронтенд)

Shared-проект

Настройка TypeScript в shared-проекте

tsconfig.json

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

Общий код в shared-проекте

// shared/src/index.ts
export const HOST = "localhost";
export const PORT = 3000;

Server-проект

Настройка TypeScript в server-проекте

tsconfig.json

{
  "compilerOptions": {
    // ...
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "references": [
    {
      "path": "../shared"
    }
  ]
}

Подключение общего кода код в server-проекте

// server/src/app.ts
import { HOST, PORT } from '../../shared/dist';

console.log(`${HOST}:${PORT}`);

Компиляция и запуск server-проекта

Компиляция server-проекта (добавляем флаг -b для сборки связанного проекта):

npx tsc -b

Запуск server-проекта:

node dist/app.js

Решение проблемы с путями (ссылка на shared-проект)

Импорт в server-проекте выглядит не очень красиво (import { HOST, PORT } from '../../shared/dist').

Для решения этой проблемы создадим промежуточный модуль shared.ts:

// server/src/shared.ts
export * from '../../shared/dist';

Теперь в основном модуле можно использовать более короткий путь для импорта:

// server/src/app.ts
import { HOST, PORT } from './shared';

console.log(`${HOST}:${PORT}`);