Tutorial Express JS dengan TypeScript – Process CRUD Data Barang

Express JS adalah framework web yang sangat populer untuk membuat aplikasi web menggunakan bahasa pemrograman JavaScript. TypeScript adalah bahasa superset dari JavaScript yang memungkinkan kita untuk menambahkan fitur-fitur seperti tipe data statis ke dalam kode JavaScript. Dalam tutorial ini, kita akan belajar bagaimana menggunakan Express JS dengan TypeScript untuk melakukan proses CRUD (Create, Read, Update, Delete) data barang.

Langkah 1: Persiapan Proyek

Pertama-tama, kita perlu membuat sebuah proyek baru menggunakan TypeScript. Kita bisa menggunakan Node Package Manager (npm) untuk membuat proyek TypeScript baru dengan perintah:

    
    npm init -y
    
  

Selanjutnya, kita perlu menginstal beberapa paket yang diperlukan untuk proyek ini, seperti Express dan TypeScript. Kita bisa melakukannya dengan perintah:

    
    npm install express typescript @types/express
    
  

Langkah 2: Membuat Model Barang

Setelah itu, kita mulai dengan membuat model untuk data barang. Buatlah file Barang.ts dan tambahkan kode berikut:

    
    interface Barang {
      id: number;
      nama: string;
      harga: number;
      jumlah: number;
    }
    
  

Langkah 3: Membuat Server Express

Selanjutnya, kita akan membuat server Express untuk menangani proses CRUD data barang. Buatlah file server.ts dan tambahkan kode berikut:

    
    import express, { Request, Response } from 'express';
    import { Barang } from './Barang';

    const app = express();
    const port = 3000;

    app.use(express.json());

    let dataBarang: Barang[] = [
      { id: 1, nama: 'Buku', harga: 10000, jumlah: 50 },
      { id: 2, nama: 'Pensil', harga: 5000, jumlah: 100 },
    ];

    // Endpoint untuk mendapatkan semua data barang
    app.get('/api/barang', (req: Request, res: Response) => {
      res.json(dataBarang);
    });

    // Endpoint untuk membuat data barang baru
    app.post('/api/barang', (req: Request, res: Response) => {
      const newBarang: Barang = req.body;
      dataBarang.push(newBarang);
      res.json(newBarang);
    });

    // Endpoint untuk mengupdate data barang berdasarkan ID
    app.put('/api/barang/:id', (req: Request, res: Response) => {
      const id = parseInt(req.params.id);
      const updatedBarang: Barang = req.body;

      dataBarang = dataBarang.map(barang => (
        barang.id === id ? updatedBarang : barang
      ));

      res.json(updatedBarang);
    });

    // Endpoint untuk menghapus data barang berdasarkan ID
    app.delete('/api/barang/:id', (req: Request, res: Response) => {
      const id = parseInt(req.params.id);
      dataBarang = dataBarang.filter(barang => barang.id !== id);
      res.json({ message: 'Data barang berhasil dihapus' });
    });

    app.listen(port, () => {
      console.log(`Server berjalan di http://localhost:${port}`);
    });
    
  

Langkah 4: Menjalankan Server

Terakhir, untuk menjalankan server, kita perlu mengonversi file TypeScript menjadi JavaScript menggunakan TypeScript Compiler (tsc). Kita bisa melakukannya dengan perintah:

    
    npx tsc
    
  

Setelah itu, jalankan server dengan perintah:

    
    node server.js
    
  

Sekarang server Express sudah berjalan dan siap digunakan untuk proses CRUD data barang.