Belajar TypeScript dari Nol: Panduan untuk Developer JavaScript

TypeScript adalah JavaScript dengan superpowers. Jika Anda sudah bisa JavaScript, belajar TypeScript akan sangat mudah dan sangat worth it.

Kenapa TypeScript?

1. Menangkap Error Lebih Awal

// JavaScript - Error baru ketahuan saat runtime
function greet(name) {
  return "Hello, " + name.toUpperCase();
}

greet(123); // Runtime Error! 💥

// TypeScript - Error ketahuan saat coding
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}

greet(123); // ❌ Error: Argument of type 'number' is not assignable

2. IntelliSense yang Lebih Baik

IDE seperti VS Code akan memberikan autocomplete dan suggestion yang akurat.

3. Refactoring Aman

Ketika mengubah struktur kode, TypeScript akan menunjukkan semua tempat yang perlu diupdate.

Setup Project TypeScript

Quick Setup dengan Vite

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Manual Setup

npm init -y
npm install typescript --save-dev
npx tsc --init

Basic Types

Primitive Types

// String
let nama: string = "Andi";

// Number
let umur: number = 25;

// Boolean
let aktif: boolean = true;

// Array
let hobi: string[] = ["coding", "gaming"];

// Tuple - array dengan fixed length dan types
let user: [string, number] = ["Andi", 25];

Type Inference

TypeScript bisa menebak type secara otomatis:

// Tidak perlu tulis `: string`, TypeScript tahu ini string
let nama = "Andi";

// Tidak perlu tulis `: number`
let umur = 25;

Interface dan Type

Interface

interface User {
  id: number;
  nama: string;
  email: string;
  umur?: number; // ? = optional
}

const user: User = {
  id: 1,
  nama: "Andi",
  email: "andi@email.com"
  // umur boleh tidak ada karena optional
};

Type Alias

type Status = "pending" | "approved" | "rejected";

type Product = {
  id: number;
  nama: string;
  harga: number;
  status: Status;
};

Kapan Pakai Interface vs Type?

| Interface | Type | |-----------|------| | Untuk object shapes | Untuk union types | | Bisa di-extend | Lebih fleksibel | | Best untuk API contracts | Best untuk utility types |

Function Types

Basic Function

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

// Arrow function
const kurang = (a: number, b: number): number => a - b;

Optional dan Default Parameters

function greet(nama: string, sapaan: string = "Halo"): string {
  return `${sapaan}, ${nama}!`;
}

greet("Andi");         // "Halo, Andi!"
greet("Andi", "Hi");   // "Hi, Andi!"

Callback Types

function fetchData(
  url: string,
  onSuccess: (data: any) => void,
  onError: (error: Error) => void
): void {
  // implementation
}

Generics

Generics membuat kode lebih reusable:

// Tanpa generics - harus buat banyak fungsi
function firstString(arr: string[]): string { ... }
function firstNumber(arr: number[]): number { ... }

// Dengan generics - satu fungsi untuk semua type
function first<T>(arr: T[]): T {
  return arr[0];
}

first<string>(["a", "b"]);  // "a"
first<number>([1, 2, 3]);    // 1

Generic Interface

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// Bisa dipakai untuk berbagai tipe data
const userResponse: ApiResponse<User> = { ... };
const productResponse: ApiResponse<Product> = { ... };

Migrasi dari JavaScript

Step-by-Step

1. Rename file dari .js ke .ts
2. Fix errors satu per satu
3. Tambahkan types secara gradual
4. Gunakan any untuk yang belum sempat di-type (tapi jangan kebiasaan!)

Tips Migrasi

// Kalau belum tahu type-nya, pakai any dulu
let data: any = fetchFromSomewhere();

// Nanti ganti ke type yang benar
interface UserData {
  id: number;
  name: string;
}
let data: UserData = fetchFromSomewhere();

Resources Belajar

1. TypeScript Handbook - Dokumentasi resmi
2. TypeScript Playground - Coba langsung di browser
3. Total TypeScript - Course premium berkualitas

Kesimpulan

TypeScript adalah investment yang sangat worth it untuk developer JavaScript. Dengan type safety, Anda akan menulis kode yang lebih reliable dan maintainable.

Mulai dari project kecil, dan gradually adopt TypeScript ke project yang lebih besar. Selamat belajar! 🚀