Latihan Membuat Aplikasi Kalkulator dan To-Do List dengan TypeScript

Belajar teori pemrograman saja tidak cukup untuk menguasai TypeScript. Cara terbaik untuk memahami konsep dasarnya adalah dengan langsung membuat Program TypeScript sederhana seperti Membuat Aplikasi Kalkulator dan To-Do List. Melalui latihan praktik, kamu bisa melihat bagaimana tipe data, fungsi, dan struktur logika bekerja secara nyata dalam kode yang berjalan.

TypeScript memberikan banyak keunggulan dibanding JavaScript biasa, terutama dalam hal keamanan tipe (type safety) dan deteksi kesalahan saat proses kompilasi. Dengan membuat program sederhana seperti aplikasi kalkulator atau to-do list, kamu tidak hanya melatih logika pemrograman, tetapi juga memahami penerapan fitur-fitur utama TypeScript dalam konteks nyata.

Persiapan Lingkungan TypeScript

Sebelum memulai latihan, pastikan kamu sudah menginstal Node.js dan TypeScript compiler (tsc). Jika belum, jalankan perintah berikut di terminal:

npm install -g typescript

Untuk memastikan instalasi berhasil:

tsc -v

Kemudian, buat folder proyek dan file utama index.ts:

mkdir latihan-typescript
cd latihan-typescript
touch index.ts

Kamu siap memulai latihan membuat Program TypeScript pertamamu!

Contoh 1: Program Kalkulator Sederhana

Mari kita mulai dengan contoh paling dasar — kalkulator sederhana menggunakan TypeScript. Program ini akan menerima dua angka dan melakukan operasi matematika dasar.

function tambah(a: number, b: number): number {
  return a + b;
}

function kurang(a: number, b: number): number {
  return a - b;
}

function kali(a: number, b: number): number {
  return a * b;
}

function bagi(a: number, b: number): number {
  if (b === 0) {
    throw new Error("Tidak bisa membagi dengan nol");
  }
  return a / b;
}

console.log("Hasil Penjumlahan:", tambah(10, 5));
console.log("Hasil Pengurangan:", kurang(10, 5));
console.log("Hasil Perkalian:", kali(10, 5));
console.log("Hasil Pembagian:", bagi(10, 5));

Penjelasan:

• Setiap fungsi memiliki parameter bertipe number dan juga return type number.

• TypeScript akan memberikan peringatan jika kamu mencoba memanggil fungsi dengan tipe yang salah (misalnya string).

• Kamu dapat meng-compile program ini dengan tsc index.ts dan menjalankan hasilnya menggunakan node index.js.

Dengan contoh sederhana ini, kamu sudah menerapkan konsep fungsi, parameter, dan error handling di TypeScript.

Contoh 2: Program To-Do List Sederhana

Sekarang, mari buat aplikasi to-do list untuk mengelola daftar tugas. Contoh ini akan memperlihatkan penggunaan interface, array, dan fungsi dalam satu program utuh.

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

class TodoList {
  private todos: Todo[] = [];
  private idCounter = 1;

  tambahTugas(title: string): void {
    const newTodo: Todo = {
      id: this.idCounter++,
      title,
      completed: false
    };
    this.todos.push(newTodo);
    console.log(`Tugas "${title}" berhasil ditambahkan.`);
  }

  tampilkanTugas(): void {
    console.log("Daftar Tugas:");
    this.todos.forEach(todo => {
      console.log(`${todo.id}. ${todo.title} - ${todo.completed ? "Selesai" : "Belum"}`);
    });
  }

  selesaikanTugas(id: number): void {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = true;
      console.log(`Tugas "${todo.title}" telah diselesaikan.`);
    } else {
      console.log("Tugas tidak ditemukan.");
    }
  }
}

const myTodo = new TodoList();
myTodo.tambahTugas("Belajar TypeScript");
myTodo.tambahTugas("Membuat proyek kecil");
myTodo.tampilkanTugas();
myTodo.selesaikanTugas(1);
myTodo.tampilkanTugas();

Penjelasan:

• Interface Todo mendefinisikan struktur data setiap tugas.

• Class TodoList berfungsi untuk mengelola daftar tugas, lengkap dengan metode tambah, tampilkan, dan selesaikan.

• TypeScript memastikan setiap properti dan fungsi sesuai tipe yang sudah didefinisikan.

Program ini bisa dijalankan langsung setelah dikompilasi, dan hasilnya akan menampilkan daftar tugas di terminal.

Mengapa Latihan Ini Penting

Latihan membuat Program TypeScript sederhana seperti di atas sangat berguna untuk memahami:

1. Cara kerja tipe data dan class.

2. Manfaat deteksi kesalahan lebih awal oleh TypeScript.

3. Penerapan konsep OOP (Object-Oriented Programming) secara aman dan efisien.

Dari latihan ini, kamu bisa melihat bagaimana TypeScript membuat kode lebih terstruktur, aman, dan mudah dikembangkan, bahkan untuk aplikasi kecil.

Kesimpulan

Membuat Program TypeScript sederhana seperti kalkulator atau to-do list merupakan langkah awal yang tepat untuk memahami kekuatan bahasa ini. Dengan latihan praktis, kamu belajar langsung bagaimana sistem tipe membantu mengurangi bug dan meningkatkan kualitas kode.

Langkah selanjutnya, kamu bisa mencoba menambahkan fitur seperti penyimpanan lokal (localStorage), input dari pengguna, atau bahkan integrasi antarmuka web menggunakan TypeScript di browser. Dengan terus berlatih, kamu akan semakin mahir dan siap membangun proyek skala besar menggunakan TypeScript.