TypeScript - Beranda

TypeScript adalah superset JavaScript yang menambahkan sistem tipe statis. Kode TypeScript dikompilasi menjadi JavaScript biasa sebelum dijalankan di browser atau Node.js.

Hal yang akan dipelajari:

Bagian 1

Pengenalan TypeScript
Tipe Dasar
Interface dan Type
Function dan Operator
Generic

Mengapa TypeScript?

Deteksi error lebih awal — kesalahan tipe tertangkap saat compile time, bukan runtime
Autocompletion dan IntelliSense — IDE dapat memberikan saran yang lebih akurat
Dokumentasi yang hidup — tipe berfungsi sebagai dokumentasi kode
Refactoring lebih aman — perubahan besar dapat dilakukan dengan confidence
Kompatibel dengan JavaScript — semua kode JS valid di TS

Instalasi

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

File tsconfig.json mengatur konfigurasi kompilasi.

Tipe Dasar

// Primitif
let nama: string = "Alice";
let umur: number = 25;
let aktif: boolean = true;
let tidakDiketahui: any = "apa saja";
let kosong: void = undefined;

// Array
let angka: number[] = [1, 2, 3];
let namaOrang: Array<string> = ["Alice", "Bob"];

// Tuple — array dengan tipe terstruktur
let koordinat: [number, number] = [10, 20];

// Enum
enum Status {
  Pending,
  Approved,
  Rejected,
}

// Object
interface Pengguna {
  id: number;
  nama: string;
  email?: string; // opsional
}

let user: Pengguna = { id: 1, nama: "Alice" };

Interface vs Type

// Interface — dapat di-extend dan di-merge
interface Hewan {
  nama: string;
}

interface Kucing extends Hewan {
  jenis: string;
}

// Type — lebih fleksibel, mendukung union dan intersection
type ID = string | number;
type Admin = Pengguna & { role: "admin" };

Function

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

// Arrow function dengan tipe
const kali: (a: number, b: number) => number = (a, b) => a * b;

// Optional dan default parameter
function salam(nama: string, pesan: string = "Halo"): string {
  return `${pesan}, ${nama}!`;
}

Generic

Generic membuat kode yang dapat bekerja dengan berbagai tipe tanpa kehilangan informasi tipe.

function identity<T>(arg: T): T {
  return arg;
}

let hasil = identity<string>("hello"); // T = string

// Generic dengan constraint
function panjang<T extends { length: number }>(arg: T): number {
  return arg.length;
}

// Generic di class
class Container<T> {
  constructor(private value: T) {}
  getValue(): T {
    return this.value;
  }
}

Utility Types

TypeScript menyediakan utility types untuk transformasi tipe:

interface Produk {
  id: number;
  nama: string;
  harga: number;
  deskripsi: string;
}

// Partial — semua properti menjadi opsional
type ProdukPartial = Partial<Produk>;

// Pick — hanya mengambil properti tertentu
type ProdukRingkas = Pick<Produk, "id" | "nama">;

// Omit — menghilangkan properti tertentu
type ProdukTanpaDeskripsi = Omit<Produk, "deskripsi">;

// Record — objek dengan key dan value tertentu
type Kamus = Record<string, number>;

// ReturnType — tipe kembalian dari function
type HasilTambah = ReturnType<typeof tambah>;

Type Narrowing

function prosesInput(input: string | number) {
  if (typeof input === "string") {
    // TypeScript tahu input adalah string di sini
    return input.toUpperCase();
  } else {
    // TypeScript tahu input adalah number di sini
    return input.toFixed(2);
  }
}

Tips Praktis

Hindari any sebisa mungkin — gunakan unknown jika tipe tidak diketahui
Aktifkan strict: true di tsconfig.json untuk type checking ketat
Gunakan noImplicitAny dan strictNullChecks di production
Manfaatkan inference — tidak perlu menuliskan tipe jika sudah jelas dari konteks

TypeScript - Beranda

On this page