Pengantar TypeScript untuk Pemula

TypeScript semakin sering muncul di lowongan kerja dan proyek open source. Intinya sederhana: JavaScript plus sistem tipe. Kamu tetap menulis kode yang familiar, tapi editor dan compiler bisa menangkap banyak kesalahan sebelum kode dijalankan.

Artikel ini pengantar ringkas. Kalau mau jalur belajar yang lebih terstruktur (quiz, checklist, sampai mini proyek), lanjut ke course TypeScript Dasar Interaktif.

Apa itu TypeScript?

TypeScript adalah superset JavaScript yang dikembangkan Microsoft. File .ts dikompilasi menjadi .js biasa, jadi hasil akhirnya tetap bisa jalan di browser atau Node.js.

function salam(nama: string): string {
  return `Halo, ${nama}`;
}
 
salam("Budi"); // OK
// salam(42); // Error di compile-time

Yang penting diingat: tipe hilang setelah di-compile. TypeScript menjaga kualitas saat menulis kode, bukan mengganti validasi di runtime.

Kenapa layak dipelajari?

• Error lebih awal — typo properti, argumen salah tipe, dan null yang “nyasar” sering ketahuan di editor.
• Autocomplete lebih pintar — IDE tahu bentuk objek dan method yang tersedia.
• Refactor lebih aman — ubah nama field, TypeScript menandai semua pemakaian yang rusak.
• Dokumentasi hidup — signature fungsi menjelaskan kontrak tanpa komentar panjang.

Kalau kamu sudah nyaman dengan JavaScript (variabel, fungsi, objek, array), transisi ke TypeScript biasanya terasa natural.

Setup cepat

Cara paling sederhana untuk mencoba di lokal:

mkdir coba-ts && cd coba-ts
npm init -y
npm install -D typescript
npx tsc --init

Buat file src/index.ts:

const pesan: string = "Halo TypeScript";
console.log(pesan);

Lalu compile:

npx tsc
node dist/index.js

Untuk eksperimen satu file tanpa setup panjang, bisa juga pakai TypeScript Playground atau menjalankan langsung dengan npx tsx src/index.ts.

Di tsconfig.json, aktifkan "strict": true sejak awal. Opsi ini menyalakan pengecekan ketat (termasuk null/undefined) yang sangat membantu membentuk kebiasaan baik.

Tipe yang paling sering dipakai

Primitif

let nama: string = "Ani";
let umur: number = 20;
let aktif: boolean = true;

Objek dengan interface

interface User {
  id: number;
  nama: string;
  email?: string; // optional
}
 
const user: User = {
  id: 1,
  nama: "Budi",
};

Union

type Id = string | number;
type Status = "idle" | "loading" | "error";

Union literal seperti Status jauh lebih aman daripada string bebas, karena nilai yang diizinkan sudah terbatas.

Fungsi

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

Parameter hampir selalu perlu dianotasi. Return type sering bisa di-infer, tapi untuk API publik menulisnya eksplisit tetap bagus.

any vs unknown

any mematikan pengecekan tipe — praktis, tapi mudah menyembunyikan bug. Untuk data dari luar (API, JSON.parse), lebih aman mulai dari unknown, lalu narrow dulu:

function isUser(value: unknown): value is { nama: string } {
  return (
    typeof value === "object" &&
    value !== null &&
    "nama" in value &&
    typeof (value as { nama: unknown }).nama === "string"
  );
}
 
const data: unknown = JSON.parse('{"nama":"Ani"}');
if (isUser(data)) {
  console.log(data.nama.toUpperCase());
}

Langkah belajar yang masuk akal

1. Setup proyek kecil + strict: true.
2. Biasakan anotasi parameter dan bentuk objek (interface / type).
3. Pelajari union, narrowing, lalu generics dasar.
4. Terapkan di proyek nyata: React + TypeScript atau API Node + TypeScript.

Jangan buru-buru menghafal semua utility type (Partial, Pick, Omit, dan seterusnya). Pelajari saat kebutuhan muncul di kode kamu.

Penutup

TypeScript bukan bahasa baru yang harus dipelajari dari nol. Ia adalah lapisan ketelitian di atas JavaScript: membantu kamu menulis kontrak yang jelas, mengurangi bug konyol, dan membuat kolaborasi tim lebih nyaman.

Mulai dari setup kecil, nyalakan strict, dan biarkan error merah di editor jadi guru. Setelah fondasinya enak, naikkan ke proyek framework — tipenya tetap sama, hanya tooling-nya yang bertambah.