Wednesday

18-06-2025 Vol 19

๐Ÿš€ Getting Started with TypeScript in Deno

๐Ÿš€ Memulai TypeScript di Deno: Panduan Lengkap untuk Pemula

TypeScript dan Deno adalah kombinasi yang sangat kuat untuk pengembangan JavaScript modern. TypeScript menambahkan keamanan tipe statis ke JavaScript, membantu Anda menulis kode yang lebih mudah dipelihara dan bebas bug. Deno, sebaliknya, adalah runtime JavaScript, TypeScript, dan WebAssembly yang aman secara default, dirancang untuk mengatasi beberapa kelemahan Node.js. Dalam panduan ini, kita akan menjelajahi bagaimana cara memulai TypeScript di Deno, langkah demi langkah.

Daftar Isi

  1. Pendahuluan: Mengapa TypeScript dan Deno?
  2. Prasyarat: Memastikan Anda Siap
  3. Menginstal Deno: Panduan Langkah demi Langkah
  4. Konfigurasi Lingkungan: Menyiapkan Editor dan Alat
  5. Proyek TypeScript Deno Pertama Anda: “Halo, Deno!”
  6. Memahami Konfigurasi TypeScript dengan Deno (tsconfig.json)
  7. Modul dan Impor: Cara Mengatur Kode Anda
  8. Menggunakan Modul Pihak Ketiga: Impor dari URL
  9. Penanganan Error di Deno dengan TypeScript
  10. Pengujian Kode TypeScript Deno Anda
  11. Debugging Aplikasi TypeScript Deno
  12. Praktik Terbaik untuk Pengembangan TypeScript Deno
  13. Studi Kasus: Membangun API Sederhana dengan Deno dan TypeScript
  14. Kesimpulan: Masa Depan Pengembangan TypeScript dengan Deno
  15. Sumber Daya Tambahan: Memperdalam Pengetahuan Anda

1. Pendahuluan: Mengapa TypeScript dan Deno?

Sebelum kita masuk ke detail teknis, mari kita pahami mengapa TypeScript dan Deno adalah pilihan yang baik untuk pengembangan modern:

  • TypeScript: Memberikan keamanan tipe statis, refactoring yang lebih mudah, dan dukungan IDE yang lebih baik. Ini membantu Anda menangkap kesalahan lebih awal dalam proses pengembangan.
  • Deno: Menawarkan keamanan bawaan (izin eksplisit untuk akses file, jaringan, dan lingkungan), dukungan TypeScript out-of-the-box, dan sistem modul modern berdasarkan URL. Deno bertujuan untuk menjadi lebih aman dan produktif daripada Node.js.

Kombinasi ini menghasilkan pengalaman pengembangan yang lebih aman, lebih efisien, dan lebih mudah dipelihara.

2. Prasyarat: Memastikan Anda Siap

Sebelum Anda mulai, pastikan Anda memiliki:

  • Pemahaman Dasar JavaScript: Pengetahuan tentang sintaksis JavaScript, variabel, fungsi, dan konsep dasar lainnya sangat penting.
  • Pemahaman Dasar TypeScript (Disarankan): Meskipun tidak wajib, familiarity dengan tipe data, interface, dan kelas akan membantu.
  • Editor Kode: Editor kode seperti Visual Studio Code (VS Code) sangat direkomendasikan karena dukungan TypeScript dan Deno yang sangat baik.
  • Terminal: Akses ke terminal atau command prompt untuk menjalankan perintah Deno.

3. Menginstal Deno: Panduan Langkah demi Langkah

Instalasi Deno cukup mudah. Ikuti langkah-langkah di bawah ini berdasarkan sistem operasi Anda:

Linux/macOS:

  1. Buka terminal Anda.
  2. Jalankan perintah berikut:
    curl -fsSL https://deno.land/install.sh | sh
  3. Skrip akan mengunduh dan menginstal Deno. Anda mungkin perlu menambahkan direktori Deno ke PATH Anda. Skrip akan memberi tahu Anda langkah-langkah yang diperlukan. Biasanya ini melibatkan menambahkan baris seperti ini ke file .bashrc atau .zshrc Anda:
    export DENO_INSTALL="/home/yourusername/.deno"
    export PATH="$DENO_INSTALL/bin:$PATH"

    Ganti /home/yourusername/.deno dengan jalur yang sesuai jika berbeda.

  4. Restart terminal Anda atau source file konfigurasi Anda (misalnya, source ~/.bashrc atau source ~/.zshrc) untuk memperbarui PATH Anda.
  5. Verifikasi instalasi dengan menjalankan:
    deno --version

    Ini akan menampilkan versi Deno yang terinstal.

Windows:

  1. Buka PowerShell sebagai administrator.
  2. Jalankan perintah berikut:
    iwr https://deno.land/install.ps1 -useb | iex
  3. Skrip akan mengunduh dan menginstal Deno. Secara default, Deno diinstal di direktori %USERPROFILE%\.deno\bin. Skrip akan mencoba menambahkan direktori ini ke PATH Anda, tetapi Anda mungkin perlu melakukannya secara manual.
  4. Tutup dan buka kembali PowerShell Anda (sebagai administrator) untuk memperbarui PATH Anda. Jika tidak, Anda mungkin perlu melakukannya secara manual melalui System Properties -> Environment Variables.
  5. Verifikasi instalasi dengan menjalankan:
    deno --version

    Ini akan menampilkan versi Deno yang terinstal.

4. Konfigurasi Lingkungan: Menyiapkan Editor dan Alat

Visual Studio Code (VS Code) adalah pilihan yang sangat baik untuk pengembangan Deno dan TypeScript karena memiliki dukungan yang sangat baik. Ikuti langkah-langkah ini untuk mengonfigurasi VS Code:

  1. Instal Ekstensi Deno: Cari dan instal ekstensi “Deno” dari pasar ekstensi VS Code. Ekstensi ini menyediakan dukungan bahasa, linting, dan debugging untuk Deno.
  2. Konfigurasi Settings: Setelah menginstal ekstensi, tambahkan pengaturan berikut ke settings.json Anda (File -> Preferences -> Settings, lalu cari “Edit in settings.json”):
    {
      "deno.enable": true,
      "deno.lint": true,
      "deno.unstable": false, // Ubah ke `true` jika Anda ingin menggunakan API Deno yang tidak stabil.
      "editor.defaultFormatter": "denoland.vscode-deno"
    }
  3. tsconfig.json (Opsional): Meskipun tidak wajib, membuat file tsconfig.json di root proyek Anda memungkinkan Anda untuk mengontrol opsi kompilasi TypeScript dan mengaktifkan fitur seperti pemeriksaan tipe yang lebih ketat. Lihat bagian selanjutnya untuk detail lebih lanjut tentang tsconfig.json.

5. Proyek TypeScript Deno Pertama Anda: “Halo, Deno!”

Mari kita buat proyek TypeScript Deno pertama Anda:

  1. Buat Direktori Proyek: Buat direktori baru untuk proyek Anda.
    mkdir hello-deno
    cd hello-deno
  2. Buat File main.ts: Buat file bernama main.ts di direktori proyek Anda.
  3. Tambahkan Kode Berikut:
    console.log("Halo, Deno!");
  4. Jalankan Kode Anda: Buka terminal Anda, navigasikan ke direktori proyek Anda, dan jalankan perintah berikut:
    deno run main.ts

    Anda akan melihat “Halo, Deno!” dicetak ke konsol. Perhatikan bahwa karena Deno aman secara default, Anda mungkin perlu memberikan izin eksplisit jika kode Anda mencoba mengakses sistem file, jaringan, atau variabel lingkungan. Misalnya, jika Anda ingin membaca file, Anda akan menggunakan deno run --allow-read main.ts.

6. Memahami Konfigurasi TypeScript dengan Deno (tsconfig.json)

File tsconfig.json digunakan untuk mengonfigurasi opsi kompilasi TypeScript. Deno secara otomatis mendeteksi dan menggunakan file ini jika ada di direktori proyek Anda. Berikut adalah contoh file tsconfig.json yang sederhana:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["./**/*.ts"]
}

Mari kita uraikan opsi-opsi ini:

  • target: Menentukan versi ECMAScript yang akan dikompilasi oleh TypeScript. esnext menargetkan versi terbaru.
  • module: Menentukan sistem modul yang akan digunakan. esnext menggunakan modul ES.
  • moduleResolution: Menentukan bagaimana modul akan dicari. node mengikuti logika resolusi modul Node.js.
  • strict: Mengaktifkan semua opsi pemeriksaan tipe ketat. Sangat disarankan untuk memastikan kode Anda bebas bug.
  • esModuleInterop: Memungkinkan interoperabilitas yang lebih baik antara modul ES dan modul CommonJS.
  • skipLibCheck: Melewatkan pemeriksaan tipe file deklarasi (.d.ts). Ini dapat mempercepat waktu kompilasi.
  • forceConsistentCasingInFileNames: Memastikan bahwa casing nama file konsisten.
  • include: Menentukan file mana yang akan dimasukkan dalam kompilasi. ./**/*.ts mencakup semua file TypeScript dalam direktori proyek Anda.

Anda dapat menyesuaikan file tsconfig.json untuk memenuhi kebutuhan proyek Anda. Lihat dokumentasi TypeScript untuk daftar lengkap opsi kompilasi.

7. Modul dan Impor: Cara Mengatur Kode Anda

Deno menggunakan sistem modul modern berbasis URL. Ini berarti Anda dapat mengimpor modul dari file lokal atau dari URL eksternal. Mari kita lihat beberapa contoh:

Mengimpor dari File Lokal:

  1. Buat File utils.ts: Buat file bernama utils.ts di direktori proyek Anda.
  2. Tambahkan Kode Berikut:
    export function greet(name: string): string {
      return `Halo, ${name}!`;
    }
  3. Impor di main.ts: Ubah file main.ts Anda menjadi:
    import { greet } from "./utils.ts";
    
    console.log(greet("Deno"));
  4. Jalankan Kode Anda:
    deno run main.ts

    Anda akan melihat “Halo, Deno!” dicetak ke konsol.

Mengimpor dari URL:

  1. Impor di main.ts: Ubah file main.ts Anda menjadi:
    import { assertEquals } from "https://deno.land/std@0.205.0/assert/mod.ts";
    
    assertEquals(1, 1);
    console.log("Asersi berhasil!");

    Ini mengimpor modul assertEquals dari pustaka standar Deno yang dihosting di deno.land.

  2. Jalankan Kode Anda:
    deno run main.ts

    Anda mungkin perlu memberikan izin jaringan jika Anda mengimpor dari URL untuk pertama kalinya:

    deno run --allow-net main.ts

    Anda akan melihat “Asersi berhasil!” dicetak ke konsol.

Sistem modul berbasis URL Deno memungkinkan Anda untuk dengan mudah menggunakan modul pihak ketiga tanpa perlu pengelola paket seperti npm. Namun, penting untuk berhati-hati dengan dependensi eksternal dan memastikan bahwa Anda mengimpor dari sumber yang tepercaya.

8. Menggunakan Modul Pihak Ketiga: Impor dari URL

Salah satu kekuatan Deno adalah kemampuannya untuk mengimpor modul pihak ketiga langsung dari URL. Ini menghilangkan kebutuhan akan pengelola paket tradisional seperti npm dan mengurangi kompleksitas manajemen dependensi.

Berikut adalah beberapa contoh cara menggunakan modul pihak ketiga:

  • Pustaka Standar Deno: Deno dilengkapi dengan pustaka standar yang kaya yang menyediakan berbagai utilitas, seperti penanganan file, jaringan, dan kriptografi. Modul-modul ini dihosting di deno.land/std.
  • Modul Pihak Ketiga: Anda dapat mengimpor modul dari repositori pihak ketiga seperti GitHub atau dari CDN. Pastikan untuk memverifikasi kredibilitas sumber sebelum mengimpor modul.

Contoh:

import { serve } from "https://deno.land/std@0.205.0/http/server.ts";

const handler = (request: Request): Response => {
  const body = "Halo, Deno!";
  return new Response(body, { status: 200 });
};

console.log("Mendengarkan pada http://localhost:8000/");
await serve(handler, { port: 8000 });

Kode ini mengimpor fungsi serve dari pustaka standar Deno dan membuat server HTTP sederhana yang mendengarkan pada port 8000.

9. Penanganan Error di Deno dengan TypeScript

Penanganan error sangat penting untuk menulis aplikasi yang kuat dan andal. Deno mendukung mekanisme penanganan error tradisional JavaScript, seperti blok try...catch dan objek Error.

Berikut adalah beberapa praktik terbaik untuk penanganan error di Deno dengan TypeScript:

  • Gunakan Blok try...catch: Bungkus kode yang mungkin memicu error dalam blok try...catch untuk menangkap dan menangani error tersebut.
  • Lempar Error yang Bermakna: Saat Anda menemukan error, lempar objek Error dengan pesan yang deskriptif. Ini akan membantu Anda men-debug masalah dengan lebih mudah.
  • Gunakan Tipe Error yang Spesifik: Gunakan tipe error yang spesifik (misalnya, TypeError, RangeError) untuk menunjukkan jenis error yang terjadi.
  • Tangani Error Secara Asinkron: Saat bekerja dengan kode asinkron, gunakan try...catch dengan async/await atau tangani promise dengan .catch().

Contoh:

async function readFile(filename: string): Promise {
  try {
    const data = await Deno.readTextFile(filename);
    return data;
  } catch (error) {
    console.error(`Gagal membaca file ${filename}: ${error}`);
    throw new Error(`Gagal membaca file ${filename}`);
  }
}

async function main() {
  try {
    const content = await readFile("myfile.txt");
    console.log(content);
  } catch (error) {
    console.error(`Error utama: ${error}`);
  }
}

main();

Kode ini menunjukkan cara membaca file menggunakan Deno.readTextFile dan menangani error apa pun yang mungkin terjadi.

10. Pengujian Kode TypeScript Deno Anda

Pengujian sangat penting untuk memastikan bahwa kode Anda berfungsi dengan benar dan memenuhi persyaratan yang diharapkan. Deno menyediakan dukungan bawaan untuk pengujian melalui modul deno test.

Berikut adalah cara menulis dan menjalankan pengujian di Deno:

  1. Buat File Pengujian: Buat file pengujian dengan akhiran _test.ts atau .test.ts (misalnya, main_test.ts).
  2. Impor Modul assert: Impor modul assert dari pustaka standar Deno untuk menulis pernyataan pengujian.
  3. Tulis Kasus Pengujian: Gunakan fungsi Deno.test untuk mendefinisikan kasus pengujian. Setiap kasus pengujian harus berisi satu atau lebih pernyataan menggunakan fungsi assert.
  4. Jalankan Pengujian: Gunakan perintah deno test untuk menjalankan semua file pengujian di direktori proyek Anda.

Contoh:

// utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

// utils_test.ts
import { add } from "./utils.ts";
import { assertEquals } from "https://deno.land/std@0.205.0/assert/mod.ts";

Deno.test("Menambahkan 2 + 3 harus menghasilkan 5", () => {
  assertEquals(add(2, 3), 5);
});

Deno.test("Menambahkan -1 + 1 harus menghasilkan 0", () => {
  assertEquals(add(-1, 1), 0);
});

Untuk menjalankan pengujian, navigasikan ke direktori proyek Anda di terminal Anda dan jalankan perintah berikut:

deno test

Deno akan menjalankan semua file pengujian dan melaporkan hasilnya.

11. Debugging Aplikasi TypeScript Deno

Debugging sangat penting untuk mengidentifikasi dan memperbaiki kesalahan dalam kode Anda. Deno menyediakan dukungan untuk debugging menggunakan alat debugging bawaan VS Code dan Chrome DevTools.

Berikut adalah cara melakukan debugging aplikasi TypeScript Deno di VS Code:

  1. Buat Konfigurasi Debug: Buka panel Debug di VS Code dan klik “create a launch.json file”. Pilih “Deno” sebagai lingkungan. Ini akan membuat file .vscode/launch.json dengan konfigurasi debug default.
  2. Konfigurasi launch.json: Sesuaikan konfigurasi launch.json untuk memenuhi kebutuhan proyek Anda. Anda dapat menentukan file mana yang akan dijalankan, argumen baris perintah apa pun, dan opsi debugging lainnya.
  3. Atur Breakpoint: Atur breakpoint dalam kode Anda dengan mengklik gutter di sebelah nomor baris.
  4. Mulai Debugging: Klik tombol “Start Debugging” (atau tekan F5) untuk memulai sesi debugging.
  5. Gunakan Alat Debugging: Gunakan alat debugging VS Code untuk menelusuri kode Anda, memeriksa variabel, dan mengevaluasi ekspresi.

Contoh launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Deno",
      "request": "launch",
      "type": "node",
      "runtimeExecutable": "deno",
      "runtimeArgs": [
        "run",
        "--inspect-brk",
        "-A", // Berikan semua izin (hanya untuk debugging)
        "${workspaceFolder}/main.ts"
      ],
      "port": 9229,
      "attachOnPort": 9229
    }
  ]
}

Setelah sesi debugging dimulai, Anda dapat menggunakan Chrome DevTools untuk memeriksa kode Anda dan men-debug masalah apa pun.

12. Praktik Terbaik untuk Pengembangan TypeScript Deno

Berikut adalah beberapa praktik terbaik untuk pengembangan TypeScript Deno:

  • Gunakan TypeScript Secara Konsisten: Manfaatkan fitur keamanan tipe statis TypeScript untuk menulis kode yang lebih mudah dipelihara dan bebas bug.
  • Konfigurasi tsconfig.json: Konfigurasikan file tsconfig.json Anda untuk mengaktifkan opsi pemeriksaan tipe ketat dan menyesuaikan opsi kompilasi.
  • Gunakan Sistem Modul Berbasis URL: Manfaatkan sistem modul berbasis URL Deno untuk mengelola dependensi dan menggunakan modul pihak ketiga.
  • Tulis Pengujian: Tulis pengujian unit dan pengujian integrasi untuk memastikan bahwa kode Anda berfungsi dengan benar.
  • Tangani Error dengan Benar: Gunakan blok try...catch dan lempar error yang bermakna untuk menangani error dan memberikan informasi debugging yang berguna.
  • Gunakan Linting dan Pemformatan Kode: Gunakan alat linting dan pemformatan kode seperti Deno’s built-in linter dan formatter untuk memastikan konsistensi dan kualitas kode. Jalankan deno fmt untuk memformat kode, dan deno lint untuk melakukan linting.
  • Berikan Izin Secara Eksplisit: Karena Deno aman secara default, berikan izin secara eksplisit hanya untuk sumber daya yang dibutuhkan oleh kode Anda. Hindari penggunaan --allow-all (-A) di lingkungan produksi.
  • Perhatikan Dependensi Pihak Ketiga: Verifikasi kredibilitas sumber sebelum mengimpor modul pihak ketiga.

13. Studi Kasus: Membangun API Sederhana dengan Deno dan TypeScript

Mari kita bangun API sederhana menggunakan Deno dan TypeScript. API ini akan mengekspos endpoint untuk membuat, membaca, memperbarui, dan menghapus catatan (CRUD).

  1. Buat Direktori Proyek: Buat direktori baru untuk proyek Anda.
    mkdir deno-api
    cd deno-api
  2. Buat File main.ts: Buat file bernama main.ts di direktori proyek Anda.
  3. Instal Oak (Middleware Web Framework): Kita akan menggunakan Oak, middleware framework untuk Deno untuk mempermudah penanganan routing dan middleware. Tambahkan kode berikut ke deps.ts:
    export { Application, Router } from "https://deno.land/x/oak@v12.6.1/mod.ts";

    Kemudian, impor ke main.ts seperti ini:

    import { Application, Router } from "./deps.ts";
  4. Implementasikan API: Berikut adalah implementasi API sederhana menggunakan Oak:
    import { Application, Router } from "./deps.ts";
    
    interface Note {
      id: string;
      title: string;
      description: string;
    }
    
    const notes: Note[] = [];
    
    const router = new Router();
    
    router
      .get("/notes", (context) => {
        context.response.body = notes;
      })
      .post("/notes", async (context) => {
        const body = await context.request.body({ type: "json" }).value;
        const note: Note = {
          id: crypto.randomUUID(),
          title: body.title,
          description: body.description,
        };
        notes.push(note);
        context.response.body = note;
        context.response.status = 201;
      })
      .get("/notes/:id", (context) => {
        const id = context.params.id;
        const note = notes.find((note) => note.id === id);
        if (note) {
          context.response.body = note;
        } else {
          context.response.status = 404;
          context.response.body = { message: "Catatan tidak ditemukan" };
        }
      })
      .put("/notes/:id", async (context) => {
        const id = context.params.id;
        const body = await context.request.body({ type: "json" }).value;
        const noteIndex = notes.findIndex((note) => note.id === id);
        if (noteIndex !== -1) {
          notes[noteIndex] = {
            id: id,
            title: body.title,
            description: body.description,
          };
          context.response.body = notes[noteIndex];
        } else {
          context.response.status = 404;
          context.response.body = { message: "Catatan tidak ditemukan" };
        }
      })
      .delete("/notes/:id", (context) => {
        const id = context.params.id;
        const noteIndex = notes.findIndex((note) => note.id === id);
        if (noteIndex !== -1) {
          notes.splice(noteIndex, 1);
          context.response.status = 204;
        } else {
          context.response.status = 404;
          context.response.body = { message: "Catatan tidak ditemukan" };
        }
      });
    
    const app = new Application();
    
    app.use(router.routes());
    app.use(router.allowedMethods());
    
    console.log("Mendengarkan pada http://localhost:8000/");
    await app.listen({ port: 8000 });
    
  5. Jalankan API:
    deno run --allow-net --allow-read --allow-write main.ts

Kode ini membuat API sederhana yang dapat Anda gunakan untuk membuat, membaca, memperbarui, dan menghapus catatan. Anda dapat menguji API menggunakan alat seperti cURL atau Postman.

14. Kesimpulan: Masa Depan Pengembangan TypeScript dengan Deno

TypeScript dan Deno adalah kombinasi yang kuat untuk pengembangan JavaScript modern. TypeScript memberikan keamanan tipe statis dan alat yang lebih baik, sementara Deno menawarkan runtime yang aman dan modern dengan dukungan bawaan untuk TypeScript. Dengan mengikuti praktik terbaik dan menggunakan alat dan pustaka yang tersedia, Anda dapat membangun aplikasi yang kuat, andal, dan mudah dipelihara menggunakan TypeScript dan Deno.

Masa depan pengembangan TypeScript dengan Deno terlihat cerah. Saat Deno terus berkembang dan mendapatkan popularitas, kita dapat mengharapkan lebih banyak alat, pustaka, dan sumber daya yang tersedia untuk pengembang. Dengan keunggulan keamanan, kinerja, dan kemudahan penggunaan Deno, dipastikan akan menjadi pilihan populer untuk pengembangan JavaScript modern.

15. Sumber Daya Tambahan: Memperdalam Pengetahuan Anda

Berikut adalah beberapa sumber daya tambahan untuk memperdalam pengetahuan Anda tentang TypeScript dan Deno:

Dengan sumber daya ini, Anda dapat terus belajar dan meningkatkan keterampilan Anda dalam pengembangan TypeScript dan Deno. Selamat mencoba!

“`

omcoding

Leave a Reply

Your email address will not be published. Required fields are marked *