TypeScript 프로젝트 참조 이해하기

프로젝트 참조란 무엇입니까

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

복합 프로젝트

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

tsc --build로 빌드하기

# Build all projects
tsc --build

# Build and watch
tsc --build --watch

# Clean build outputs
tsc --build --clean

증분 재빌드

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

선언 파일 사용

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

경로 구성

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

빌드 순서 유지

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

outDir 및 rootDir

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

빌드 도구와 통합하기

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

여러 프로젝트 감시하기

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

복습: 프로젝트 참조

빠른 확인

학습 내용