Irvan Gerhana Septiyana

Posted on Mar 27

Memahami Fundamental TypeScript: Panduan Lengkap untuk Pemula

#beginners #typescript #webdev #javascript

Pendahuluan

TypeScript adalah superset dari JavaScript yang menambahkan dukungan tipe statis. Dengan TypeScript, kita bisa menulis kode yang lebih aman, mudah di-maintain, dan lebih mudah didokumentasikan. Artikel ini membahas dasar-dasar TypeScript secara lengkap, mulai dari instalasi hingga konsep lanjutan seperti Generics dan Error Handling.

Mengapa Menggunakan TypeScript?

Deteksi Error di Waktu Kompilasi: Mengurangi bug saat runtime
Meningkatkan Produktivitas: Dukungan autocompletion dan dokumentasi di editor (seperti VSCode).
Skalabilitas: Cocok untuk proyek besar karena memiliki fitur modular dan type-checking.

Studi Kasus: Kapan Sebaiknya Menggunakan TypeScript?

Saat membangun aplikasi berskala besar.
Ketika bekerja dalam tim besar untuk meminimalisasi kesalahan.
Untuk meningkatkan performa debugging dan prediktabilitas kode.

Memulai dengan TypeScript

Global Installasi TypeScript

install -g typescript

Inisialisasi Proyek TypeScript

tsc --init

Menjalankan Kode TypeScript

tsc index.ts && node index.js

Tipe Data Dasar (Primitive Types)

String, Number, Boolean

let nama: string = "Irvan";
let usia: number = 27;
let aktif: boolean = true;

Array & Tuple

let angka: number[] = [1, 2, 3];
let biodata: [string, number] = ["Irvan", 27];

Any, Unknown, Never

let random: any = "Bebas";
let value: unknown = 42;
function throwError(): never {
  throw new Error("Terjadi Kesalahan");
}

Tipe Kompleks (Object, Enum, Union)

Object

type User = {
  id: number;
  name: string;
};

let user: User = { id: 1, name: "Irvan" };

Enum

enum Role {
  Admin,
  User,
  Guest,
}

let role: Role = Role.Admin;

Union & Intersection

let id: string | number = "123";

interface Person {
  name: string;
}

interface Employee {
  id: number;
}

type Staff = Person & Employee;

Function di TypeScript

Mendefinisikan Tipe Parameter dan Return

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

Optional & Default Parameters

function sapa(nama: string, umur?: number) {
  console.log(`Halo ${nama}`);
}

function greeting(name: string = "User") {
  console.log(`Welcome, ${name}`);
}

Interface vs Type Alias

Interface

interface Person {
  nama: string;
  umur: number;
}

Type Alias

type ID = string | number;

type User = {
  id: ID;
  name: string;
};

Perbedaan Utama:

interface cocok untuk object yang besar dan dapat di-extend.
type lebih fleksibel dan cocok untuk union atau intersection types.

Class dan Inheritance di TypeScript

Class Dasar

class User {
  constructor(public name: string, private age: number) {}

  getAge(): number {
    return this.age;
  }
}

Inheritance (Pewarisan)

class Admin extends User {
  constructor(name: string, age: number, public role: string) {
    super(name, age);
  }
}

Generics (Tipe Dinamis dan Fleksibel)

Generics memungkinkan kita membuat fungsi atau class yang dapat bekerja dengan berbagai tipe data tanpa kehilangan keamanan tipe.

Generics adalah seperti wadah fleksibel yang bisa menyimpan berbagai jenis barang, seperti kotak yang bisa diisi mainan atau buku.

Contoh Penggunaan Generics

function wrap<T>(value: T): T[] {
  return [value];
}

const angka = wrap<number>(5);
const kata = wrap<string>("Hello");

Error Handling di TypeScript

TypeScript memungkinkan penanganan error dengan menggunakan try-catch dan tipe khusus.

try {
  throw new Error("Terjadi Kesalahan");
} catch (error) {
  console.error((error as Error).message);
}

Kesimpulan

TypeScript membantu membangun aplikasi yang lebih aman dan terstruktur.
Pahami dasar seperti tipe data, fungsi, class, dan generics.
Selalu gunakan strict mode di tsconfig.json untuk validasi lebih ketat.

Rekomendasi Selanjutnya:

Pelajari lebih lanjut tentang Mapped Types dan Utility Types.
Optimalkan proyek Anda dengan praktik terbaik TypeScript.

Sumber Tambahan:

DEV Community