๐ 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
- Pendahuluan: Mengapa TypeScript dan Deno?
- Prasyarat: Memastikan Anda Siap
- Menginstal Deno: Panduan Langkah demi Langkah
- Konfigurasi Lingkungan: Menyiapkan Editor dan Alat
- Proyek TypeScript Deno Pertama Anda: “Halo, Deno!”
- Memahami Konfigurasi TypeScript dengan Deno (tsconfig.json)
- Modul dan Impor: Cara Mengatur Kode Anda
- Menggunakan Modul Pihak Ketiga: Impor dari URL
- Penanganan Error di Deno dengan TypeScript
- Pengujian Kode TypeScript Deno Anda
- Debugging Aplikasi TypeScript Deno
- Praktik Terbaik untuk Pengembangan TypeScript Deno
- Studi Kasus: Membangun API Sederhana dengan Deno dan TypeScript
- Kesimpulan: Masa Depan Pengembangan TypeScript dengan Deno
- 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:
- Buka terminal Anda.
- Jalankan perintah berikut:
curl -fsSL https://deno.land/install.sh | sh
- 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. - Restart terminal Anda atau source file konfigurasi Anda (misalnya,
source ~/.bashrc
atausource ~/.zshrc
) untuk memperbarui PATH Anda. - Verifikasi instalasi dengan menjalankan:
deno --version
Ini akan menampilkan versi Deno yang terinstal.
Windows:
- Buka PowerShell sebagai administrator.
- Jalankan perintah berikut:
iwr https://deno.land/install.ps1 -useb | iex
- 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. - 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.
- 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:
- Instal Ekstensi Deno: Cari dan instal ekstensi “Deno” dari pasar ekstensi VS Code. Ekstensi ini menyediakan dukungan bahasa, linting, dan debugging untuk Deno.
- 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" }
- 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 tentangtsconfig.json
.
5. Proyek TypeScript Deno Pertama Anda: “Halo, Deno!”
Mari kita buat proyek TypeScript Deno pertama Anda:
- Buat Direktori Proyek: Buat direktori baru untuk proyek Anda.
mkdir hello-deno cd hello-deno
- Buat File
main.ts
: Buat file bernamamain.ts
di direktori proyek Anda. - Tambahkan Kode Berikut:
console.log("Halo, Deno!");
- 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:
- Buat File
utils.ts
: Buat file bernamautils.ts
di direktori proyek Anda. - Tambahkan Kode Berikut:
export function greet(name: string): string { return `Halo, ${name}!`; }
- Impor di
main.ts
: Ubah filemain.ts
Anda menjadi:import { greet } from "./utils.ts"; console.log(greet("Deno"));
- Jalankan Kode Anda:
deno run main.ts
Anda akan melihat “Halo, Deno!” dicetak ke konsol.
Mengimpor dari URL:
- Impor di
main.ts
: Ubah filemain.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 dideno.land
. - 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 bloktry...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
denganasync/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:
- Buat File Pengujian: Buat file pengujian dengan akhiran
_test.ts
atau.test.ts
(misalnya,main_test.ts
). - Impor Modul
assert
: Impor modulassert
dari pustaka standar Deno untuk menulis pernyataan pengujian. - Tulis Kasus Pengujian: Gunakan fungsi
Deno.test
untuk mendefinisikan kasus pengujian. Setiap kasus pengujian harus berisi satu atau lebih pernyataan menggunakan fungsiassert
. - 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:
- 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. - Konfigurasi
launch.json
: Sesuaikan konfigurasilaunch.json
untuk memenuhi kebutuhan proyek Anda. Anda dapat menentukan file mana yang akan dijalankan, argumen baris perintah apa pun, dan opsi debugging lainnya. - Atur Breakpoint: Atur breakpoint dalam kode Anda dengan mengklik gutter di sebelah nomor baris.
- Mulai Debugging: Klik tombol “Start Debugging” (atau tekan F5) untuk memulai sesi debugging.
- 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 filetsconfig.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, dandeno 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).
- Buat Direktori Proyek: Buat direktori baru untuk proyek Anda.
mkdir deno-api cd deno-api
- Buat File
main.ts
: Buat file bernamamain.ts
di direktori proyek Anda. - 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";
- 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 });
- 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:
- Dokumentasi TypeScript: https://www.typescriptlang.org/docs/
- Dokumentasi Deno: https://deno.land/manual
- Pustaka Standar Deno: https://deno.land/std
- Awesome Deno: Daftar kurasi pustaka, alat, dan sumber daya Deno: https://github.com/alosaur/awesome-deno
- Oak Framework: Dokumentasi Oak Framework: https://oakserver.github.io/oak/
Dengan sumber daya ini, Anda dapat terus belajar dan meningkatkan keterampilan Anda dalam pengembangan TypeScript dan Deno. Selamat mencoba!
“`