🔷 TypeScript untuk Pemula: Panduan Lengkap

# 1. Kunjungi https://nodejs.org/
# 2. Download versi LTS (Long Term Support)
# 3. Jalankan installer, ikuti wizard

# Verifikasi instalasi Node.js:
node --version
# Output: v20.11.0

npm --version
# Output: 10.2.4

# Instal TypeScript secara global
npm install -g typescript

# Verifikasi instalasi
tsc --version
# Output: Version 5.4.5

# Instal TypeScript secara lokal (untuk proyek)
mkdir my-project && cd my-project
npm init -y
npm install typescript --save-dev

# Inisialisasi konfigurasi TypeScript
npx tsc --init
# Membuat file tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

// File: src/hello.ts
function sapa(nama: string): string {
  return `Halo, ${nama}! Selamat datang di TypeScript!`;
}

const pesan: string = sapa("BeebaneLabs");
console.log(pesan);

// Kompilasi dan jalankan:
// npx tsc src/hello.ts
// node src/hello.js
// Output: Halo, BeebaneLabs! Selamat datang di TypeScript!

# Watch mode — otomatis compile saat file berubah
npx tsc --watch

# ts-node — jalankan TypeScript langsung tanpa compile manual
npm install -g ts-node
ts-node src/hello.ts
# Output: Halo, BeebaneLabs! Selamat datang di TypeScript!

# Atau gunakan nodemon untuk auto-restart
npm install -g nodemon
nodemon --exec ts-node src/hello.ts

// Type annotations dasar
let nama: string = "Budi Santoso";
let umur: number = 25;
let tinggi: number = 175.5;
let isMahasiswa: boolean = true;
let alamat: string | null = null;  // union type

// TypeScript bisa menyimpulkan tipe (type inference)
let kota = "Jakarta";        // otomatis string
let skor = 100;               // otomatis number
let aktif = true;             // otomatis boolean

// ❌ Error: Type 'string' is not assignable to type 'number'
// let angka: number = "ini bukan angka";

// Array
let buah: string[] = ["apel", "mangga", "jeruk"];
let angka: Array<number> = [1, 2, 3, 4, 5];

// Tuple — array dengan tipe dan urutan tetap
let mahasiswa: [string, number, boolean] = ["Budi", 25, true];

// Mengakses tuple
console.log(mahasiswa[0]);  // "Budi"
console.log(mahasiswa[1]);  // 25

// ❌ Error: Type 'number' is not assignable to type 'string'
// mahasiswa[0] = 123;

// Union type — variabel bisa beberapa tipe
let id: string | number;
id = "ABC123";   // ✅ valid
id = 42;          // ✅ valid
// id = true;     // ❌ error

// Literal type — nilai spesifik yang diizinkan
type Status = "aktif" | "nonaktif" | "pending";
let statusUser: Status = "aktif";    // ✅ valid
// statusUser = "deleted";           // ❌ error

// Kombinasi literal + union
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
let method: HttpMethod = "GET";

// Nullable types
function cariUser(id: number): string | null {
  if (id === 1) return "Budi";
  return null;  // User tidak ditemukan
}

let hasil = cariUser(1);     // string | null
let tidakAda = cariUser(99); // null

// Object type inline
let pengguna: { nama: string; umur: number; email: string } = {
  nama: "Budi",
  umur: 25,
  email: "budi@email.com"
};

// ❌ Error: Property 'alamat' does not exist
// pengguna.alamat = "Jakarta";

// Optional property dengan ?
let produk: { nama: string; harga: number; diskon?: number } = {
  nama: "Laptop",
  harga: 15000000
  // diskon tidak wajib
};

// Readonly property
let konfigurasi: { readonly apiUrl: string; timeout: number } = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

// ❌ Error: Cannot assign to 'apiUrl' because it is read-only
// konfigurasi.apiUrl = "https://other.com";

// Mendefinisikan interface
interface Mahasiswa {
  nama: string;
  nim: string;
  jurusan: string;
  ipk: number;
  aktif: boolean;
}

// Menggunakan interface
const mhs1: Mahasiswa = {
  nama: "Budi Santoso",
  nim: "2024001",
  jurusan: "Teknik Informatika",
  ipk: 3.85,
  aktif: true
};

// ❌ Error: Missing property 'jurusan'
// const mhs2: Mahasiswa = {
//   nama: "Ani",
//   nim: "2024002",
//   ipk: 3.90,
//   aktif: true
// };

// Optional & readonly properties
interface Produk {
  readonly id: number;
  nama: string;
  harga: number;
  deskripsi?: string;     // opsional
  stok: number;
}

const laptop: Produk = {
  id: 1001,
  nama: "Laptop Gaming",
  harga: 15000000,
  stok: 50
};

// ❌ Error: Cannot assign to 'id' (readonly)
// laptop.id = 9999;

// Interface untuk mendefinisikan bentuk fungsi
interface HitungFn {
  (a: number, b: number): number;
}

const tambah: HitungFn = (a, b) => a + b;
const kali: HitungFn = (a, b) => a * b;

console.log(tambah(5, 3));  // 8
console.log(kali(5, 3));   // 15

// Interface dengan method
interface Kalkulator {
  tambah(a: number, b: number): number;
  kurang(a: number, b: number): number;
  kali(a: number, b: number): number;
  bagi(a: number, b: number): number;
}

const calc: Kalkulator = {
  tambah: (a, b) => a + b,
  kurang: (a, b) => a - b,
  kali: (a, b) => a * b,
  bagi: (a, b) => a / b
};

console.log(calc.tambah(10, 5));  // 15
console.log(calc.bagi(10, 3));    // 3.333...

// Interface inheritance dengan extends
interface Kendaraan {
  merek: string;
  tahun: number;
  warna: string;
}

interface Mobil extends Kendaraan {
  jumlahPintu: number;
  kapasitasMesin: number;  // dalam cc
}

interface Motor extends Kendaraan {
  jenisMotor: "matic" | "manual" | "sport";
}

const avanza: Mobil = {
  merek: "Toyota",
  tahun: 2024,
  warna: "Putih",
  jumlahPintu: 4,
  kapasitasMesin: 1500
};

const vario: Motor = {
  merek: "Honda",
  tahun: 2024,
  warna: "Hitam",
  jenisMotor: "matic"
};

// Multiple inheritance
interface MobilSport extends Mobil {
  turbo: boolean;
  topSpeed: number;
}

const ferrari: MobilSport = {
  merek: "Ferrari",
  tahun: 2024,
  warna: "Merah",
  jumlahPintu: 2,
  kapasitasMesin: 3900,
  turbo: true,
  topSpeed: 340
};

// Class dasar dengan constructor
class Mahasiswa {
  // Properties dengan access modifiers
  public nama: string;
  private nim: string;
  protected jurusan: string;
  readonly angkatan: number;

  constructor(nama: string, nim: string, jurusan: string, angkatan: number) {
    this.nama = nama;
    this.nim = nim;
    this.jurusan = jurusan;
    this.angkatan = angkatan;
  }

  // Method
  public getInfo(): string {
    return `${this.nama} (${this.nim}) - ${this.jurusan}`;
  }

  // Private method
  private validateNim(): boolean {
    return this.nim.length === 8;
  }

  // Getter
  get displayNama(): string {
    return `Mahasiswa: ${this.nama}`;
  }
}

const mhs = new Mahasiswa("Budi", "2024001", "TI", 2024);
console.log(mhs.nama);        // ✅ Budi (public)
console.log(mhs.getInfo());   // ✅ Budi (2024001) - TI
console.log(mhs.displayNama); // ✅ Mahasiswa: Budi
// console.log(mhs.nim);      // ❌ Error: 'nim' is private
// console.log(mhs.jurusan);  // ❌ Error: 'jurusan' is protected

// Shorthand constructor — definisikan & assign sekaligus
class Produk {
  constructor(
    public nama: string,
    public harga: number,
    public kategori: string,
    private _stok: number = 0
  ) {}

  // Getter & Setter
  get stok(): number {
    return this._stok;
  }

  set stok(jumlah: number) {
    if (jumlah < 0) {
      throw new Error("Stok tidak boleh negatif!");
    }
    this._stok = jumlah;
  }

  getInfo(): string {
    return `${this.nama} - Rp ${this.harga.toLocaleString()} (Stok: ${this._stok})`;
  }
}

const laptop = new Produk("Laptop", 15000000, "Elektronik", 50);
console.log(laptop.getInfo());
// Laptop - Rp 15,000,000 (Stok: 50)

laptop.stok = 25;  // ✅ menggunakan setter
// laptop.stok = -5;  // ❌ Error: Stok tidak boleh negatif!

// Abstract class — tidak bisa diinstansiasi langsung
abstract class Hewan {
  constructor(public nama: string, public kaki: number) {}

  // Abstract method — HARUS diimplementasi di child
  abstract suara(): string;

  // Regular method — bisa diwariskan
  getInfo(): string {
    return `${this.nama} memiliki ${this.kaki} kaki`;
  }
}

// ❌ Error: Cannot create an instance of abstract class
// const hewan = new Hewan("Kucing", 4);

class Kucing extends Hewan {
  constructor(nama: string) {
    super(nama, 4);  // panggil constructor parent
  }

  suara(): string {
    return `${this.nama} bersuara: Meow! 🐱`;
  }
}

class Anjing extends Hewan {
  constructor(nama: string) {
    super(nama, 4);
  }

  suara(): string {
    return `${this.nama} bersuara: Guk guk! 🐶`;
  }
}

const kucing = new Kucing("Kitty");
const anjing = new Anjing("Buddy");

console.log(kucing.suara());    // Kitty bersuara: Meow! 🐱
console.log(anjing.getInfo());  // Buddy memiliki 4 kaki

// Polymorphism
const hewanList: Hewan[] = [kucing, anjing];
hewanList.forEach(h => console.log(h.suara()));

// Interface untuk kontrak
interface Printable {
  print(): string;
}

interface Serializable {
  serialize(): string;
  deserialize(data: string): void;
}

// Class bisa implement beberapa interface
class Dokumen implements Printable, Serializable {
  private isi: string = "";

  constructor(public judul: string) {}

  print(): string {
    return `=== ${this.judul} ===\n${this.isi}`;
  }

  serialize(): string {
    return JSON.stringify({ judul: this.judul, isi: this.isi });
  }

  deserialize(data: string): void {
    const parsed = JSON.parse(data);
    this.judul = parsed.judul;
    this.isi = parsed.isi;
  }

  tambahIsi(teks: string): void {
    this.isi += teks + "\n";
  }
}

const doc = new Dokumen("Laporan Harian");
doc.tambahIsi("Hari ini belajar TypeScript.");
doc.tambahIsi("Sudah paham class dan interface.");

console.log(doc.print());
// === Laporan Harian ===
// Hari ini belajar TypeScript.
// Sudah paham class dan interface.

const serialized = doc.serialize();
console.log(serialized);

// File: src/math.ts

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

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

export const PI: number = 3.14159;

// Export interface
export interface OperasiMatematika {
  hitung(a: number, b: number): number;
}

// Default export — satu per file
export default class Kalkulator implements OperasiMatematika {
  hitung(a: number, b: number): number {
    return a + b;
  }
}

// File: src/app.ts

// Import named exports
import { tambah, kurang, PI } from "./math";

// Import default export
import Kalkulator from "./math";

// Import semua sebagai namespace
import * as MathUtils from "./math";

// Menggunakan imports
console.log(tambah(10, 5));     // 15
console.log(kurang(10, 5));     // 5
console.log(PI);                // 3.14159

const calc = new Kalkulator();
console.log(calc.hitung(3, 7)); // 10

console.log(MathUtils.tambah(100, 200));  // 300

// File: src/models/User.ts
export interface User {
  id: number;
  nama: string;
  email: string;
}

// File: src/models/Produk.ts
export interface Produk {
  id: number;
  nama: string;
  harga: number;
}

// File: src/models/index.ts (Barrel file)
// Re-export semua dari models
export { User } from "./User";
export { Produk } from "./Produk";

// File: src/app.ts
// Import dari barrel file — lebih rapi!
import { User, Produk } from "./models";

const user: User = { id: 1, nama: "Budi", email: "budi@mail.com" };
const produk: Produk = { id: 1, nama: "Laptop", harga: 15000000 };

// Function dengan type annotations
function sapa(nama: string): string {
  return `Halo, ${nama}!`;
}

// Arrow function dengan tipe
const kaliDua = (x: number): number => x * 2;

// Optional & default parameter
function buatProfil(
  nama: string,
  umur: number,
  kota: string = "Jakarta",     // default value
  bio?: string                   // optional (bisa undefined)
): object {
  return { nama, umur, kota, bio };
}

console.log(buatProfil("Budi", 25));
// { nama: "Budi", umur: 25, kota: "Jakarta", bio: undefined }

console.log(buatProfil("Sari", 22, "Bandung", "Hobi coding"));
// { nama: "Sari", umur: 22, kota: "Bandung", bio: "Hobi coding" }

// Rest parameters
function jumlahkan(...angka: number[]): number {
  return angka.reduce((total, n) => total + n, 0);
}

console.log(jumlahkan(1, 2, 3));       // 6
console.log(jumlahkan(10, 20, 30, 40)); // 100

// Function overload
function format(value: string): string;
function format(value: number): string;
function format(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  }
  return `Rp ${value.toLocaleString()}`;
}

console.log(format("hello"));     // "HELLO"
console.log(format(1500000));     // "Rp 1,500,000"

// Numeric enum (default, dimulai dari 0)
enum Hari {
  Minggu,    // 0
  Senin,     // 1
  Selasa,    // 2
  Rabu,      // 3
  Kamis,     // 4
  Jumat,     // 5
  Sabtu      // 6
}

const hariIni: Hari = Hari.Rabu;
console.log(hariIni);          // 3
console.log(Hari[3]);          // "Rabu" (reverse mapping)

// String enum
enum StatusOrder {
  Pending = "PENDING",
  Diproses = "DIPROSES",
  Dikirim = "DIKIRIM",
  Selesai = "SELESAI",
  Dibatalkan = "DIBATALKAN"
}

let status: StatusOrder = StatusOrder.Pending;
console.log(status);  // "PENDING"

// Enum sebagai tipe parameter
function getStatusColor(status: StatusOrder): string {
  switch (status) {
    case StatusOrder.Pending: return "🟡 Kuning";
    case StatusOrder.Diproses: return "🔵 Biru";
    case StatusOrder.Dikirim: return "🟠 Oranye";
    case StatusOrder.Selesai: return "🟢 Hijau";
    case StatusOrder.Dibatalkan: return "🔴 Merah";
  }
}

console.log(getStatusColor(StatusOrder.Selesai));  // 🟢 Hijau

// const enum — di-inline saat compile (lebih efisien)
const enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST"
}

const role: Role = Role.Admin;
console.log(role);  // "ADMIN"

// Type assertion dengan "as"
let nilai: unknown = "Hello TypeScript";
let panjang: number = (nilai as string).length;
console.log(panjang);  // 15

// Type assertion dengan angle brackets (<>)
// Tidak bisa digunakan di JSX/TSX
let teks: unknown = "TypeScript";
let upper: string = (<string>teks).toUpperCase();

// Non-null assertion operator (!)
let elem: HTMLElement | null = document.getElementById("app");
// elem bisa null, tapi kita yakin elem ada
elem!.style.color = "red";

// Contoh aman — lebih disarankan
let elemAman = document.getElementById("app");
if (elemAman) {
  elemAman.style.color = "blue";  // TypeScript tahu bukan null
}

// Type guard
function isString(value: unknown): value is string {
  return typeof value === "string";
}

function proses(value: string | number): void {
  if (isString(value)) {
    console.log(`String: ${value.toUpperCase()}`);
  } else {
    console.log(`Number: ${value.toFixed(2)}`);
  }
}

proses("hello");   // String: HELLO
proses(3.14159);   // Number: 3.14

// keyof & typeof
interface Config {
  apiUrl: string;
  timeout: number;
  retries: number;
}

type ConfigKey = keyof Config;  // "apiUrl" | "timeout" | "retries"

function getConfig(config: Config, key: ConfigKey): string | number {
  return config[key];
}

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3
};

console.log(getConfig(config, "apiUrl"));   // ✅
console.log(getConfig(config, "timeout"));  // ✅
// console.log(getConfig(config, "unknown")); // ❌ Error