TYPESCRIPT VS JAVASCRIPT, PILIH YANG MANA?

TypeScript dan JavaScript adalah dua bahasa pemrograman yang sangat populer dalam pengembangan web. Meskipun keduanya sering digunakan secara bersamaan, mereka memiliki perbedaan mendasar yang membuat masing-masing unik.

Memahami perbedaan ini dapat membantu pengembang memilih bahasa yang paling sesuai untuk kebutuhan proyek mereka. Jadi pada artikel kali ini, aku akan memberikan penjelasan perbedaan antara TypeScript dan JavaScript, keunggulan masing-masing, serta memberikan studi kasus sederhana untuk membandingkan penggunaannya. Penasaran? Jadi langsung saja kita menuju pembahasan TypeScript vs JavaScript!

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang pertama kali dikembangkan oleh Brendan Eich pada tahun 1995. Bahasa ini awalnya dirancang untuk menambah interaktivitas pada halaman web, namun kini telah berkembang menjadi bahasa yang digunakan di berbagai environment, baik di sisi client (browser), mobile development, maupun di sisi server (Node.js).

JavaScript memainkan peran penting dalam pengembangan web modern. Memiliki dukungan luas dari berbagai browser dan komunitas yang besar, JavaScript menjadi bahasa yang fleksibel dan dinamis. Beberapa fitur utama JavaScript meliputi:

1. Interaktifitas: Memungkinkan pengembang untuk membuat elemen web yang dinamis seperti formulir dengan validasi otomatis, animasi, dan pemutakhiran konten tanpa perlu memuat ulang halaman.
2. Ekosistem Luas: Dengan ribuan library dan framework seperti React, Angular, dan Vue.js, JavaScript memberikan solusi untuk berbagai kebutuhan pengembangan web.
3. Event-Driven: JavaScript sangat cocok untuk menangani peristiwa pengguna seperti klik, hover, dan input.

Apa itu TypeScript?

TypeScript adalah bahasa pemrograman free dan open-source yang dikembangkan oleh Microsoft. Diperkenalkan pada tahun 2012, TypeScript adalah superset dari JavaScript yang menambahkan tipe statis opsional ke dalam bahasa. Hal ini menunjukan bahwa semua kode JavaScript valid adalah juga kode TypeScript yang valid, tetapi TypeScript menambahkan kemampuan untuk menentukan jenis variabel, fungsi, dan properti objek.

Tujuan utama TypeScript adalah untuk meningkatkan produktivitas developer dan kualitas kode dengan menyediakan fitur-fitur seperti:

1. Static Type: Dengan adanya static type, TypeScript dapat mendeteksi kesalahan sebelum kode dijalankan, sehingga mengurangi kemungkinan adanya bug dan meningkatkan kualitas kode.
2. Kompatibilitas JavaScript: Karena TypeScript adalah superset dari JavaScript, pengembang dapat mengadopsi TypeScript secara bertahap di proyek JavaScript yang existing.
3. Pengembangan Berbasis Objek: TypeScript mendukung fitur pengembangan berbasis objek yang lebih kuat dibandingkan JavaScript, seperti interface, class, dan inheritance.

Perbandingan TypeScript vs JavaScript

Sintaks dan Fitur

1. Static vs Dynamic Type:

   • JavaScript menggunakan dynamic type, di mana tipe variabel dapat berubah pada runtime. Ini membuatnya fleksibel tetapi juga rentan terhadap kesalahan type yang sulit dideteksi.

    // JavaScript: Dynamic typing, tanpa compile-time type checking
   
    function add(a, b) {
        return a + b;
    }
   
    console.log(add(5, 10));     // Output: 15
    console.log(add("5", 10));   // Output: 510 (string concatenation, behavior tidak terduga)
   
    // JavaScript memperbolehkan untuk meneruskan parameter dengan type apapun ke sebuah fungsi

   • TypeScript menggunakan static type opsional yang memeriksa tipe pada compile time. Hal ini dapat membantu mendeteksi kesalahan lebih awal dan membuat kode lebih dapat diprediksi.

    // TypeScript: Static typing, dengan compile-time type checking
   
    function add(a: number, b: number): number {
        return a + b;
    }
   
    console.log(add(5, 10));     // Output: 15
    console.log(add("5", 10));  // Error: Argument of type 'string' is not assignable to parameter of type 'number'
   
    // TypeScript memastikan bahwa semua type parameter yang diteruskan ke fungsi harus sama

2. Class dan Inheritance:

   • JavaScript mendukung class dan inheritance sejak ES6, tetapi implementasinya tidak sekuat bahasa berbasis objek murni.
   • TypeScript menambahkan fitur berbasis objek yang lebih kuat seperti interface dan generic, memungkinkan desain sistem yang lebih kompleks dan terstruktur.

3. Pengembangan dan Debugging:

   • JavaScript, meskipun lebih sulit untuk debugging, tetapi secara pengembangan lebih fleksibel karena tidak se-ketat TypeScript.
   • TypeScript lebih mudah untuk debugging karena kode yang ditulis memiliki type yang memberikan kita gambaran mengenai tipe data apa yang kira-kira akan diterima, tetapi secara pengembangan akan lebih strict.

Penggunaan

1. Skala Proyek:

   • JavaScript lebih cocok untuk proyek kecil hingga menengah di mana kecepatan pengembangan dan fleksibilitas adalah prioritas. Dalam proyek skala kecil, penggunaan static typing terasa overkill dengan tambahan kompleksitas yang dibawa oleh TypeScript.
   • TypeScript sangat cocok untuk proyek menengah hingga besar yang membutuhkan pemeliharaan jangka panjang. Dalam proyek skala menengah hingga besar, struktur yang ketat dan kemampuan untuk mendeteksi kesalahan lebih awal dapat membantu mengurangi biaya pemeliharaan dan risiko kesalahan, yang menjadikannya pilihan yang lebih baik dalam jangka panjang.

2. Ekosistem dan Library:

   • JavaScript memiliki ekosistem library yang sangat luas dan matang.
   • TypeScript mendukung sebagian besar library JavaScript melalui definisi type, tetapi mungkin memerlukan penyesuaian tambahan.

Studi Kasus: Proyek API Sederhana dengan TypeScript dan JavaScript

Mari kita membuat sebuah proyek sederhana yaitu API CRUD (Create, Read, Update, Delete) untuk manajemen kontak, menggunakan kedua bahasa pemrograman yang telah dijelaskan di atas.

JavaScript

1. Instalasi:

   • Buat direktori proyek dan inisialisasi dengan npm init -y.
   • Instal Express dengan npm install express.
   • Buat folder src dan buat file index.js di dalamnya.

2. Struktur Proyek:

   ├── src
   │   └── index.js
   └── package.json

3. Kode:

   const express = require('express');
   const app = express();
   const port = 3000;
   
   app.use(express.json());
   
   let contacts = [];
   
   app.post('/contacts', (req, res) => {
     const contact = req.body;
     contacts.push(contact);
     res.status(201).send(contact);
   });
   
   app.get('/contacts', (req, res) => {
     res.send(contacts);
   });
   
   app.put('/contacts/:id', (req, res) => {
     const id = req.params.id;
     const updatedContact = req.body;
     contacts = contacts.map(contact => contact.id === id ? updatedContact : contact);
     res.send(updatedContact);
   });
   
   app.delete('/contacts/:id', (req, res) => {
     const id = req.params.id;
     contacts = contacts.filter(contact => contact.id !== id);
     res.status(204).send();
   });
   
   app.listen(port, () => {
     console.log(`Server running at http://localhost:${port}/`);
   });

4. Menjalankan Kode

   • Jalankan kode diatas dengan perintah node index.js

TypeScript

1. Instalasi:

   • Buat direktori proyek dan inisialisasi dengan npm init -y.
   • Instal TypeScript dan Express dengan npm install express typescript @types/node @types/express.
   • Install ts-node secara global dengan perintah npm install -g ts-node
   • Inisialisasi TypeScript dengan npx tsc --init.
   • Buat folder src dan buat file index.ts di dalamnya.

2. Struktur Proyek:

   ├── src
   │   └── index.ts
   ├── tsconfig.json
   └── package.json

3. Kode:

   import express, { Request, Response } from 'express';
   const app = express();
   const port = 3000;
   
   app.use(express.json());
   
   interface Contact {
     id: string;
     name: string;
     email: string;
   }
   
   let contacts: Contact[] = [];
   
   app.post('/contacts', (req: Request, res: Response) => {
     const contact: Contact = req.body;
     contacts.push(contact);
     res.status(201).send(contact);
   });
   
   app.get('/contacts', (req: Request, res: Response) => {
     res.send(contacts);
   });
   
   app.put('/contacts/:id', (req: Request, res: Response) => {
     const id = req.params.id;
     const updatedContact: Contact = req.body;
     contacts = contacts.map(contact => contact.id === id ? updatedContact : contact);
     res.send(updatedContact);
   });
   
   app.delete('/contacts/:id', (req: Request, res: Response) => {
     const id = req.params.id;
     contacts = contacts.filter(contact => contact.id !== id);
     res.status(204).send();
   });
   
   app.listen(port, () => {
     console.log(`Server running at http://localhost:${port}/`);
   });

4. Menjalankan Kode

   • Jalankan kode diatas dengan perintah ts-node src/index.ts

Penutup

Memilih antara TypeScript dan JavaScript tergantung pada kebutuhan dan skala proyek kalian. JavaScript adalah pilihan yang baik untuk proyek kecil hingga menengah yang membutuhkan pengembangan cepat dan fleksibilitas.

TypeScript, di sisi lain, menawarkan keuntungan static type dan pengembangan yang lebih kuat, membuatnya lebih cocok untuk proyek menegah hingga besar dan jangka panjang yang memerlukan struktur dan pemeliharaan yang ketat. Terimakasih sudah membaca dan semoga bermanfaat!