Apa itu TypeScript? Pengertian untuk Pemula dan Contohnya

TypeScript adalah JavaScript dengan tipe statis. Kamu menambahkan anotasi tipe pada variabel, parameter, dan nilai kembalian, compiler TypeScript memeriksanya sebelum program berjalan, lalu menghasilkan JavaScript biasa tanpa tipe. JavaScript itu berjalan di mana pun JavaScript berjalan: browser, Node.js, Deno, dan Bun.

Ini sebuah program TypeScript kecil. Tekan Jalankan.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Output:

Ada is 36 years old
82.33333333333333

Selain bagian setelah titik dua (: string, : User, : number[]) dan interface, ini adalah JavaScript. Tambahan itu memberi tahu compiler nilai apa saja yang boleh dimiliki setiap variabel. Perhatikan bahwa total tidak punya anotasi: TypeScript menyimpulkan sendiri bahwa nilainya number. Sebagian besar kode TypeScript memberi anotasi di batas fungsi dan membiarkan compiler menyimpulkan sisanya.

Apa yang Ditangkap Pemeriksa Tipe

Tujuan anotasi adalah agar kesalahan muncul saat kamu menulis kode, bukan saat pengguna mengalaminya. Jalankan blok ini dan baca output-nya:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

Programnya tidak pernah dimulai. Compiler malah mencetak dua error:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Setiap error menyebutkan file, baris dan kolom, kode error (TS2322), dan apa yang salah. Di JavaScript biasa, kedua baris itu akan berjalan, dan baris kedua akan mencetak Linus is undefined years old tanpa peringatan apa pun. Di editor seperti VS Code, error yang sama muncul sebagai garis bawah merah saat kamu mengetik, bersama autocompletion yang tahu bahwa user punya tepat sebuah name dan sebuah age.

Bug yang biasa ditangkap pemeriksa tipe:

• Salah ketik nama property atau method (user.nmae, list.lenght).
• Memanggil fungsi dengan argumen yang terlalu sedikit atau terlalu banyak, atau dengan tipe yang salah.
• Memakai nilai yang mungkin null atau undefined tanpa memeriksanya dulu.
• Lupa menangani salah satu kasus dari union seperti "loading" | "done" | "error", ketika kodenya memakai pemeriksaan kelengkapan (exhaustive check).
• Kode yang rusak ketika fungsi yang kamu andalkan mengubah signature-nya.

Tipe Hilang Saat Runtime

Tipe TypeScript hanya ada saat kompilasi. Compiler memeriksanya lalu membuangnya: JavaScript yang dihasilkannya tidak punya anotasi maupun interface, dan berjalan persis seperti JavaScript yang kamu tulis sendiri.

Input ini:

function double(n: number): number {
    return n * 2;
}

menjadi output ini:

function double(n) {
    return n * 2;
}

Jadi TypeScript tidak bisa memeriksa nilai yang datang saat program berjalan. Di sini teks JSON mengaku sebagai User, compiler harus memercayai pengakuan itu, dan saat runtime pun tidak ada yang protes:

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Output:

string
thirty-six1

Data dari luar program (response API, input form, file) perlu diperiksa saat runtime, misalnya dengan fungsi type guard yang memeriksa nilainya. Setelah itu TypeScript memercayai pemeriksaan tersebut dan mempersempit tipenya untukmu.

Siapa Pembuat TypeScript dan Kenapa

TypeScript dibuat di Microsoft, dengan Anders Hejlsberg (perancang C#) memimpin perancangannya. TypeScript dirilis ke publik pada Oktober 2012 sebagai versi 0.8, dan versi 1.0 menyusul pada April 2014. TypeScript bersifat open source dengan lisensi Apache 2.0 dan dikembangkan di GitHub. Berdasarkan hitungan kontributor bulanan GitHub, TypeScript menjadi bahasa yang paling banyak dipakai di GitHub pada Agustus 2025, di atas Python dan JavaScript.

Motivasinya adalah codebase JavaScript yang besar. JavaScript tidak punya cara untuk menyatakan "fungsi ini menerima object user", jadi mengganti nama property atau mengubah fungsi berarti mencari di seluruh codebase dan berharap test mencakup setiap pemanggil. TypeScript menambahkan informasi itu dengan cara yang tetap sepenuhnya kompatibel dengan JavaScript:

• TypeScript adalah superset. JavaScript yang valid adalah sintaks TypeScript yang valid, jadi sebuah proyek bisa beralih satu file demi satu file.
• TypeScript mengikuti JavaScript. Selain beberapa tambahan awal seperti enum dan namespace, TypeScript tidak menambahkan fitur runtime sendiri; sintaks baru datang dari standar JavaScript.
• Tipe tidak memakan biaya saat runtime. Tipe dihapus, jadi output-nya secepat JavaScript yang ditulis sendiri.

Versi mayor saat ini adalah TypeScript 7, yang compiler-nya ditulis ulang dengan Go sebagai program native dan memeriksa tipe proyek besar kira-kira sepuluh kali lebih cepat daripada compiler berbasis JavaScript yang digantikannya. Halaman TypeScript 7 membahas apa saja yang berubah.

TypeScript Digunakan untuk Apa? Frontend dan Backend

TypeScript dipakai untuk software yang sama dengan JavaScript, baik di frontend maupun backend. Karena output-nya JavaScript, TypeScript bisa dipakai di mana pun JavaScript dipakai:

Bahasa yang sama mencakup kedua sisi aplikasi web, dan itulah sebabnya banyak tim berbagi definisi tipe (misalnya bentuk response API) antara kode server dan kode browser.

Bagaimana Kode TypeScript Menjadi JavaScript

Ada dua pekerjaan yang terpisah, dan masing-masing dikerjakan oleh tool yang berbeda:

1. Pemeriksaan tipe. Hanya compiler TypeScript yang melakukan ini, biasanya sebagai perintah tsc (deno check milik Deno menjalankan salinan dari compiler yang sama). Compiler membaca file .ts-mu, melaporkan error, dan secara default juga menulis file .js.
2. Menghapus tipe. tsc bisa melakukannya, begitu juga tool yang lebih cepat yang sama sekali melewati pemeriksaan tipe: esbuild, SWC, Babel, dan fitur penghapus tipe bawaan di Node.js, Deno, dan Bun.

Pengaturan yang umum memakai tool cepat untuk menjalankan kode, dan tsc --noEmit (hanya memeriksa, tidak menulis apa pun) di editor dan di CI. Cara memasang tsc dan menjalankan file .ts masing-masing punya halamannya sendiri di bab ini.

Fitur Inti dalam Satu Contoh

TypeScript sehari-hari memakai sekumpulan kecil fitur. Blok ini memuat fitur-fitur utamanya sekaligus:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Output:

Ada ada@example.com
Ada can log in
Linus is banned

• Anotasi tipe (name: string) menyatakan isi sebuah variabel, parameter, property, atau nilai kembalian.
• Type inference mengisi tipe yang tidak kamu tulis: account mendapat tipenya dari apa yang dikembalikan first.
• Interface dan type alias (interface Account, type Status) memberi nama pada bentuk datamu.
• Union type ("active" | "banned", T | undefined) menjelaskan nilai yang berupa salah satu dari beberapa kemungkinan.
• Narrowing: setelah pemeriksaan seperti account !== undefined, compiler tahu kasus mana yang berlaku di dalam blok itu.
• Property opsional (email?: string) boleh tidak ada, jadi tipenya menyertakan undefined.
• Generic (first<T>) memungkinkan satu fungsi atau tipe bekerja dengan banyak tipe sambil tetap menjaga keterkaitannya: array berisi Account masuk, sebuah Account keluar.

Apakah Perlu Belajar JavaScript Dulu?

Itu membantu, tetapi kamu bisa mempelajari keduanya sekaligus. Semua tentang perilaku kode TypeScript saat runtime (variabel, fungsi, object, array, promise, class) adalah JavaScript, dan TypeScript menambahkan lapisan yang menjelaskan nilai-nilai itu. Kalau kamu sudah tahu JavaScript, materi barunya adalah sistem tipe: anotasi, interface, union, generic, dan narrowing. Kalau kamu baru mengenal keduanya, mulailah dari dasar nilai dan fungsi JavaScript, lalu tambahkan tipe sambil jalan; pesan error compiler adalah guru yang baik, karena menunjuk tepat ke baris tempat sebuah nilai dipakai dengan cara yang salah.

Urutan praktis untuk belajar TypeScript: pasang TypeScript dan jalankan file pertamamu, pelajari tipe dasar dan object type, lalu union type dan narrowing, setelah itu fungsi dan generic. Itu sudah mencakup sebagian besar kode aplikasi.