TypeScript vs JavaScript: Perbedaan Utama dan Contohnya

TypeScript adalah JavaScript yang ditambah sistem tipe statis di atasnya. Setiap program JavaScript adalah sintaks TypeScript yang valid; TypeScript menambahkan anotasi tipe, compiler yang memeriksanya sebelum kode dijalankan, dan langkah build yang menghapusnya lagi. Saat runtime yang ada hanya JavaScript, jadi perbedaannya sepenuhnya ada pada apa yang kamu ketahui sebelum kode dirilis.

type Product = { name: string; price: number };

function total(products: Product[]): number {
    return products.reduce((sum, p) => sum + p.price, 0);
}

const cart: Product[] = [
    { name: "Keyboard", price: 49 },
    { name: "Mouse", price: 25 },
];

console.log(total(cart)); // 74

Di JavaScript, fungsi yang sama adalah kode ini tanpa type Product = ..., : Product[] dan : number. Tipe menambahkan informasi untuk compiler dan editor; tipe tidak mengubah apa yang dilakukan program.

Sekilas TypeScript vs JavaScript

Kode yang Sama di Kedua Bahasa

Ini sebuah fungsi di JavaScript. Tidak ada yang menyatakan seperti apa bentuk user seharusnya:

function greeting(user) {
    return `Hello, ${user.firstName} ${user.lastName}`;
}

greeting({ firstname: "Ada", lastName: "Lovelace" });
// "Hello, undefined Lovelace", no error anywhere

Versi TypeScript menyatakan bentuknya sekali, dan salah ketiknya dilaporkan sebelum kode dijalankan:

interface User {
    firstName: string;
    lastName: string;
}

function greeting(user: User): string {
    return `Hello, ${user.firstName} ${user.lastName}`;
}

greeting({ firstname: "Ada", lastName: "Lovelace" });
// error TS2561: Object literal may only specify known properties,
// but 'firstname' does not exist in type 'User'. Did you mean to write 'firstName'?

Anotasi itulah satu-satunya perbedaan dalam sintaks. TypeScript juga menambahkan beberapa deklarasinya sendiri (interface, type, enum, generic seperti Array<string>, access modifier seperti private), tetapi pernyataan, operator, dan object bawaannya adalah milik JavaScript.

Apa yang Ditangkap TypeScript tapi Tidak oleh JavaScript

JavaScript mengonversi tipe diam-diam. Bug ini sering terjadi pada nilai dari field form, yang selalu berupa string. Jalankan untuk melihat apa kata compiler:

// This does not compile: strings where numbers are expected.
function sum(values: number[]): number {
    return values.reduce((a, b) => a + b, 0);
}

const fromForm = ["10", "20", "5"];
console.log(sum(fromForm));

index.ts(7,17): error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'number[]'.
  Type 'string' is not assignable to type 'number'.

Di JavaScript kode ini berjalan dan mencetak 010205, karena 0 + "10" adalah penggabungan string. TypeScript menolak melakukan kompilasi sampai string itu dikonversi, misalnya dengan fromForm.map(Number).

Kategori besar lainnya adalah nilai yang mungkin tidak ada. Array.prototype.find mengembalikan undefined ketika tidak ada yang cocok, dan TypeScript membuatmu menangani kasus itu:

// This does not compile: find() can return undefined.
const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Grace" },
];

const user = users.find((u) => u.id === 3);
console.log(user.name.toUpperCase());

index.ts(8,13): error TS18048: 'user' is possibly 'undefined'.

Versi JavaScript biasa crash saat runtime dengan TypeError: Cannot read properties of undefined (reading 'name'). Perbaikan di TypeScript adalah menangani kasus yang ditunjuk compiler:

const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Grace" },
];

for (const id of [2, 3]) {
    const user = users.find((u) => u.id === id);
    if (user) {
        console.log(user.name.toUpperCase()); // user is narrowed to the object type here
    } else {
        console.log(`no user with id ${id}`);
    }
}

Output:

GRACE
no user with id 3

Yang tidak ditangkap TypeScript: kesalahan logika (rumus yang salah tetap punya tipe yang benar), dan apa pun tentang data yang masuk ke program saat runtime. Response API yang diberi tipe User hanya sebenar server yang mengirimnya, karena tipe sudah hilang begitu kode berjalan. Periksa data seperti itu dengan kode runtime.

Memakai Library JavaScript di TypeScript

Setiap package npm bisa dipakai dari TypeScript, karena output-nya memang JavaScript. Tipe untuk sebuah package datang dari salah satu dari tiga tempat:

• Package itu menyertakan file .d.ts sendiri. Sebagian besar package yang aktif dikelola melakukannya, dan kamu tidak perlu memasang apa pun lagi.
• Package @types terpisah dari proyek komunitas DefinitelyTyped: npm install --save-dev @types/lodash menambahkan tipe untuk lodash.
• Tidak ada di mana pun. Dalam kasus ini, dengan strict aktif, import-nya sendiri menjadi error:

error TS7016: Could not find a declaration file for module 'lodash'. '/project/node_modules/lodash/lodash.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`

Perbaikannya adalah memasang package @types kalau ada, atau menjelaskan module itu sendiri di file .d.ts; halaman declaration files menunjukkan caranya.

Langkah Build

Browser dan Node.js tidak memeriksa tipe, jadi TypeScript butuh satu langkah di antara kode sumbermu dan kode yang dijalankan. Ada tiga pengaturan yang umum:

• tsc mengompilasi semuanya. Ia memeriksa tipe dan menulis file .js, biasanya ke folder dist. Sederhana, dan menjadi standar untuk library.
• Bundler atau dev server menghapus tipe, dan tsc --noEmit memeriksanya. Vite dan esbuild menghapus tipe tanpa memeriksanya, sehingga reload tetap cepat; editor dan satu langkah CI menjalankan pemeriksa tipe.
• Runtime yang menghapus tipe. Node.js versi terbaru, Deno, dan Bun menjalankan file .ts secara langsung. Tidak ada satu pun yang memeriksa tipe saat berjalan, jadi tsc --noEmit (atau deno check) tetap menjadi cara menemukan error tipe.

JavaScript tidak butuh semua ini, dan itulah keunggulan praktisnya yang paling besar untuk script kecil. Biaya langkah TypeScript sebagian besar ada di pengaturan, yaitu tsconfig.json dan dev dependency typescript, serta waktu kompilasi; compiler native TypeScript 7 memangkas waktu itu sekitar sepuluh kali pada proyek besar.

Tingkat Kesulitan Belajar

Semua yang kamu tahu tentang JavaScript tetap berlaku, karena runtime TypeScript adalah JavaScript. Materi barunya adalah sistem tipe, dan materi itu datang berlapis-lapis:

1. Anotasi pada variabel, parameter, dan nilai kembalian (: string, : number[]).
2. Object type dengan interface dan type, property opsional, union seperti string | number.
3. Narrowing: memeriksa nilai dengan typeof, in atau === supaya compiler tahu kasus mana yang sedang kamu tangani.
4. Generic, utility type seperti Partial<T> dan Pick<T, K>, dan tipe lanjutan untuk pembuat library.

Dua lapisan pertama sudah mencakup sebagian besar kode aplikasi. Banyak tipe yang disimpulkan sendiri, jadi banyak kode TypeScript terlihat seperti JavaScript dengan anotasi hanya di signature fungsi.

Kapan Memilih TypeScript atau JavaScript

Apakah TypeScript lebih baik daripada JavaScript? Untuk kode yang dikelola beberapa orang atau dipakai bertahun-tahun, biasanya ya, dan industri sudah bergerak ke arah itu: berdasarkan hitungan kontributor bulanan GitHub, TypeScript menyalip JavaScript dan Python pada Agustus 2025 dan menjadi bahasa yang paling banyak dipakai di GitHub. Untuk script kecil, JavaScript biasa sering kali menjadi alat yang lebih tepat.

Pilih TypeScript ketika:

• Lebih dari satu orang mengerjakan kodenya, atau kode itu akan dikelola selama berbulan-bulan atau bertahun-tahun.
• Codebase-nya cukup besar sehingga kamu tidak bisa mengingat signature setiap fungsi.
• Kamu sering melakukan refactoring: mengganti nama property akan memperbarui setiap pemakaiannya, dan compiler menampilkan apa pun yang terlewat.
• Kamu menerbitkan library: file .d.ts memberi penggunanya autocompletion dan pemeriksaan.
• Framework-nya mengharapkan TypeScript. Aplikasi Angular ditulis dengan TypeScript, Next.js dan Astro membuat proyek baru dengan TypeScript secara default, dan template React, Vue, dan Svelte dari Vite masing-masing punya varian TypeScript.

Pilih JavaScript ketika:

• Programnya berupa script singkat, eksperimen sekali pakai, atau potongan kode di console browser.
• Kamu baru pertama kali belajar pemrograman dan ingin lebih sedikit konsep sekaligus.
• Tidak ada langkah build dan kamu tidak menginginkannya. Bahkan dalam kasus itu, // @ts-check dengan JSDoc memberimu sedikit pemeriksaan di file .js biasa.

Migrasi Proyek JavaScript ke TypeScript

Migrasi tidak harus dilakukan sekaligus. Compiler menerima JavaScript berdampingan dengan TypeScript:

{
    "compilerOptions": {
        "allowJs": true,
        "checkJs": false,
        "outDir": "dist",
        "rootDir": "src"
    },
    "include": ["src"]
}

Dengan allowJs, file .js ikut dikompilasi dan bisa meng-import dari file .ts, begitu juga sebaliknya. Lalu konversi secara bertahap:

1. Ganti nama satu file dari .js menjadi .ts dan perbaiki error yang dilaporkan compiler di dalamnya.
2. Mulai dari bagian ujung (module utilitas dengan sedikit import), lalu bergerak ke dalam.
3. Aktifkan checkJs, atau tambahkan // @ts-check di bagian atas file .js tertentu, untuk memeriksa tipe file yang belum kamu ganti namanya.

Di file JavaScript yang diperiksa, komentar JSDoc menyediakan tipenya:

// @ts-check

/**
 * @param {number} price
 * @param {number} qty
 * @returns {number}
 */
function lineTotal(price, qty) {
    return price * qty;
}

lineTotal("3", 2);
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Sebagian tim berhenti di sana: file JavaScript dengan tipe JSDoc, diperiksa oleh tsc, dan tanpa langkah build untuk kodenya sendiri. Tim lain melanjutkan sampai semuanya menjadi .ts. Kalau kamu mengaktifkan strict di proyek yang sudah ada, bersiaplah melihat banyak error di awal; halaman strict mode menjelaskan apa yang diperiksa setiap flag supaya kamu bisa mengaktifkannya satu per satu.