Studi Kasus To-Do: Setup & Tipe Data

Studi Kasus To-Do: Setup & Tipe Data | Dasar TypeScript untuk JavaScript Developer | Mahir.dev | Mahir.dev Academy

npm create vite@latest my-todo-app-ts -- --template react-ts

Buka src/App.tsx, hapus semua isinya, dan ganti jadi kayak gini dulu:

tsx

// src/App.tsx
import React from 'react'; // Mungkin tidak wajib import React di versi baru dengan Vite
import './App.css';
 
function App() {
  return (
    <div className="app-container">
      <h1>Aplikasi To-Do List Saya (React + TS)</h1>
      {/* Komponen-komponen lain bakal kita tambahin di sini nanti */}
    </div>
  );
}
 
export default App;

Buka src/App.css, hapus semua isinya. Kita bakal isi style-nya nanti.
Buka src/index.css, hapus juga semua isinya kalau mau bener-bener mulai dari nol, atau biarin aja kalau mau pake sedikit reset default dari Vite. Buat sekarang, kita bisa hapus aja dulu.

Kamu bisa bikin file baru khusus buat nyimpen tipe-tipe data, misalnya src/types.ts (atau src/interfaces.ts). Tapi buat proyek sekecil ini, kita bisa juga definisiin langsung di file yang butuh, misalnya di App.tsx dulu.
- Untuk sekarang, mari kita bikin di src/App.tsx di bagian atas, sebelum definisi komponen App.
Tambahin kode interface ini:
typescript
```
// src/App.tsx (di bagian atas, sebelum function App)
 
// Definisikan interface untuk satu item Todo
export interface Todo {
  id: number;         // ID unik buat tiap todo, tipenya number
  text: string;       // Teks atau deskripsi tugas, tipenya string
  isCompleted: boolean; // Status selesai atau belum, tipenya boolean
}
```
Penjelasan interface Todo:
- export interface Todo: Kita bikin interface bernama Todo dan kita export biar bisa dipake di file lain kalau perlu (meskipun di contoh ini kita mungkin pakenya di App.tsx aja dulu).
- id: number;: Tiap todo bakal punya properti id yang tipenya angka. Ini penting buat jadi key pas ngerender list dan buat identifikasi unik.
- text: string;: Properti text buat nyimpen isi tugasnya, tipenya string.
- isCompleted: boolean;: Properti isCompleted buat nandain apakah tugasnya udah selesai atau belum, tipenya boolean (true atau false).

tsx

// src/App.tsx
import React, { useState, useEffect } from 'react';
import './App.css';
// import TodoForm from './components/TodoForm'; // Nanti kita impor
// import TodoList from './components/TodoList'; // Nanti kita impor
 
// Definisikan interface untuk satu item Todo
export interface Todo {
  id: number;
  text: string;
  isCompleted: boolean;
}
 
function App() {
  // State 'todos' sekarang tipenya adalah array dari objek Todo (Todo[])
  // Nilai awalnya array kosong
  const [todos, setTodos] = useState<Todo[]>(() => { 
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      try {
        return JSON.parse(savedTodos) as Todo[]; // Type assertion di sini
      } catch (e) {
        console.error("Gagal mem-parse todos dari localStorage:", e);
        return [];
      }
    }
    return [];
  });
 
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
    console.log("Todos disimpan ke localStorage:", todos);
  }, [todos]);
 
  // ... (Fungsi addTodo, toggleComplete, deleteTodo bakal kita isi nanti 
  //      dan harus konsisten sama tipe Todo ini) ...
 
  return (
    <div className="app-container">
      <header>
        <h1>Aplikasi To-Do List Saya (React + TS)</h1>
      </header>
      <main>
        {/* <TodoForm ... /> */}
        {/* <TodoList ... /> */}
        <p>Jumlah tugas saat ini: {todos.length}</p> {/* Cuma buat ngecek */}
      </main>
      <footer>
        <p>Ayo selesaikan semua tugas!</p>
      </footer>
    </div>
  );
}
 
export default App;

Proyek To-Do List (React + TS) #1: Siapin Fondasi & "Blueprint" Data!

Langkah 1: Bikin Proyek React + TypeScript Baru dengan Vite

Langkah 2: Struktur Folder Komponen (Saran)

Langkah 3: Membersihkan `App.tsx` dan `App.css`

Langkah 4: Mendefinisikan "Bentuk" Data Tugas (Interface `Todo`)

Langkah 5: Menggunakan Tipe `Todo` untuk State Daftar Tugas

Kuis Setup & Tipe Data To-Do List (React+TS)

Diskusi Pelajaran