Konfigurasi Lanjutan TypeScript untuk Basis Kode Besar

Mengelola basis kode besar dengan TypeScript memerlukan penyempurnaan pada kompiler dan konfigurasi proyek untuk memastikan skalabilitas, kemudahan perawatan, dan kinerja. Artikel ini membahas teknik konfigurasi TypeScript tingkat lanjut yang membantu dalam menangani basis kode besar secara efisien.

Langkah 1: Modularisasi dengan Referensi Proyek

Fitur Project References dari TypeScript memungkinkan pemisahan basis kode yang besar menjadi proyek-proyek yang lebih kecil yang dapat dikompilasi secara independen. Fitur ini meningkatkan waktu pembuatan dan mengatur kode secara lebih efektif.

Untuk menggunakan referensi proyek, buat tsconfig.json di setiap subproyek dan tsconfig.json tingkat root yang menyertakan referensi ini.

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "outDir": "./dist"
  },
  "references": [
    { "path": "./core" },
    { "path": "./ui" }
  ]
}

Setiap subproyek juga harus memiliki tsconfig.json sendiri yang menentukan "composite": true.

Langkah 2: Aktifkan Pemeriksaan Tipe Ketat

Dalam basis kode yang besar, mengaktifkan pemeriksaan tipe yang ketat memastikan deteksi kesalahan lebih awal dan menegakkan keamanan tipe yang lebih baik. Tambahkan opsi berikut di tsconfig.json Anda:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true
  }
}

Konfigurasi ini memungkinkan semua pemeriksaan ketat yang memastikan kode Anda bebas dari tipe yang ambigu atau tidak aman.

Langkah 3: Konfigurasikan Build Inkremental

Untuk basis kode yang besar, mengkompilasi keseluruhan proyek dari awal dapat memakan waktu. Opsi build inkremental TypeScript mempercepat proses dengan menggunakan kembali informasi dari build sebelumnya.

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./.tsbuildinfo"
  }
}

Opsi ini memberi tahu TypeScript untuk menyimpan informasi pembuatan dalam sebuah berkas, yang dapat digunakan kembali dalam kompilasi berikutnya untuk melewati kompilasi ulang berkas yang tidak diubah.

Langkah 4: Gunakan Pemetaan Jalur untuk Impor yang Lebih Bersih

Seiring dengan pertumbuhan basis kode, impor yang sangat bertingkat dapat menjadi sulit dikelola. Fitur pemetaan jalur TypeScript memungkinkan jalur impor yang lebih bersih.

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@core/*": ["core/*"],
      "@ui/*": ["ui/*"]
    }
  }
}

Ini memungkinkan Anda mengimpor modul seperti:

import { UserService } from '@core/services/userService';

alih-alih jalur relatif seperti import { UserService } dari '../../../core/services/userService'.

Langkah 5: Optimalkan Build dengan Exclude dan Include

Dalam basis kode yang besar, Anda mungkin ingin mengecualikan file atau direktori tertentu agar tidak dikompilasi guna meningkatkan kinerja. Gunakan opsi exclude dan include di tsconfig.json Anda untuk kontrol yang lebih baik.

{
  "compilerOptions": {
    "outDir": "./dist"
  },
  "exclude": [
    "node_modules",
    "test",
    "**/*.spec.ts"
  ],
  "include": [
    "src/**/*.ts"
  ]
}

Konfigurasi ini memastikan bahwa hanya file-file yang diperlukan dalam direktori src yang dikompilasi, sambil mengecualikan pengujian dan file-file yang tidak diperlukan.

Langkah 6: Gunakan Alias ​​untuk Beberapa Konfigurasi

Dalam proyek besar, Anda mungkin memerlukan konfigurasi yang berbeda untuk pengembangan, pengujian, dan produksi. Anda dapat membuat file tsconfig yang terpisah dan memperluas konfigurasi dasar.

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true
  }
}

Ini memungkinkan Anda untuk menentukan konfigurasi umum di tsconfig.base.json dan mengesampingkan opsi spesifik sebagaimana diperlukan untuk lingkungan yang berbeda.

Langkah 7: Memanfaatkan Pemisahan Kode untuk Performa

Untuk basis kode yang besar, pemisahan kode dapat meningkatkan waktu muat dengan membagi aplikasi menjadi potongan-potongan yang lebih kecil dan dimuat dengan lambat. TypeScript bekerja dengan lancar dengan teknik pemisahan kode dalam kerangka kerja seperti React atau Webpack.

const LazyComponent = React.lazy(() => import('./components/LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

Hal ini memastikan bahwa bagian yang tidak penting pada aplikasi Anda dimuat hanya saat diperlukan, sehingga meningkatkan waktu pemuatan awal.

Kesimpulan

Konfigurasi TypeScript tingkat lanjut sangat penting untuk menangani basis kode besar secara efisien. Dengan menggunakan fitur-fitur seperti referensi proyek, pemeriksaan tipe yang ketat, pembuatan bertahap, pemetaan jalur, dan pemisahan kode, Anda dapat meningkatkan skala aplikasi Anda sambil mempertahankan kinerja dan kemudahan pengelolaan. Menerapkan teknik-teknik ini akan memperlancar pengembangan dan memastikan skalabilitas jangka panjang.