TypeScript Academy · Pelajaran

Penjelasan Referensi Proyek TypeScript

Gunakan pengaturan composite dan references untuk build multipaket.

Penjelasan Referensi Proyek TypeScript adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa Itu Referensi Proyek

Referensi proyek memungkinkan Anda membagi basis kode TypeScript menjadi beberapa proyek tsconfig yang menyatakan dependensi satu sama lain, sehingga pembangunan dapat dilakukan secara inkremental dan terisolasi.

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

Proyek Komposit

Setiap proyek yang direferensikan harus memiliki "composite": true dalam tsconfig-nya. Ini mengaktifkan penyimpanan deklarasi dan pelacakan dependensi.

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

Membangun dengan tsc --build

Jalankan tsc --build (atau tsc -b) dari akar untuk membangun semua proyek yang direferensikan sesuai urutan dependensi.

# Build all projects
tsc --build

# Build and watch
tsc --build --watch

# Clean build outputs
tsc --build --clean

Pembangunan Ulang Inkremental

Setelah pembangunan pertama, tsc --build hanya mengompilasi ulang proyek yang berkas sumber atau dependensinya berubah, sehingga repositori besar menjadi jauh lebih cepat.

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

Konsumsi Berkas Deklarasi

Proyek yang direferensikan menggunakan dependensinya melalui berkas .d.ts yang dihasilkan di dist/, bukan dengan mengurai ulang berkas sumber TypeScript.

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

Konfigurasi Jalur

Atur paths di tsconfig akar atau gunakan exports dalam package.json agar TypeScript dapat menyelesaikan impor paket dengan benar selama pengembangan.

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

Mempertahankan Urutan Pembangunan

TypeScript secara otomatis menentukan urutan pembangunan dari graf referensi. Referensi melingkar terdeteksi dan dilaporkan sebagai galat.

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

outDir dan rootDir

Setiap proyek komposit sebaiknya memiliki konfigurasi outDir dan rootDir untuk mengatur tata letak keluaran serta mencegah berkas bocor melintasi batas paket.

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

Mengintegrasikan Alat Pembangunan

Turborepo, Nx, dan Lerna terintegrasi dengan referensi proyek untuk menyimpan hasil dan menjalankan pembangunan secara paralel berdasarkan graf dependensi.

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

Memantau Banyak Proyek

tsc --build --watch memantau semua proyek yang direferensikan dan mengompilasi ulang secara inkremental setiap kali terjadi perubahan, sehingga memberikan umpan balik hampir seketika dalam repositori tunggal.

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

Ringkasan: Referensi Proyek

Referensi proyek membagi TypeScript menjadi unit pembangunan yang terisolasi dan dapat disimpan. Atur composite: true, nyatakan references, dan gunakan tsc --build untuk pembangunan inkremental yang cepat dan benar dalam repositori tunggal.

Pemeriksaan Singkat

Opsi tsconfig apa yang diperlukan agar sebuah proyek dapat direferensikan oleh proyek lain?

Yang Anda Pelajari

Referensi proyek TypeScript memungkinkan pembangunan yang cepat dan terisolasi dalam repositori tunggal. Konfigurasikan composite: true, nyatakan dependensi melalui references, dan bangun dengan tsc --build untuk kompilasi inkremental.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penjelasan Referensi Proyek TypeScript” gratis?

Ya — teks lengkap “Penjelasan Referensi Proyek TypeScript” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penjelasan Referensi Proyek TypeScript”?

Gunakan pengaturan composite dan references untuk build multipaket. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Penjelasan Referensi Proyek TypeScript” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Penjelasan Referensi Proyek TypeScript
Workspace pnpm dengan TypeScript
Strategi Paket Tipe Bersama
Build Inkremental dan Cache dalam Monorepo

← Kembali ke TypeScript Academy