Cheatsheet TypeScript untuk Pemula dan Lanjutan

TypeScript adalah superset JavaScript yang memberikan fitur seperti tipe statis, kelas, antarmuka, dan banyak lagi. Panduan ini dirancang untuk pemula hingga tingkat lanjutan.

1. Instalasi dan Konfigurasi

Instalasi TypeScript:

npm install -g typescript

Inisialisasi Proyek TypeScript:

tsc --init

File tsconfig.json akan dibuat. Contoh pengaturan penting:

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

• target: Versi JavaScript output.
• module: Jenis modul yang digunakan (commonjs, esnext).
• strict: Mengaktifkan mode ketat untuk pemeriksaan tipe.
• outDir: Direktori output file yang dikompilasi.
• rootDir: Direktori utama sumber kode TypeScript.

2. Tipe Data

Tipe Dasar

let nama: string = "Saya"; 
let umur: number = 25; 
let aktif: boolean = true; 
let apapun: any = 42; 
let tidakTahu: unknown = "data"; 
let kosong: null = null; 
let tidakTerdefinisi: undefined = undefined;

• any: Digunakan jika tipe tidak diketahui. Sebaiknya dihindari jika memungkinkan.
• unknown: Mirip dengan any, tapi lebih aman karena memerlukan pemeriksaan tipe sebelum digunakan.

Array

let angka: number[] = [1, 2, 3];
let kata: Array<string> = ["a", "b", "c"];

• Gunakan notasi number[] atau Array<number>.

Tuple

let tuple: [string, number] = ["satu", 1];

• Tuple digunakan untuk array dengan panjang dan tipe elemen tertentu.

Enum

enum Warna {
  Merah = "Merah",
  Hijau = "Hijau",
  Biru = "Biru"
}
let warnaFavorit: Warna = Warna.Hijau;

• Enums membantu mendefinisikan nilai konstan.

Literal dan Union

let pilihan: "ya" | "tidak" = "ya";
let id: string | number = 123;

• Literal membatasi nilai ke opsi tertentu.
• Union memungkinkan beberapa tipe untuk satu variabel.

Tipe Alias

type ID = string | number;
let userId: ID = "12345";

• Gunakan type untuk mendefinisikan tipe khusus yang dapat digunakan kembali.

3. Fungsi

Deklarasi Fungsi

function tambah(a: number, b: number): number {
  return a + b;
}
let kali = (a: number, b: number): number => a * b;

• Selalu tentukan tipe parameter dan nilai kembaliannya.

Optional dan Default Parameter

function salam(nama: string, umur?: number): string {
  return umur ? `Halo ${nama}, umur ${umur}` : `Halo ${nama}`;
}
function perkenalan(nama: string, umur: number = 18): string {
  return `Halo ${nama}, umur ${umur}`;
}

• Parameter opsional menggunakan ?.
• Parameter default diberikan nilai bawaan.

Fungsi Overloading

function ambilData(param: string): string;
function ambilData(param: number): number;
function ambilData(param: any): any {
  return param;
}

• Overloading memungkinkan fungsi menerima berbagai tipe parameter.

4. Interface dan Tipe

Interface

interface User {
  id: number;
  nama: string;
  aktif?: boolean;
}

• Gunakan interface untuk mendefinisikan struktur objek.
• Properti opsional menggunakan ?.

Extends Interface

interface Admin extends User {
  level: string;
}

• Interface dapat diperluas menggunakan extends.

Perbedaan Interface dan Tipe

• Interface mendukung merging.
• Type lebih fleksibel untuk tipe kompleks seperti union.

5. Kelas (Classes)

Deklarasi Dasar

class Hewan {
  constructor(public nama: string) {}
  bergerak(): void {
    console.log(`${this.nama} bergerak`);
  }
}
let kucing = new Hewan("Kucing");
kucing.bergerak();

Pewarisan (Inheritance)

class Burung extends Hewan {
  terbang(): void {
    console.log(`${this.nama} terbang`);
  }
}

• Gunakan extends untuk pewarisan kelas.

Access Modifiers

• public: Dapat diakses di mana saja (default).
• private: Hanya dapat diakses di dalam kelas.
• protected: Dapat diakses di dalam kelas dan turunannya.

Abstract Class

abstract class MakhlukHidup {
  abstract bergerak(): void;
}
class Ikan extends MakhlukHidup {
  bergerak(): void {
    console.log("Ikan berenang");
  }
}

• Gunakan abstract untuk kelas yang tidak dapat diinstansiasi langsung.

6. Modul dan Namespace

Export dan Import

File math.ts:

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

File main.ts:

import { tambah } from "./math";
console.log(tambah(2, 3));

Namespace

namespace Geometri {
  export function luasPersegi(sisi: number): number {
    return sisi * sisi;
  }
}
console.log(Geometri.luasPersegi(5));

• Namespace digunakan untuk mengelompokkan kode tanpa menggunakan modul.

7. Advanced Types

Utility Types

• Partial<T>: Membuat semua properti opsional.
• Readonly<T>: Membuat properti hanya-baca.
• Pick<T, K>: Memilih properti tertentu.
• Omit<T, K>: Menghilangkan properti tertentu.

interface User {
  id: number;
  nama: string;
  aktif: boolean;
}
type OptionalUser = Partial<User>;
type ReadonlyUser = Readonly<User>;
type UserId = Pick<User, "id">;
type UserTanpaAktif = Omit<User, "aktif">;

8. Decorator

Class Decorator

function LogKelas(constructor: Function) {
  console.log(`Kelas dibuat: ${constructor.name}`);
}
@LogKelas
class Hewan {}

Method Decorator

function LogMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method dipanggil: ${propertyName} dengan argumen: ${args}`);
    return original.apply(this, args);
  };
}

• Decorator digunakan untuk menambahkan metadata atau logika pada kelas, metode, atau properti.

9. Error Handling

Try-Catch

try {
  throw new Error("Terjadi kesalahan!");
} catch (error) {
  console.log(error.message);
}

Custom Error

class CustomError extends Error {
  constructor(message: string) {
    super(message);
    this.name = "CustomError";
  }
}

10. Best Practices

1. Gunakan strict mode di tsconfig.json.

   • Memberikan pemeriksaan tipe yang ketat.

2. Hindari penggunaan any kecuali benar-benar diperlukan.

   • Gunakan unknown sebagai alternatif.

3. Pisahkan tipe ke dalam file tersendiri jika kompleks.

4. Gunakan utility types untuk menghindari penulisan ulang tipe.