← Back to Blog

typescript-untuk-pemula

Fapskom IT

Published

3 min read

TypeScript untuk Pemula: Keamanan Tipe Menjadi Sederhana

JavaScript sangat fleksibel, tetapi fleksibilitas tersebut sering kali dibayar mahal dengan munculnya bug saat aplikasi berjalan (runtime bugs), proses refaktor kode yang rentan rusak, serta kesalahan tersembunyi yang lolos ke production. TypeScript menyelesaikan masalah ini dengan menambahkan tipe statis (static types) ke JavaScript, memberi Anda keamanan pada saat kompilasi (compile-time safety) serta peningkatan besar pada produktivitas menulis kode.

Dalam panduan ini, kita akan mempelajari fitur-fitur penting TypeScript yang wajib Anda pahami untuk mulai membangun aplikasi dengan penuh percaya diri.

1. Apa itu TypeScript?

TypeScript adalah strongly typed superset dari JavaScript. Ini berarti dua hal penting:

  1. Semua kode JavaScript yang valid adalah kode TypeScript yang valid. Anda tidak perlu menulis ulang kode Anda dari awal untuk menggunakan TypeScript.
  2. TypeScript dikompilasi menjadi JavaScript biasa. Browser dan Node.js tidak menjalankan kode TypeScript secara langsung. Kompiler TypeScript (tsc) memeriksa kode Anda dan menghasilkan JavaScript yang bersih dan kompatibel untuk semua lingkungan.

2. Tipe-Tipe Dasar (Basic Types)

TypeScript dapat menebak tipe secara otomatis (type inference), tetapi Anda juga dapat menentukan tipenya secara eksplisit menggunakan titik dua (:):

// Menentukan tipe secara eksplisit
let isCompleted: boolean = false;
let age: number = 26;
let firstName: string = "Faiz";

// Inferensi tipe (TypeScript otomatis menebak tipe variabel!)
let isDone = true; // bertipe boolean
let count = 42;    // bertipe number
let username = "fapskom"; // bertipe string

Array dan Tuple

Anda dapat menentukan tipe array dengan menambahkan tanda [] setelah tipe, atau menggunakan Array<tipe>:

let scores: number[] = [90, 85, 100];
let tags: Array<string> = ["React", "TypeScript"];

// Tuple memiliki jumlah elemen tetap dengan tipe yang telah ditentukan di setiap posisi
let userSession: [string, number] = ["faiz_adi", 1716382900];

3. Interface dan Type Alias

Untuk mendefinisikan bentuk objek yang kompleks, Anda dapat menggunakan interface atau type. Interface sangat mudah diperluas (extensible) dan sangat cocok untuk mendefinisikan respons API atau properti komponen (props).

interface User {
  id: string;
  name: string;
  email: string;
  isAdmin?: boolean; // Properti opsional (ditandai dengan '?')
}

const activeUser: User = {
  id: "usr_9921",
  name: "Faiz Adi",
  email: "faiz@fapskom.com",
};

Type Alias

Type alias digunakan untuk mewakili tipe primitif, gabungan beberapa tipe (union), dan tipe kompleks:

type ID = string | number; // Union type (bisa berupa string ATAU number)
type ThemeMode = "light" | "dark" | "system";

let currentTheme: ThemeMode = "dark";
// let invalidTheme: ThemeMode = "blue"; // ❌ Error: Tipe '"blue"' tidak dapat dimasukkan ke dalam tipe 'ThemeMode'.

4. Fungsi yang Aman dengan Tipe (Type-Safe Functions)

TypeScript memungkinkan Anda menentukan tipe untuk argumen dan nilai kembalian (return value) dari sebuah fungsi:

function calculateTotal(price: number, tax: number = 0.1): number {
  return price + price * tax;
}

// Sintaks arrow function
const logMessage = (msg: string): void => {
  console.log(`[LOG]: ${msg}`);
};

Jika fungsi tidak mengembalikan nilai apa pun, gunakan tipe kembalian void.

5. Memahami Generics

Generics bertindak seperti variabel untuk tipe data. Fitur ini memungkinkan Anda menulis fungsi bantuan (helper) yang fleksibel dan dapat digunakan kembali, sembari tetap menjaga hubungan tipe data yang ketat antara argumen masuk dan nilai keluar.

Misalkan Anda ingin membuat fungsi yang mengembalikan elemen pertama dari sebuah array:

// Tanpa Generics: Kita kehilangan informasi tipe data (mengembalikan tipe 'any')
function getFirstItem(arr: any[]): any {
  return arr[0];
}

// Dengan Generics (diwakili oleh nama parameter tipe <T>)
function getFirst<T>(arr: T[]): T {
  return arr[0];
}

const numbers = [1, 2, 3];
const firstNumber = getFirst(numbers); // Otomatis dikenali bertipe 'number'

const names = ["Faiz", "Adi"];
const firstNameVal = getFirst(names); // Otomatis dikenali bertipe 'string'

6. Konfigurasi TypeScript (tsconfig.json)

Setiap proyek TypeScript dikonfigurasi menggunakan file tsconfig.json di direktori utama (root). Berikut adalah opsi inti yang paling penting:

{
  "compilerOptions": {
    "target": "es2022",               // Hasil kompilasi berupa JavaScript modern
    "module": "commonjs",             // Cara modul diimpor/diekspor
    "strict": true,                   // Mengaktifkan pemeriksaan tipe ketat (Sangat Direkomendasikan!)
    "esModuleInterop": true,          // Dukungan kompatibilitas modul ES yang lebih baik
    "skipLibCheck": true,             // Melewatkan pemeriksaan file deklarasi tipe (.d.ts)
    "forceConsistentCasingInFileNames": true
  }
}

Mengapa TypeScript Mengubah Segalanya

Mengadopsi TypeScript memberikan keuntungan luar biasa dalam jangka panjang:

  1. Kode yang Mendokumentasikan Diri Sendiri (Self-Documenting): Editor Anda akan menampilkan bentuk objek dan parameter fungsi yang tepat secara real-time saat Anda mengetik.
  2. Refaktor Kode yang Aman: Cukup ubah nama bidang di suatu interface, dan kompiler TypeScript akan langsung menunjukkan setiap lokasi di seluruh aplikasi Anda yang perlu diperbarui.
  3. Bebas dari Error Undefined: Aturan ketat null check mencegah kesalahan fatal seperti Cannot read property 'x' of undefined yang sering kali membuat aplikasi di production mogok secara tiba-tiba.

TypeScript kini menjadi standar utama dalam ekosistem web modern. Begitu Anda mulai menulis kode yang aman dengan sistem tipe data, Anda tidak akan pernah mau kembali ke JavaScript biasa! 🚀

← More Articles