Perbedaan TypeScript dan JavaScript: Mana yang Harus Dipelajari?

kalau kalian bingung milih belajar JavaScript dulu atau langsung TypeScript, saya pernah di posisi yang sama pas mau bikin dashboard yang awalnya cuma 3 halaman, eh ternyata jadi 30 halaman dan bug tipenya muncul di production 🙂 dari situ saya ngerasain bedanya ngetik JavaScript yang fleksibel di awal, versus TypeScript yang cerewet di awal tapi nyelamatin di akhir.

di artikel ini kita bedah keduanya dengan bahasa sehari-hari, plus contoh kode yang bisa kalian copas dan lihat bedanya langsung. kita juga bahas update terbaru sampai TypeScript 5.x, supaya kalian tidak salah pilih alat untuk project 2026 ke atas.

Ringkasan Cepat di Satu Tabel

tabel di atas jadi patokan cepat. detailnya kita bahas dengan contoh.

Singkatnya: Apa Itu JavaScript dan Apa Itu TypeScript

sebelum jauh, kita luruskan dulu apa itu JavaScript dan apa itu TypeScript, supaya tidak salah kaprah.

JavaScript adalah bahasa pemrograman yang awalnya dibuat untuk bikin halaman web jadi interaktif. sekarang JavaScript sudah merambah ke mana-mana: server (backend), aplikasi desktop, mobile, sampai IoT. dijalankan langsung oleh browser, atau di server pakai Node.js, Deno, atau Bun.

TypeScript adalah superset dari JavaScript, artinya semua kode JavaScript yang valid, juga valid di TypeScript. bedanya, TypeScript menambah sistem tipe statis (static type system) di atas JavaScript. kode TypeScript tidak bisa dijalankan langsung, harus di-compile jadi JavaScript biasa dulu pakai compiler bernama tsc.

sederhananya gini:

TypeScript = JavaScript + sistem tipe statis

maka dari itu, kalau kalian sudah bisa JavaScript, naik ke TypeScript hanya perlu nambah kebiasaan menulis tipe, bukan ganti cara berpikir dari nol.

1. Tipe Data yang Ketat vs Fleksibel

ini perbedaan paling mendasar dan paling kerasa saat ngetik kode sehari-hari.

jika sudah selesai bikin variabel di JavaScript, maka kalian bebas ganti tipenya kapan saja. di TypeScript tidak. tipe dipasang di depan dan harus konsisten, kalau dilanggar langsung muncul garis merah di editor.

JavaScript (fleksibel):

let nama = "Andi";
nama = 123; // boleh, tidak error

TypeScript (ketat):

let nama: string = "Andi";
nama = 123; // error: Type 'number' is not assignable to type 'string'

contoh di atas kelihatan sepele, tapi efeknya terasa di project besar. bayangkan variabel harga yang tiba-tiba diisi null atau undefined di tengah jalan, di JavaScript error baru muncul saat program dijalankan, di TypeScript langsung merah di editor begitu diketik.

Inferensi tipe: tidak selalu nulis tipe

banyak pemula TypeScript mengira harus tulis : string di setiap variabel. tidak juga. TypeScript cukup pintar buat nebak tipe dari nilai yang kalian kasih, fitur ini namanya type inference.

let nama = "Andi";  // otomatis string, tidak perlu : string
let umur = 25;       // otomatis number
let aktif = true;    // otomatis boolean

tulis tipe secara eksplisit saat fungsinya sebagai dokumentasi atau saat variabel belum punya nilai (late initialization):

let hasil: number;

if (sukses) {
  hasil = 100;
} else {
  hasil = 0;
}

jadi sistem tipe TypeScript itu ngebantu, bukan ngebebani, kalau dipakai proporsional.

Tipe primitif yang sering dipakai

sebelum masuk lebih jauh, kenalan dulu sama tipe primitif di TypeScript:

• string – teks, contoh: "halo"
• number – angka, bisa bulat atau desimal: 42, 3.14
• boolean – benar atau salah: true, false
• null dan undefined – nilai kosong atau belum di-set
• bigint – angka yang sangat besar di luar jangkauan number
• symbol – identifier unik, jarang dipakai di level pemula
• unknown – tipe yang benar-benar belum diketahui (aman untuk input eksternal)
• any – tipe escape hatch, artinya “apa saja” (hati-hati, nanti dijelaskan)

2. Sistem Tipe: Statis vs Dinamis

JavaScript pakai dynamic typing, artinya tipe ditentukan saat program berjalan (runtime). TypeScript pakai static typing, artinya tipe diketahui saat kode diketik dan dicek lagi saat kompilasi.

JavaScript (dynamic):

function kali(a, b) {
  return a * b;
}

kali(2, 3);      // 6
kali("2", 3);    // "222" (string diulang), bukan error
kali([], {});    // NaN, bukan error

TypeScript (static):

function kali(a: number, b: number): number {
  return a * b;
}

kali(2, 3);       // 6
kali("2", 3);     // error: Argument of type 'string' is not assignable
kali([], {});     // error: Type 'never[]' is not assignable

dengan sistem tipe statis, kalian tidak perlu lagi takut salah input parameter atau salah kembalikan nilai. semuanya dicek sebelum program dijalankan.

Mode strict: kenapa penting dinyalakan

di tsconfig.json ada opsi strict: true yang menyalakan sekumpulan cek ketat: noImplicitAny, strictNullChecks, strictFunctionTypes, dan lain-lain. tanpa strict, banyak pengecekan tipe jadi lemah, dan TypeScript terasa mirip JavaScript plus noise saja.

{
  "compilerOptions": {
    "target": "ES2020",
    "strict": true,
    "outDir": "dist"
  }
}

saran saya: nyalakan strict: true sejak awal project baru. untuk project lama yang mau migrasi, nyalakan bertahap per file seperti yang kita bahas di bagian migrasi.

3. Kompiler dan Cara Jalan

TypeScript butuh langkah kompilasi. compiler bawaan namanya tsc, dipasang sebagai dependency development:

# install sebagai dev dependency
npm install -D typescript

# inisialisasi config
npx tsc --init

# compile satu file
npx tsc app.ts   # jadi app.js

# compile seluruh project
npx tsc

# mode watch, auto re-compile saat file berubah
npx tsc --watch

untuk project modern, biasanya TypeScript dipakai lewat bundler seperti Vite, esbuild, swc, atau webpack. di Vite, kalian cukup tulis kode .ts dan import biasa, Vite yang urus kompilasi di belakang layar. untuk production build, TypeScript di-type-check saja, lalu di-transpile pakai esbuild yang jauh lebih cepat.

JavaScript tidak perlu langkah tambahan, simpan app.js lalu node app.js atau buka di browser langsung jalan. makanya untuk coba ide cepat atau prototipe kecil, JavaScript lebih sat-set.

Perbandingan alur kerja

untuk aplikasi kecil dan skrip, satu langkah kompilasi terasa berlebihan. untuk aplikasi yang akan dipake ribuan user dan dipelihara bertahun-tahun, satu langkah ini sangat berharga.

4. Fitur Modern dan Interface

TypeScript sering dapat fitur baru lebih dulu, dan yang paling kepakai adalah interface dan type buat jaga bentuk data.

Interface: kontrak untuk object

interface User {
    id: number;
    nama: string;
    email?: string; // opsional, boleh tidak ada
    readonly dibuatPada: Date; // tidak bisa diubah setelah di-set
}

function sapa(user: User) {
    return `Halo ${user.nama}`;
}

sapa({ id: 1, nama: "Andi" }); // ok
sapa({ id: "1", nama: "Andi" }); // error, id harus number
sapa({ nama: "Andi" }); // error, id wajib ada

di JavaScript, fungsi sapa di atas tidak akan protes walau id dikasih string, error baru muncul pas dipakai, kadang di production. dengan interface, bentuk object didefinisikan sekali, lalu semua fungsi yang menerima object itu otomatis punya cek tipe gratis.

Type alias: alias untuk tipe apa pun

type Status = "aktif" | "nonaktif" | "ditangguhkan";
type ID = number | string;

function setStatus(id: ID, status: Status) {
  // implementasi
}

setStatus(1, "aktif");         // ok
setStatus("u-1", "nonaktif");  // ok
setStatus(1, "hilang");        // error, bukan Status

type lebih fleksibel karena bisa untuk union, intersection, tuple, dan alias untuk tipe primitif. interface lebih cocok untuk bentuk object yang akan di-extend.

Kapan pilih interface, kapan pilih type?

praktiknya:

• pakai interface saat bentuk object dan akan di-extend atau di-implement oleh class
• pakai type untuk union, intersection, tuple, atau alias sederhana

keduanya tidak salah, konsisten dalam satu project lebih penting daripada pilih yang “benar”.

Fitur ES modern yang bisa dipakai lebih awal

TypeScript bisa men-transpile ke versi JavaScript lama. artinya kalian bisa pakai fitur terbaru seperti optional chaining, nullish coalescing, atau top-level await, lalu di-compile ke ES2017 untuk support browser lama.

const nama = user?.profile?.nama ?? "Anonim";

secara default, JavaScript cuma bisa pakai fitur sesuai browser target. kalau harus support browser jadul, kalian perlu Babel atau polyfill terpisah.

5. Generics: tipe yang bisa dipakai ulang

saat bikin fungsi yang menerima banyak tipe data tapi logikanya sama, generics sangat membantu. tanpa generics, kita sering pakai any dan kehilangan keamanan tipe.

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

const a = pertama([1, 2, 3]);         // a: number | undefined
const b = pertama(["a", "b", "c"]);    // b: string | undefined
const c = pertama([]);                  // c: undefined

TypeScript otomatis nebak tipe berdasarkan argumen, lalu propagasikan ke hasil. hasilnya tetap aman tanpa harus nulis tipe manual.

6. Union dan Narrowing

sering kita dapat data yang tipenya bisa多种, misal string | number | null. di sinilah type narrowing berperan: TypeScript menyempitkan tipe berdasarkan pengecekan di kode.

function cetakNilai(nilai: string | number) {
  if (typeof nilai === "string") {
    // di sini nilai otomatis string
    return nilai.toUpperCase();
  }
  // di sini nilai otomatis number
  return nilai.toFixed(2);
}

type User = { kind: "user"; nama: string };
type Admin = { kind: "admin"; level: number };
type Akun = User | Admin;

function sapa(akun: Akun) {
  if (akun.kind === "admin") {
    return `Admin level ${akun.level}`;
  }
  return `Halo ${akun.nama}`;
}

pattern ini disebut discriminated union, sangat umum di TypeScript modern, dan membuat kode jadi self-documenting.

7. Enum vs Union Literal

TypeScript punya enum untuk nilai tetap, tapi sekarang komunitas lebih sering pakai union literal karena lebih ringan dan tree-shake friendly.

// enum (banyak dipakai di TS lama)
enum Warna {
  Merah,
  Hijau,
  Biru
}

// union literal (cara modern)
type Warna = "merah" | "hijau" | "biru";

function cat(warna: Warna) {
  // implementasi
}

type Warna di atas tidak menambah runtime overhead, karena saat di-compile, union literal hilang total. enum menambahkan objek di runtime, kecuali pakai const enum.

8. Null Safety: mungkin tipe paling sering救命的

secara default, JavaScript memperbolehkan null dan undefined di mana saja, dan itu sumber bug klasik. di TypeScript dengan strictNullChecks aktif, nullability harus ditulis eksplisit.

function cariUser(id: number): User | null {
  // bisa null kalau tidak ketemu
}

const user = cariUser(1);
console.log(user.nama);          // error, user bisa null
console.log(user?.nama);         // ok, optional chaining
console.log(user!.nama);         // ok, non-null assertion (hati-hati)

opsional chaining ?. dan nullish coalescing ?? jadi alat penting untuk handle null dengan aman.

9. File .d.ts dan Type Declaration

library JavaScript murni biasanya tidak punya info tipe. supaya TypeScript tetap bisa cek tipe library itu, komunitas bikin paket @types/nama-library di DefinitelyTyped.

npm install lodash
npm install -D @types/lodash

setelah @types/lodash terpasang, import _ from "lodash" dapat IntelliSense penuh di editor.

kalau library yang kalian pakai tidak punya @types, kalian bisa bikin file .d.ts sendiri untuk deklarasi tipe modulnya:

// types/library-tanpa-tipe.d.ts
declare module "nama-library-tanpa-tipe" {
  export function halo(nama: string): string;
  export const versi: string;
}

cara ini sering dipakai saat bridging library lawas ke project TypeScript.

10. Type Assertion dan Any: pisau bermata dua

as dan any berguna, tapi kalau dipakai berlebihan malah menghilangkan manfaat TypeScript.

const input = document.getElementById("nama") as HTMLInputElement;
const data = input.value; // aman

const apaAja: any = "string";
apaAja.halo(); // tidak error, tapi bisa crash saat runtime

aturan praktis:

• hindari any di kode produksi, ganti unknown kalau tipe belum jelas
• pakai as hanya saat kalian benar-benar yakin tentang tipenya (misal setelah null check)
• aktifkan noImplicitAny di tsconfig supaya TypeScript protes saat ada any implisit

11. Tooling yang Bikin Betah

jika sudah selesai ketik user. di VS Code, maka TypeScript langsung kasih saran id, nama, email plus cek tipe. di JavaScript saran tetap ada tapi tidak seakurat TypeScript, apalagi kalau object-nya dibentuk di file lain.

saya sendiri ngerasain bedanya pas refactor, ganti nama nama jadi fullName di TypeScript, semua file yang pakai langsung merah dan bisa di-fix satu per satu. di JavaScript, harus cari manual pakai Ctrl+F dan harap tidak kelewat.

fitur tooling lain yang kerasa banget:

• Go to definition: klik kanan fungsi, langsung loncat ke deklarasi
• Find all references: lihat semua tempat fungsi itu dipakai
• Rename symbol: ganti nama di satu tempat, semua referensi terupdate
• Inline error: kesalahan tampil langsung di editor, tidak perlu buka terminal
• Refactor otomatis: extract function, extract variable, dan lain-lain jadi aman

Dukungan editor

12. Ekosistem dan Popularitas 2026

menurut data GitHub dan survey StackOverflow 2024-2025, TypeScript konsisten masuk 5 besar bahasa paling dicintai developer. adopsi di industri besar seperti Microsoft, Google (Angular), Slack, Airbnb, dan banyak startup teknologi sudah default ke TypeScript untuk project baru.

alasan utamanya bukan karena JavaScript buruk, tapi karena skala project modern butuh type safety dan refactor confidence yang lebih tinggi.

tren 2025-2026 yang perlu kalian tahu:

• TypeScript 5.x membawa decorator standar ECMAScript, const type parameter, dan performa compiler lebih cepat
• Bun dan Deno mendukung TypeScript secara native tanpa langkah kompilasi manual
• Node.js 22+ sudah bisa jalanin file .ts langsung pakai flag --experimental-strip-types (berguna untuk tooling, bukan untuk produksi)
• tsc –noEmit jadi standar CI: type-check saja tanpa output file, karena bundler modern (Vite, esbuild) yang urus transpile
• Isolated Declarations di TS 5.5: deklarasi .d.ts bisa di-generate cepat, mempercepat publish library

13. Performance: Runtime Sama, Build Beda

TypeScript tidak lebih lambat dari JavaScript saat dijalankan, karena yang dijalankan adalah JavaScript hasil kompilasi. yang berbeda cuma waktu build di awal.

untuk project kecil di bawah 50 file, build TypeScript biasanya di bawah 5 detik. project menengah 200-500 file sekitar 10-20 detik, project besar ribuan file bisa sampai beberapa menit, tapi itu bisa di-skip dengan mode --watch dan incremental build di tsconfig.json.

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./node_modules/.cache/tsbuildinfo"
  }
}

14. Kelebihan dan Kekurangan Masing-Masing

JavaScript

kelebihan:

• setup nol, langsung jalan di browser atau Node
• kurva belajar landai untuk pemula
• ekosistim library paling besar di dunia
• tidak butuh langkah build

kekurangan:

• bug tipe baru ketahuan saat runtime
• refactor di project besar menegangkan
• IntelliSense kurang akurat untuk object yang kompleks
• dokumentasi tipe harus ditulis manual di JSDoc

TypeScript

kelebihan:

• error ketahuan di editor, bukan di production
• refactor aman, rename variable update semua referensi
• IntelliSense lengkap, autocomplete akurat
• self-documenting: tipe = dokumentasi
• ekosistem @types sudah sangat luas

kekurangan:

• ada overhead setup dan build
• kurva belajar lebih tinggi untuk pemula
• beberapa library JavaScript belum punya deklarasi tipe
• waktu build sedikit lebih lama

15. Kapan Pilih Mana? (Menurut Saya)

• pilih JavaScript kalau kalian bikin skrip kecil 1-3 file, prototipe cepat, atau lagi belajar dasar let/const dan array. tidak perlu tambah tsconfig dulu, fokus ke logika.
• pilih TypeScript kalau project sudah di atas 5 file, kerja bareng tim, atau butuh refactor aman. begitu interface dan type dipakai, bug yang biasanya muncul di production jadi ketahuan di laptop kalian.
• pilih hybrid kalau project sudah jalan dan tidak bisa rewrite sekaligus: nyalakan allowJs di tsconfig, tambah tipe bertahap, mulai dari file yang paling sering error.

saya pribadi pakai JavaScript untuk skrip iseng dan TypeScript untuk dashboard yang dipakai harian. begitu paham JavaScript dulu, pindah ke TypeScript cuma nambah kebiasaan nulis tipe, bukan ganti pola pikir.

16. Migrasi Pelan: JavaScript ke TypeScript

jangan khawatir harus rewrite semua. ubah pelan-pelan:

1. ganti app.js jadi app.ts, jalankan npx tsc --init, set allowJs: true di tsconfig.json biar file JS lama tetap jalan.
2. ubah satu file paling sering error jadi strict dulu, tambah interface untuk data User dan Produk.
3. nyalakan strict: true bertahap, perbaiki error satu per satu. sering error implicit any bisa di-cast ke unknown dulu, lalu diperbaiki.
4. nyalakan noImplicitAny setelah semua any hilang, lalu strictNullChecks.
5. terakhir, pakai noUncheckedIndexedAccess untuk akses array yang lebih aman.

dengan cara ini, project tetap jalan sambil migrasi, tidak perlu cuti seminggu buat rewrite.

17. Sumber Belajar Lanjutan

setelah paham perbedaan, langkah berikutnya tinggal pilih jalur. saya tuliskan urutannya:

• JavaScript dulu: pahami variabel, fungsi, array, object, promise, async/await
• TypeScript berikutnya: tipe primitif, interface, type alias, generics, narrowing
• Lanjut ke framework: React dengan TypeScript, Next.js, atau Hono untuk backend

versi spesifik yang saya rekomendasikan:

• Node.js: versi LTS 20 atau 22, sudah dukung fitur modern
• TypeScript: versi 5.4 ke atas, banyak peningkatan inference
• Editor: VS Code + extension ESLint + Prettier, plus Error Lens agar error tipe langsung kelihatan

Kesimpulan

JavaScript unggul di kesederhanaan dan kecepatan coba, TypeScript unggul di keamanan tipe dan tooling untuk project besar. tidak ada yang paling benar untuk semua, yang ada yang paling cocok untuk ukuran project kalian sekarang.

kalau baru mulai, mulai JavaScript dulu. begitu butuh tipe yang ketat dan refactor aman, kalian sudah punya alasan kuat buat pindah ke TypeScript.

Baca Juga Mengenai :

• perbedaan var let const javascript