Mini Project TypeScript: Membuat Aplikasi Manajemen Data Produk (CRUD) Level Menengah

Belajar TypeScript tidak cukup hanya memahami teori dan sintaks dasar. Untuk benar-benar menguasainya, kita perlu menerapkannya dalam sebuah proyek nyata. Mini project TypeScript adalah langkah ideal bagi developer tingkat menengah yang ingin meningkatkan kemampuan berpikir logis, pemahaman struktur aplikasi, dan penerapan konsep seperti class, interface, modularisasi, serta error handling.

Dalam latihan ini, kita akan membangun aplikasi manajemen data produk sederhana menggunakan TypeScript. Proyek ini berfokus pada operasi CRUD (Create, Read, Update, Delete) yang sering ditemukan dalam pengembangan aplikasi web dan backend. Tujuannya agar Anda terbiasa membuat sistem data terstruktur dan modular dengan pendekatan berorientasi objek.

Tujuan Mini Project TypeScript

Dalam latihan ini, Anda akan belajar:

• Mengelola data menggunakan class dan interface.

• Membuat fungsi CRUD dasar untuk menambah, menampilkan, mengedit, dan menghapus produk.

• Mengorganisir kode dalam struktur proyek yang modular.

• Menerapkan error handling sederhana untuk validasi input.

Struktur Proyek

Sebelum mulai, buat struktur proyek dasar seperti berikut:

mini-project-ts/
│
├── src/
│   ├── models/
│   │   └── Product.ts
│   ├── services/
│   │   └── ProductService.ts
│   ├── main.ts
│
├── tsconfig.json
└── package.json

Struktur di atas membantu menjaga kode tetap terorganisir. Folder models digunakan untuk definisi tipe data (class/interface), sedangkan services berisi logika bisnis.

Langkah 1: Membuat Model Produk

Pertama, kita definisikan struktur data produk menggunakan interface dan class.

File: src/models/Product.ts

export interface IProduct {
  id: number;
  name: string;
  price: number;
  stock: number;
}

export class Product implements IProduct {
  constructor(
    public id: number,
    public name: string,
    public price: number,
    public stock: number
  ) {}
}

Interface IProduct mendefinisikan bentuk data, sedangkan Product adalah implementasi konkretnya.

Langkah 2: Membuat Layanan CRUD

Berikutnya, kita buat class ProductService yang bertanggung jawab mengelola daftar produk.

File: src/services/ProductService.ts

import { Product } from "../models/Product";

export class ProductService {
  private products: Product[] = [];

  // Create
  addProduct(product: Product): void {
    this.products.push(product);
    console.log(`✅ Produk "${product.name}" berhasil ditambahkan.`);
  }

  // Read
  getAll(): Product[] {
    return this.products;
  }

  // Update
  updateProduct(id: number, data: Partial<Product>): void {
    const product = this.products.find(p => p.id === id);
    if (!product) {
      console.log("❌ Produk tidak ditemukan!");
      return;
    }

    Object.assign(product, data);
    console.log(` Produk "${product.name}" berhasil diperbarui.`);
  }

  // Delete
  deleteProduct(id: number): void {
    const index = this.products.findIndex(p => p.id === id);
    if (index === -1) {
      console.log("❌ Produk tidak ditemukan!");
      return;
    }

    const deleted = this.products.splice(index, 1);
    console.log(`️ Produk "${deleted[0].name}" berhasil dihapus.`);
  }
}

Kita menggunakan Partial<Product> agar hanya sebagian properti bisa diperbarui. Ini adalah salah satu keunggulan type utility di TypeScript.

Langkah 3: Menjalankan Logika Aplikasi

Terakhir, kita buat file utama yang menjalankan semua logika tersebut.

File: src/main.ts

import { Product } from "./models/Product";
import { ProductService } from "./services/ProductService";

const productService = new ProductService();

// Tambah produk
productService.addProduct(new Product(1, "Kopi Arabica", 50000, 10));
productService.addProduct(new Product(2, "Teh Hijau", 30000, 20));

// Tampilkan semua produk
console.log(" Daftar Produk:", productService.getAll());

// Update data produk
productService.updateProduct(2, { price: 35000 });

// Hapus produk
productService.deleteProduct(1);

// Tampilkan hasil akhir
console.log(" Produk Tersisa:", productService.getAll());

Langkah 4: Kompilasi dan Jalankan

Untuk menjalankan proyek ini:

1. Pastikan Anda sudah menginstal TypeScript:

npm install -g typescript

2. Inisialisasi proyek dan buat file konfigurasi:

tsc --init

3. Kompilasi proyek:

tsc

4. Jalankan hasil kompilasi:

node dist/main.js

Hasil Output

✅ Produk "Kopi Arabica" berhasil ditambahkan.
✅ Produk "Teh Hijau" berhasil ditambahkan.
 Daftar Produk: [Product {...}, Product {...}]
 Produk "Teh Hijau" berhasil diperbarui.
️ Produk "Kopi Arabica" berhasil dihapus.
 Produk Tersisa: [Product {...}]

Pengembangan Lebih Lanjut

Anda bisa mengembangkan mini project TypeScript ini dengan fitur tambahan seperti:

• Menyimpan data ke file JSON atau database.

• Menambahkan validasi input dengan error handling.

• Membuat antarmuka CLI sederhana menggunakan readline.

• Menambahkan test unit dengan Jest atau Vitest.

Kesimpulan

Melalui latihan mini project TypeScript ini, Anda telah mempelajari bagaimana membangun aplikasi CRUD sederhana yang menerapkan konsep dasar seperti class, interface, modularisasi, dan utility types. Pendekatan ini membantu memperkuat pemahaman tentang arsitektur aplikasi berbasis TypeScript yang efisien dan scalable.

Proyek kecil seperti ini adalah pondasi penting untuk melangkah ke proyek nyata — seperti backend API dengan Express + TypeScript atau aplikasi front-end modern dengan React + TypeScript.