TypeScript #

JavaScript adalah bahasa yang luar biasa fleksibel — dan fleksibilitas itu adalah pisau bermata dua. Di satu sisi, kamu bisa menulis kode dengan cepat tanpa banyak upacara. Di sisi lain, di codebase yang tumbuh besar dan dikerjakan oleh banyak orang, fleksibilitas itu berubah jadi sumber bug yang sulit dilacak: fungsi yang menerima tipe data sembarang, properti objek yang tidak terdefinisi, undefined is not a function yang muncul di production. TypeScript lahir dari frustrasi nyata dengan masalah ini. Dikembangkan oleh Microsoft dan dirilis ke publik pada 2012, TypeScript adalah superset JavaScript yang menambahkan sistem tipe statis — tanpa membuang satu baris pun dari ekosistem JavaScript yang sudah ada. Kamu tetap menulis JavaScript, tapi dengan lapisan keamanan tipe yang memungkinkan IDE dan compiler mendeteksi bug sebelum program dijalankan.

Apa Itu TypeScript? #

TypeScript bukan bahasa yang berdiri sendiri. Ia adalah superset dari JavaScript — artinya setiap kode JavaScript yang valid adalah juga kode TypeScript yang valid. Kamu bisa mengambil file .js apapun, mengganti ekstensinya menjadi .ts, dan TypeScript compiler akan menerimanya tanpa keluhan (meskipun tanpa manfaat type checking penuh).

Yang TypeScript tambahkan di atas JavaScript adalah sistem tipe statis — kemampuan untuk mendeklarasikan tipe variabel, parameter fungsi, dan nilai kembalian secara eksplisit, sehingga TypeScript compiler (tsc) bisa memverifikasi kebenaran penggunaan tipe di seluruh codebase sebelum kode dijalankan.

// JavaScript: tidak ada informasi tipe
function hitungHarga(harga, jumlah, diskon) {
    return harga * jumlah * (1 - diskon);
}

// Apakah diskon dalam bentuk 0.1 atau 10 (persen)?
// Apakah jumlah bisa string? Tidak ada yang tahu tanpa baca implementasi.
hitungHarga("15000", 2, 10); // tidak ada error, tapi hasilnya salah

// TypeScript: kontrak fungsi eksplisit
function hitungHargaTS(
    harga: number,
    jumlah: number,
    diskon: number  // 0.0 – 1.0
): number {
    return harga * jumlah * (1 - diskon);
}

hitungHargaTS("15000", 2, 0.1);
// Error: Argument of type 'string' is not assignable to parameter of type 'number'
// ↑ Tertangkap compiler, bukan di production

Penting untuk dipahami: TypeScript tidak ada di runtime. Sebelum program dijalankan, TypeScript compiler mengubah kode .ts menjadi JavaScript biasa. Browser, Node.js, dan Deno tidak tahu apa-apa tentang TypeScript — mereka hanya menjalankan JavaScript hasil kompilasi. Ini berarti adopsi TypeScript tidak memerlukan perubahan pada lingkungan deployment apapun.

flowchart LR
    A["Kode TypeScript\n(.ts / .tsx)"] -->|tsc| B["JavaScript\n(.js)"]
    B -->|dijalankan di| C["Browser"]
    B -->|dijalankan di| D["Node.js"]
    B -->|dijalankan di| E["Deno / Bun"]
    A -->|type checking| F["Error tipe\nterdeteksi sebelum run"]

Mengapa TypeScript Ada — Masalah yang Dipecahkan #

Untuk benar-benar menghargai TypeScript, kamu perlu merasakan masalah yang ia selesaikan. JavaScript dirancang pada 1995 untuk skrip kecil di browser — bukan untuk aplikasi ratusan ribu baris yang dikerjakan puluhan developer. Seiring JavaScript menjadi bahasa server (Node.js) dan bahasa aplikasi enterprise (Angular, React, Vue di skala besar), keterbatasannya mulai terasa menyakitkan.

Masalah 1: Tidak Ada Kontrak Antar Modul #

Di JavaScript murni, kamu tidak bisa tahu dari signature fungsi apa yang ia harapkan dan apa yang ia kembalikan tanpa membaca seluruh implementasinya — atau berharap dokumentasinya up-to-date.

// ANTI-PATTERN (JavaScript): signature tanpa kontrak
function simpanUser(user) {
    // apakah user.id wajib ada?
    // apakah user.email bisa undefined?
    // apakah fungsi ini return sesuatu?
    db.save(user);
}

// BENAR (TypeScript): kontrak eksplisit
interface User {
    id: number;
    nama: string;
    email: string;
    telepon?: string;  // ? = opsional
}

function simpanUser(user: User): Promise<void> {
    return db.save(user);
}

Masalah 2: Refactoring yang Berbahaya #

Di JavaScript, mengganti nama properti atau mengubah struktur objek adalah operasi berbahaya — kamu tidak tahu semua tempat di mana properti itu digunakan tanpa menjalankan test suite lengkap (atau menunggu bug laporan dari user). TypeScript membuat refactoring aman: ganti nama properti di satu tempat, semua penggunaan yang tidak diperbarui langsung merah di editor.

Masalah 3: Autocomplete yang Tidak Akurat #

Tanpa informasi tipe, IDE tidak bisa memberikan autocomplete yang akurat untuk properti objek atau parameter fungsi. TypeScript memungkinkan IntelliSense yang presisi — tidak hanya menebak berdasarkan penggunaan, tapi berdasarkan definisi tipe yang eksplisit.

flowchart TD
    A["Masalah JavaScript\ndi Skala Besar"] --> B["Tidak ada kontrak\nantar modul"]
    A --> C["Refactoring\nberbahaya"]
    A --> D["Autocomplete\ntidak akurat"]
    A --> E["Bug tipe\nditemukan di runtime"]
    B --> F["TypeScript\nInterface & Type"]
    C --> F
    D --> F
    E --> F
    F --> G["Bug terdeteksi\nsaat kompilasi"]
    F --> H["Refactoring\naman dengan IDE"]
    F --> I["IntelliSense\npresisi"]

Sejarah dan Evolusi #

TypeScript pertama kali diumumkan secara publik oleh Microsoft pada Oktober 2012, dengan versi 0.8. Sosok kunci di balik pengembangannya adalah Anders Hejlsberg — arsitek C# dan Delphi, salah satu desainer bahasa paling berpengaruh di industri. Bukan kebetulan TypeScript terasa seperti C# versi JavaScript: keduanya berbagi filsafat desain yang sama soal strong typing dan OOP.

Motivasi Microsoft sangat praktis: tim internal mereka kesulitan membangun aplikasi web berskala besar (termasuk Bing dan Visual Studio Online) menggunakan JavaScript murni. Mereka butuh cara untuk membawa disiplin pemrograman bertipe ke dalam JavaScript tanpa meninggalkan ekosistemnya.

flowchart TD
    A["Oktober 2012\nTypeScript 0.8\nDirilis ke publik"] --> B["2014\nTypeScript 1.0\nRilis stabil pertama\nDisertakan di Visual Studio"]
    B --> C["2016\nTypeScript 2.0\nstrict null checks\nNon-nullable types"]
    C --> D["2018\nTypeScript 3.0\nProject references\nTuple improvements"]
    D --> E["2020\nTypeScript 4.0\nVariadic tuple types\nLabeled tuple elements"]
    E --> F["2022\nTypeScript 4.9\nSatisfies operator\nAuto-accessor"]
    F --> G["2023\nTypeScript 5.0\nDecorators (standar)\nConst type parameters"]
    G --> H["2024–2025\nTypeScript 5.x\nPerforma compiler\nFitur type system lanjutan"]

Titik balik popularitas TypeScript terjadi sekitar 2016–2017, dipicu oleh dua kejadian besar. Pertama, Angular 2 (dirilis 2016) memilih TypeScript sebagai bahasa utamanya — keputusan yang membawa seluruh komunitas Angular ke TypeScript. Kedua, React dan ekosistemnya mulai mendapat dukungan TypeScript yang baik melalui @types/react. Dari situ pertumbuhannya tidak pernah berhenti.

Survei State of JS dan Stack Overflow Developer Survey secara konsisten menempatkan TypeScript sebagai salah satu bahasa yang paling banyak digunakan dan paling disukai developer. Pada 2024, TypeScript sudah menjadi default di hampir semua framework frontend modern.

Hubungan TypeScript dan JavaScript #

Relasi TypeScript dan JavaScript perlu dipahami dengan benar karena sering disalahpahami.

TypeScript adalah Superset #

Setiap file JavaScript yang valid adalah TypeScript yang valid. Kamu tidak perlu menulis ulang seluruh codebase untuk mulai menggunakan TypeScript — bisa dilakukan secara bertahap, file per file.

JavaScript ⊂ TypeScript
(JavaScript adalah subset dari TypeScript)

TypeScript Dikompilasi ke JavaScript #

TypeScript tidak punya runtime sendiri. Proses kompilasi (tsc) menghasilkan JavaScript bersih yang bisa dijalankan di lingkungan manapun. Tipe hilang setelah kompilasi — tidak ada type checking di runtime kecuali kamu tambahkan sendiri dengan validasi manual atau library seperti Zod.

// TypeScript source
interface Produk {
    id: number;
    nama: string;
    harga: number;
}

function formatHarga(produk: Produk): string {
    return `${produk.nama}: Rp ${produk.harga.toLocaleString('id-ID')}`;
}

// JavaScript hasil kompilasi (semua tipe hilang)
function formatHarga(produk) {
    return `${produk.nama}: Rp ${produk.harga.toLocaleString('id-ID')}`;
}

TypeScript Mengikuti Standar ECMAScript #

TypeScript selalu mendukung fitur JavaScript modern (ESNext) dan mengompilasi ke versi JavaScript lama sesuai target yang dikonfigurasi. Ini berarti kamu bisa menggunakan async/await, optional chaining (?.), nullish coalescing (??), dan fitur terbaru lainnya — TypeScript yang mengurus kompatibilitasnya.

Karakteristik Utama #

Static Typing dan Type Inference #

TypeScript mendukung dua mode anotasi tipe: eksplisit (kamu menulisnya) dan inferensi (TypeScript menebaknya dari konteks). Keduanya bekerja bersamaan.

// Eksplisit: kamu mendeklarasikan tipe
let nama: string = "Budi";
let usia: number = 28;

// Inferensi: TypeScript tahu tipenya dari nilai awal
let kota = "Jakarta";        // TypeScript: kota adalah string
let aktif = true;            // TypeScript: aktif adalah boolean
let harga = 150_000;         // TypeScript: harga adalah number

// ANTI-PATTERN: anotasi eksplisit yang redundan
let pesan: string = "halo";  // tidak perlu, TypeScript sudah tahu ini string

// BENAR: anotasi eksplisit hanya saat inferensi tidak cukup
let hasil: string | number;  // tipe union yang tidak bisa diinfer dari deklarasi
hasil = "sukses";
hasil = 0;

Sistem Tipe yang Kaya #

TypeScript memiliki sistem tipe yang jauh lebih ekspresif dibanding bahasa bertipe statis lain seperti Java. Fitur-fitur seperti union types, intersection types, mapped types, conditional types, dan template literal types memungkinkan kamu memodelkan data dengan presisi tinggi.

// Union type: nilai bisa salah satu dari beberapa tipe
type StatusPesanan = "menunggu" | "diproses" | "dikirim" | "selesai" | "dibatalkan";

// Intersection type: gabungan dari beberapa tipe
type AdminUser = User & { level: "admin"; izin: string[] };

// Mapped type: transformasi otomatis dari tipe lain
type ReadOnly<T> = { readonly [K in keyof T]: T[K] };

// Template literal type: string dengan pola tertentu
type EventName = `on${Capitalize<string>}`;
// Valid: "onClick", "onChange", "onSubmit"

Interface vs Type Alias #

Dua cara mendefinisikan bentuk objek di TypeScript, dengan perbedaan yang penting:

// Interface: bisa di-extend dan di-merge secara deklaratif
interface Kendaraan {
    merek: string;
    tahun: number;
}

interface Kendaraan {
    warna: string;  // declaration merging: interface digabung otomatis
}

interface Mobil extends Kendaraan {
    jumlahPintu: number;
}

// Type alias: lebih fleksibel, bisa untuk union/intersection
type ID = string | number;
type Koordinat = { lat: number; lng: number };
type Peta = Record<string, Koordinat>;

Generics #

Generics memungkinkan kamu menulis komponen yang bekerja dengan berbagai tipe sekaligus tetap type-safe — tanpa duplikasi kode.

// Tanpa generics: harus duplikasi untuk setiap tipe
function ambilPertamaAngka(arr: number[]): number { return arr[0]; }
function ambilPertamaString(arr: string[]): string { return arr[0]; }

// Dengan generics: satu fungsi untuk semua tipe
function ambilPertama<T>(arr: T[]): T {
    return arr[0];
}

const angka = ambilPertama([1, 2, 3]);        // T = number
const kata = ambilPertama(["halo", "dunia"]); // T = string

// Generic dengan constraint: T harus punya properti id
function cariById<T extends { id: number }>(items: T[], id: number): T | undefined {
    return items.find(item => item.id === id);
}

Di Mana TypeScript Digunakan? #

TypeScript kini ada di hampir semua lapisan pengembangan web modern, dan terus merambah ke domain lain.

Frontend Web #

Ini adalah habitat utama TypeScript. Semua framework frontend besar kini menggunakan atau sangat mendukung TypeScript:

Backend dengan Node.js #

Node.js sendiri tidak bisa menjalankan TypeScript langsung, tapi ekosistemnya sangat mendukung:

// Contoh Express + TypeScript
import express, { Request, Response } from "express";

interface UserBody {
    nama: string;
    email: string;
}

const app = express();
app.use(express.json());

app.post("/users", (req: Request<{}, {}, UserBody>, res: Response) => {
    const { nama, email } = req.body;
    // req.body sudah bertipe UserBody — tidak perlu guessing
    res.json({ pesan: `User ${nama} berhasil dibuat`, email });
});

Framework backend yang dibangun khusus untuk TypeScript juga semakin populer: NestJS (arsitektur Angular-like untuk backend), tRPC (type-safe API tanpa schema), Elysia (untuk Bun runtime).

Tooling dan CLI #

Banyak tool developer modern ditulis dalam TypeScript: Vite, ESLint (versi baru), Prisma, Drizzle ORM, Zod, dan banyak lagi. Ini bukan sekadar tren — TypeScript memang sangat cocok untuk tooling karena memudahkan maintainability codebase yang kompleks.

flowchart TD
    TS["TypeScript\ndi Industri"] --> FE["Frontend Web\nAngular, React, Vue\nNext.js, Svelte"]
    TS --> BE["Backend\nNode.js + Express\nNestJS, tRPC, Elysia"]
    TS --> Mobile["Mobile\nReact Native\nIonic, Capacitor"]
    TS --> Tool["Tooling\nVite, ESLint, Prisma\nZod, Drizzle ORM"]
    TS --> Full["Full-Stack\nT3 Stack\nNext.js + tRPC + Prisma"]

Ekosistem dan Tooling #

TypeScript Compiler (tsc) #

tsc adalah compiler resmi TypeScript. Ia membaca file tsconfig.json untuk menentukan target kompilasi, strict mode, path alias, dan banyak opsi lain.

# Instalasi TypeScript
npm install -D typescript

# Buat tsconfig.json
npx tsc --init

# Kompilasi
npx tsc

# Mode watch: kompilasi ulang saat file berubah
npx tsc --watch

tsconfig.json — Jantung Konfigurasi #

tsconfig.json mengontrol semua perilaku compiler TypeScript. Beberapa opsi paling penting:

{
    "compilerOptions": {
        "target": "ES2022",          // versi JavaScript output
        "module": "ESNext",          // sistem modul output
        "strict": true,              // aktifkan semua strict checks
        "noUncheckedIndexedAccess": true,  // akses array selalu | undefined
        "exactOptionalPropertyTypes": true, // optional property lebih ketat
        "outDir": "./dist",          // direktori output
        "rootDir": "./src",          // direktori source
        "paths": {                   // path alias
            "@/*": ["./src/*"]
        }
    }
}

Selalu aktifkan "strict": true di project baru. Mode strict mengaktifkan serangkaian pengecekan yang awalnya terasa merepotkan tapi mencegah kelas bug yang paling umum: strictNullChecks mencegah null/undefined diakses tanpa pengecekan, noImplicitAny mencegah tipe any yang tidak disengaja. Mematikan strict mode sama dengan menggunakan setengah manfaat TypeScript.

DefinitelyTyped dan @types #

Library JavaScript yang tidak ditulis dalam TypeScript tidak punya informasi tipe. Komunitas menyelesaikan masalah ini melalui DefinitelyTyped — repositori tipe untuk ribuan library populer, didistribusikan sebagai package @types/*.

# Instal library + tipe-nya
npm install lodash
npm install -D @types/lodash

# Library yang ditulis TypeScript langsung punya tipe bawaan
npm install axios        # @types/axios tidak perlu, axios sudah include tipe
npm install zod          # sama, tipe sudah include

Kapan Memilih TypeScript vs JavaScript #

Gunakan TypeScript jika:
  ✓ Proyek akan tumbuh besar atau dikerjakan lebih dari satu orang
  ✓ Butuh refactoring yang aman dalam jangka panjang
  ✓ Menggunakan framework yang sudah TypeScript-first (Angular, NestJS, Next.js)
  ✓ Membangun library atau SDK yang akan digunakan orang lain
  ✓ Tim memiliki background bahasa bertipe statis (Java, C#, Go)

Pertimbangkan JavaScript jika:
  ✗ Skrip kecil sekali pakai (utilitas build, script otomasi sederhana)
  ✗ Prototyping sangat cepat di mana kecepatan iterasi lebih penting dari kebenaran
  ✗ Tim sangat tidak familiar dengan TypeScript dan deadline sangat ketat
  ✗ Runtime tidak mendukung atau konfigurasi TypeScript terlalu rumit untuk konteksnya

Apa yang Akan Dipelajari di Dokumentasi Ini #

Dokumentasi ini membahas TypeScript dari fondasi ke penggunaan nyata, dengan fokus pada pemahaman mengapa bukan sekadar bagaimana.

flowchart TD
    A["Dasar\nInstalasi & tsconfig\nVariabel, Tipe Data\nFungsi, Kelas, Interface\nGenerics, Exception"] --> B["Lanjutan\nAsync Programming\nI/O & Socket\nWeb Server\nUnit Test & Mocking"]
    B --> C["Topik Lainnya\nDatabase SQL & NoSQL\nCache (Redis, Memcached)\nJSON & YAML\nArtikel & Sumber Daya"]
    C --> D["Standard Library\nStrings, IO, Math"]

Section Dasar membangun fondasi yang solid: cara instalasi TypeScript dan konfigurasi tsconfig.json, sintaks dasar, sistem tipe lengkap (primitif, union, intersection, generics), kelas dan interface, exception handling, serta struktur data List dan Map dengan tipe yang tepat.

Section Lanjutan masuk ke topik yang dibutuhkan untuk aplikasi nyata: pemrograman asinkron (Promise, async/await, event loop), operasi I/O, socket dan WebSocket, membuat web server, hingga unit testing dan mocking yang type-safe.

Section Topik Lainnya bersifat praktis: integrasi TypeScript dengan database (MySQL, PostgreSQL, MSSQL, Oracle, MongoDB, Elasticsearch), cache (Redis, Memcached), serialisasi data (JSON, YAML), dan artikel referensi.

Section Standard Library membahas modul-modul utilitas yang sering digunakan untuk manipulasi string, operasi I/O, dan fungsi matematika.

Ringkasan #

• TypeScript adalah superset JavaScript — semua kode JavaScript valid adalah TypeScript. Adopsi bisa dilakukan secara bertahap, file per file.
• TypeScript tidak ada di runtime — compiler mengubah .ts menjadi .js bersih. Browser dan Node.js hanya melihat JavaScript. Tidak ada overhead runtime dari TypeScript itu sendiri.
• Static typing mendeteksi bug saat kompilasi — bukan saat runtime atau dari laporan user. Ini adalah keunggulan terbesar TypeScript untuk codebase skala besar.
• Type inference mengurangi verbositas — TypeScript sering bisa menebak tipe dari konteks. Tulis anotasi tipe eksplisit hanya saat inferensi tidak cukup.
• Selalu aktifkan strict: true — mode strict memaksimalkan manfaat TypeScript. Mematikannya sama dengan menggunakan setengah manfaat bahasa.
• Generics adalah kunci reusability yang type-safe — hindari duplikasi kode untuk tipe yang berbeda dengan tetap mempertahankan keamanan tipe.
• Ekosistem sangat matang — @types/* menyediakan tipe untuk ribuan library JavaScript, dan framework modern sudah TypeScript-first.
• Anders Hejlsberg, arsitek C#, merancang TypeScript — filosofi desainnya konsisten: bahasa yang produktif untuk developer dan aman untuk codebase besar.