Cara Menggunakan TypeScript dalam Pengaturan Monorepo

Pengaturan monorepo memungkinkan Anda mengelola beberapa paket atau proyek dalam satu repositori. Dengan TypeScript, pengaturan ini sangat ampuh untuk berbagi tipe, antarmuka, dan bahkan utilitas di berbagai paket. Panduan ini akan memandu Anda tentang cara mengatur TypeScript dalam lingkungan monorepo.

1. Menyiapkan Monorepo

Untuk menyiapkan monorepo, Anda dapat menggunakan alat seperti npm workspaces atau yarn workspaces. Alat-alat ini memungkinkan Anda mengelola beberapa paket dalam repositori yang sama dan memudahkan pembagian kode di berbagai proyek.

1.1 Menginisialisasi Monorepo

Pertama, buat folder baru untuk monorepo Anda dan inisialisasi dengan npm atau yarn.

mkdir my-monorepo
cd my-monorepo
npm init -y

Kemudian, konfigurasikan ruang kerja di package.json Anda:

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Pengaturan ini memberitahu npm atau yarn bahwa semua paket akan berada di dalam folder packages.

2. Menambahkan Paket ke Monorepo

Buat dua paket di monorepo Anda. Untuk contoh ini, kita akan membuat paket shared untuk kode yang dapat digunakan kembali dan paket web-app untuk aplikasi frontend.

mkdir -p packages/shared
mkdir -p packages/web-app

Di dalam setiap paket, inisialisasi package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Menambahkan TypeScript ke Monorepo

Selanjutnya, kita akan menyiapkan TypeScript. Instal TypeScript dan dependensi yang diperlukan di root monorepo Anda:

npm install typescript --save-dev

Buat tsconfig.json tingkat root untuk menentukan konfigurasi TypeScript untuk seluruh monorepo:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

Kuncinya di sini adalah opsi paths, yang memungkinkan TypeScript memahami impor dari berbagai paket di monorepo.

4. Mengonfigurasi TypeScript di Setiap Paket

Setiap paket memerlukan tsconfig.json-nya sendiri agar dapat berfungsi dengan baik di monorepo. Berikut ini contoh konfigurasi untuk paket shared:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Dan untuk paket web-app:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Sekarang, TypeScript dapat digunakan di setiap paket, dan konfigurasinya dibagikan dari root tsconfig.json.

5. Menambahkan Kode TypeScript ke Paket

Mari tambahkan beberapa contoh kode TypeScript ke kedua paket. Dalam paket shared, buat folder src dan tambahkan file TypeScript:

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

Dalam index.ts, ekspor fungsi sederhana:

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

Dalam paket web-app, buat folder src dan file index.ts:

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

Sekarang, impor fungsi yang dibagikan:

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. Membangun Monorepo

Untuk mengkompilasi semua kode TypeScript di monorepo, kita perlu menggunakan kompiler TypeScript. Di root monorepo, jalankan:

npx tsc --build

Perintah ini akan mengkompilasi semua paket dengan mengikuti file tsconfig.json masing-masing.

Kesimpulan

Dalam panduan ini, kami membahas cara menyiapkan dan menggunakan TypeScript dalam monorepo. Dengan mengatur kode Anda dalam struktur monorepo, Anda dapat dengan mudah berbagi kode di beberapa paket, sehingga proses pengembangan Anda menjadi lebih efisien. Dengan pengetikan dan referensi proyek TypeScript yang kuat, pengaturan ini sangat cocok untuk aplikasi berskala besar atau pustaka bersama.