Mengenal TypeScript

TypeScript adalah superset dari JavaScript yang menambahkan sistem tipe statis opsional. Kode TypeScript pada akhirnya dikompilasi (di-transpile) menjadi JavaScript biasa, sehingga bisa berjalan di mana pun JavaScript berjalan — browser, Node.js, maupun runtime lain.

Sejarah Singkat

TypeScript pertama kali dirilis oleh Microsoft pada Oktober 2012, dipimpin oleh Anders Hejlsberg — orang yang sama di balik Turbo Pascal, Delphi, dan C#. Motivasinya sederhana: JavaScript saat itu banyak dipakai untuk membangun aplikasi berskala besar, padahal bahasa tersebut awalnya dirancang untuk skrip kecil di browser dan tidak punya sistem tipe yang membantu menjaga kode tetap terstruktur. Beberapa tonggak penting:

2012 — Rilis publik pertama TypeScript 0.8.
2014 — TypeScript compiler ditulis ulang (versi 1.0), memperkenalkan arsitektur yang jadi dasar compiler modern.
2016 — TypeScript 2.0 memperkenalkan strictNullChecks, salah satu fitur paling berdampak untuk keamanan tipe.
2018–sekarang — Adopsi meluas lewat framework populer (Angular sejak awal berbasis TypeScript, lalu Vue 3, dan ekosistem React banyak bermigrasi ke TypeScript), serta iterasi fitur tipe yang makin ekspresif seperti conditional types, template literal types, dan satisfies operator.

Saat ini TypeScript menjadi salah satu bahasa yang paling banyak dipakai di ekosistem JavaScript, baik untuk aplikasi frontend maupun backend.

Perbedaan dengan JavaScript

Aspek	JavaScript	TypeScript
Sistem tipe	Dynamically typed — tipe ditentukan saat runtime.	Statically typed (opsional) — tipe diperiksa saat compile time.
Deteksi error	Banyak error baru ketahuan saat aplikasi dijalankan.	Sebagian besar error tipe tertangkap sebelum kode dijalankan.
Proses eksekusi	Langsung dijalankan oleh JavaScript engine.	Dikompilasi (transpile) ke JavaScript terlebih dahulu.
Fitur bahasa	Mengikuti spesifikasi ECMAScript.	Superset dari JavaScript — semua fitur JavaScript valid, ditambah interface, generics, enum, dan sistem tipe lainnya.
Tooling	Autocomplete dan refactoring terbatas tanpa informasi tipe.	Autocomplete, refactoring, dan navigasi kode jauh lebih akurat karena editor tahu bentuk data.
Ekstensi file	.js / .jsx	.ts / .tsx

Karena TypeScript adalah superset, setiap file .js yang valid pada dasarnya juga valid ditulis ulang sebagai .ts — migrasi bisa dilakukan bertahap, file demi file.

Generics dan Utility Types

Generics

Generics memungkinkan penulisan komponen (fungsi, class, interface) yang bekerja dengan tipe apa pun tanpa kehilangan informasi tipe tersebut — berbeda dengan any yang justru menghilangkan pengecekan tipe sama sekali.

Typescript

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const num = firstElement([1, 2, 3]); // tipe: number | undefined
const str = firstElement(["a", "b"]); // tipe: string | undefined

T di sini adalah type parameter — placeholder yang akan digantikan dengan tipe konkret setiap kali fungsi dipanggil, dan compiler menyimpulkannya secara otomatis dari argumen yang diberikan.

Utility Types

TypeScript menyediakan sejumlah utility types bawaan untuk mentransformasi tipe yang sudah ada tanpa perlu menuliskannya ulang dari nol.

Utility Type	Fungsi
Partial<T>	Membuat semua properti pada T menjadi opsional.
Required<T>	Membuat semua properti pada T menjadi wajib (kebalikan dari Partial).
Pick<T, K>	Membentuk tipe baru dengan hanya mengambil sekumpulan properti K dari T.
Omit<T, K>	Membentuk tipe baru dengan mengecualikan sekumpulan properti K dari T.
Record<K, V>	Membentuk tipe object dengan kunci bertipe K dan nilai bertipe V.
Readonly<T>	Membuat semua properti pada T tidak bisa diubah setelah diinisialisasi.

Contoh penggunaan pada satu tipe dasar User:

Typescript

type User = {
  id: string;
  name: string;
  email: string;
  role: string;
};

type UserPreview = Pick<User, "id" | "name">;
// { id: string; name: string }

type UserWithoutEmail = Omit<User, "email">;
// { id: string; name: string; role: string }

type UserDraft = Partial<User>;
// { id?: string; name?: string; email?: string; role?: string }

type UsersById = Record<string, User>;
// { [key: string]: User }

Utility types seperti ini mengurangi duplikasi tipe — cukup turunkan dari satu sumber kebenaran (User) daripada menuliskan ulang bentuk yang mirip di banyak tempat.

Interface vs Type

interface dan type sering terlihat bisa saling menggantikan untuk mendeskripsikan bentuk object, tapi keduanya punya perbedaan penting.

Aspek	interface	type
Deklarasi ganda	Bisa dideklarasikan lebih dari sekali — otomatis digabung (declaration merging).	Tidak bisa — deklarasi dengan nama sama akan error.
Extend / gabung tipe	Menggunakan extends.	Menggunakan intersection &.
Union type	Tidak bisa merepresentasikan union.	Bisa, contoh: type Status = "active" \| "inactive".
Tipe primitif/tuple/alias lain	Hanya untuk bentuk object/class.	Bisa untuk apa saja — primitif, tuple, union, mapped type, dll.
Konvensi umum	Sering dipakai untuk mendeskripsikan bentuk object publik/API, terutama pada class.	Sering dipakai untuk union, intersection, atau tipe yang butuh transformasi (mapped/conditional types).

Contoh perbedaan yang paling terasa — declaration merging pada interface:

Typescript

interface Animal {
  name: string;
}

interface Animal {
  sound: string;
}

// Animal sekarang otomatis punya name dan sound
const cat: Animal = { name: "Cat", sound: "Meow" };

Perilaku ini tidak berlaku pada type — mendeklarasikan type Animal dua kali akan langsung menghasilkan error dari compiler. Untuk kebanyakan kasus sehari-hari, keduanya bisa dipakai bergantian sesuai preferensi tim; pilih interface saat mendeskripsikan bentuk object yang mungkin perlu di-extend atau digabung, dan type saat butuh union, intersection, atau tipe yang lebih dinamis.

Pro dan Kontra

Pro	Kontra
Error tipe tertangkap sebelum runtime, mengurangi bug yang baru ketahuan di production.	Ada learning curve tambahan, terutama untuk tipe-tipe lanjutan seperti conditional dan mapped types.
Autocomplete dan refactoring di editor jauh lebih akurat karena compiler tahu bentuk data.	Butuh langkah build/transpile tambahan sebelum kode bisa dijalankan.
Kode lebih mudah dipahami — tipe berfungsi sebagai dokumentasi yang selalu sinkron dengan implementasi.	Tipe untuk library eksternal kadang tidak lengkap atau tidak akurat (butuh @types tambahan atau deklarasi manual).
Skala tim dan codebase besar lebih terkendali karena kontrak antar modul eksplisit.	Bisa menambah waktu development di awal untuk mendefinisikan tipe, terutama pada prototipe cepat.
Adopsi bertahap dimungkinkan karena superset dari JavaScript.	Sistem tipe tetap hanya berlaku saat compile time — tidak ada jaminan tipe di runtime (misalnya data dari API eksternal tetap perlu divalidasi).

Secara umum, biaya belajar dan setup TypeScript sepadan untuk proyek yang berumur panjang atau dikerjakan banyak orang, sementara untuk skrip sekali pakai atau prototipe sangat cepat, JavaScript murni kadang masih lebih praktis.

Mengenal TypeScript

Sejarah Singkat

Perbedaan dengan JavaScript

Generics dan Utility Types

Generics

Utility Types

Interface vs Type

Pro dan Kontra

Recent posts