Deklarasi Terisolasi TypeScript: Tingkatkan Kecepatan Monorepo

Proses build monorepo sering kali melambat karena cara TypeScript menangani file deklarasi. Secara default, TypeScript menganalisis setiap rantai impor sebelum membuat satu file .d.ts. Hal ini menciptakan antrean panjang di mana paket-paket harus saling menunggu.

Anda dapat mengatasi hal ini dengan flag --isolatedDeclarations.

Flag ini memungkinkan build paralel. Alih-alih menunggu dependensi, setiap paket menghasilkan deklarasinya sendiri secara independen. Tim dapat melihat peningkatan kecepatan build sebesar 3x hingga 15x.

The Problem: TypeScript biasanya melakukan inferensi tipe di seluruh batas modul. Jika Paket A bergantung pada Paket B, kompiler harus menyelesaikan B sepenuhnya sebelum dapat mulai mengerjakan A. Dalam monorepo yang besar, sebagian besar paket akan menganggur sementara kompiler bekerja satu per satu.

The Solution: Flag --isolatedDeclarations mengubah aturan tersebut. Flag ini mengharuskan Anda menulis anotasi tipe secara eksplisit untuk semua hal yang Anda ekspor.

The Tradeoff: Kode Anda akan memiliki lebih banyak teks. Anda harus menambahkan tipe pengembalian (return types) ke fungsi dan tipe ke konstanta secara manual. Anda tidak dapat mengandalkan kompiler untuk menebak tipe-tipe ini dari kode Anda.

The Result: Karena setiap ekspor memiliki tipe yang jelas, kompiler tidak perlu melihat paket lain untuk memahaminya. Kompiler dapat memproses setiap paket pada saat yang bersamaan.

Real World Results:

  • Sebuah monorepo dengan 18 paket menurunkan waktu build dari 47 detik menjadi 3,2 detik.
  • Sebuah monorepo dengan 32 paket mengalami peningkatan 8x lipat pada pipeline CI.
  • Performa berskala dengan core CPU Anda. Lebih banyak core berarti lebih banyak paket yang dapat di-build sekaligus.

How to Migrate:

  1. Aktifkan flag tersebut di tsconfig.json root Anda dan di setiap konfigurasi paket.
  2. Gunakan flag "composite" untuk memungkinkan referensi proyek (project references).
  3. Tambahkan tipe pengembalian eksplisit pada fungsi yang diekspor:

// Sebelum export function add(a: number, b: number) { return a + b; }

// Sesudah export function add(a: number, b: number): number { return a + b; }

  1. Tambahkan tipe eksplisit pada konstanta yang diekspor:

// Sebelum export const SETTINGS = { port: 3000 };

// Sesudah export const SETTINGS: { port: number } = { port: 3000 };

Jika Anda tidak menambahkan tipe-tipe ini, kompiler akan memunculkan error. Hal ini memastikan tipe Anda bersifat deterministik dan cepat.

Source: https://dev.to/jsmanifest/typescript-isolated-declarations-real-world-performance-gains-in-monorepo-build-times-25g3