[{"data":1,"prerenderedAt":453},["ShallowReactive",2],{"site-header":3,"site-footer-license":37,"article-menggunakan-typescript-dengan-node-js-dan-express-with-latest":41},{"navigations":4},[5,20],{"collection":6,"item":7},"series",{"__typename":6,"title":8,"slug":9,"children_series":10},"Artikel","all",[11,14,17],{"title":12,"slug":13},"Algoritma dan Struktur Data","algoritma-struktur-data",{"title":15,"slug":16},"Konsep Dasar Pemrograman","konsep-dasar-pemrograman",{"title":18,"slug":19},"Kecerdasan Artifisial","kecerdasan-artifisial",{"collection":6,"item":21},{"__typename":6,"title":22,"slug":23,"children_series":24},"Tutorial","tutorial",[25,28,31,34],{"title":26,"slug":27},"Belajar Java","belajar-java",{"title":29,"slug":30},"Belajar Pascal","belajar-pascal",{"title":32,"slug":33},"Belajar Python","belajar-python",{"title":35,"slug":36},"Belajar Golang","belajar-golang",{"name":38,"url":39,"show":40},"CC BY-SA","https://creativecommons.org/licenses/by-sa/4.0/",false,{"article":42,"renderedBody":408,"renderedTakeaway":409,"latestArticles":410,"toc":433},{"id":43,"title":44,"slug":45,"excerpt":46,"published_at":47,"thumbnail_image":48,"tags":50,"reading_time":55,"takeway":56,"body":57,"authors":58,"series":59},"16","Menggunakan TypeScript dengan Node.js dan Express","menggunakan-typescript-dengan-node-js-dan-express","Pengen bikin server Express di Node.js tapi pakai fitur-fitur keren TypeScript? Yuk, intip cara setup lengkapnya dari nol di sini!","2026-06-15T02:38:30.735Z",{"id":49},"798b60f1-9ef5-4f73-8d43-85825fd86acc",[51,52,53,54],"javascript","nodejs","express","typescript",null,"- TypeScript memberikan fitur static typing dan autocompletion yang membuat penulisan kode di Node.js jadi lebih aman dan minim bug.\n- Package ts-node mempermudah kita menjalankan file TypeScript secara langsung tanpa perlu dicompile manual selama masa development.\n- Untuk production, file TypeScript wajib dicompile ke JavaScript biasa agar kinerjanya optimal dan kompatibel dengan Node.js.","\nKebanyakan *framework front-end* populer kayak *Nuxt* atau *Angular* biasanya udah otomatis menyediakan opsi buat pakai *TypeScript* pas kita pertama kali *install*.\n\nTapi, gimana ceritanya kalau di bagian *back-end*? Misalnya, kalian pengen bikin *server* menggunakan *Express* yang berjalan di atas *Node.js*, tapi lebih sreg pakai *TypeScript* biar kodenya lebih terstruktur dan minim *bug*.\n\nMau *nggak* mau, kita harus melakukan *setup* sendiri dari awal. Nah, di artikel kali ini, kita bakal kupas tuntas cara melakukan *setup TypeScript* bareng *Node.js* dan *Express* dengan cara yang santai dan gampang diikuti. Yuk, langsung aja kita mulai! 🚀\n\n## Persiapan\n\n**`Node.js` + `TypeScript` + `Express` = 🤩**\n\nSebelum lanjut koding, pastikan dulu beberapa program ini udah terpasang di komputer kalian:\n\n* *Node.js*\n* *npm* atau [yarn](https://yarnpkg.com/getting-started/install)\n\nKalau belum punya, kalian bisa langsung mampir ke panduan [install Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) buat pasang dulu.\n\nBiar makin yakin kalau semuanya udah terpasang dengan bener, coba jalankan perintah ini di terminal untuk mengecek versinya.\n\nMengecek versi *Node.js*:\n\n```bash\n$ node -v\nv14.16.0\n```\n\nMengecek versi *npm*:\n\n```bash\n$ npm -v\n7.15.0\n```\n\nKalau terminal udah menampilkan nomor versi kayak di atas, berarti kalian udah aman buat lanjut ke langkah berikutnya.\n\n## Inisialisasi Proyek Node.js\n\nPertama-tama, buka terminal kalian terus bikin folder baru khusus buat proyek ini, lalu langsung masuk ke dalamnya.\n\n```shell\nmkdir typenode && cd typenode\n```\n\nSetelah itu, kita inisialisasi file `package.json` menggunakan perintah `npm init`.\n\n```shell\nnpm init -y\n```\n\nSekarang, mari kita buat *server* sederhana menggunakan *Express* versi *JavaScript* biasa dulu buat memastikan semuanya berjalan normal. Buat sebuah file baru bernama `main.js` di dalam direktori utama proyek, lalu tulis kode berikut (boleh langsung disalin aja biar cepet, hehe):\n\n```javascript\nconst express = require(\"express\");\n\nfunction main(){\n  const app = express();\n  const port = 8080;\n\n  // endpoint sederhana untuk menampilkan teks 'Hello Express Node.js'\n  app.get(\"/\", (req, res) => res.send(\"Hello Express Node.js\"));\n\n  // mulai server express\n  app.listen(port, () => {\n    console.log(`[server] server dimulai di http://localhost:${port} ⚡`);\n  });\n}\n\nmain();\n```\n\nSebelum kodenya dijalankan, tentu kita harus memasang *library* `express` terlebih dahulu agar tidak terjadi *error*.\n\n```shell\n# dengan npm\nnpm install express\n\n# dengan yarn\nyarn add express\n```\n\nSetelah proses instalasi selesai, sekarang saatnya kita jalankan *server* tersebut.\n\n```shell\nnode main.js\n```\n\nJika sukses tanpa kendala, kalian bakal melihat pesan sukses di terminal kalian:\n\n```\n[server] server dimulai di http://localhost:8080 ⚡\n```\n\nKalian bisa membuka *browser* kesayangan lalu kunjungi `http://localhost:8080` buat melihat hasilnya langsung. Kalau udah muncul teksnya, selamat! Selanjutnya kita bakal mulai meracik bagian *TypeScript*-nya.\n\n## Menambahkan TypeScript ke Proyek\n\nUntuk mulai menggunakan *TypeScript*, kita butuh dua dependensi utama tambahan:\n\n* `typescript`: Ini adalah *library* inti yang bertugas mengubah (melakukan kompilasi) kode *TypeScript* menjadi kode *JavaScript* standar yang dipahami oleh *Node.js*.\n* `ts-node`: Alat bantu yang super berguna agar kita bisa langsung menjalankan file *TypeScript* di lingkungan *Node.js* tanpa perlu melakukan kompilasi secara manual pas masa pengembangan (*development*).\n\nSilakan jalankan perintah berikut di terminal buat memasang keduanya:\n\n```shell\n# dengan npm\nnpm install typescript ts-node --save-dev\n\n# dengan yarn\nyarn add -D typescript ts-node\n```\n\nSebagai catatan, bendera `--save-dev` pada *npm* atau `-D` pada *yarn* digunakan untuk memasukkan dependensi ini ke bagian `devDependencies` di file `package.json`. Soalnya, kita cuma butuh *tools* ini pas masa *development* aja, *nggak* usah dibawa ke lingkungan *production*.\n\nSetelah proses *install* selesai, kita perlu membuat file konfigurasi untuk *compiler TypeScript*-nya. Buatlah file bernama `tsconfig.json` di *root directory* proyek kalian, lalu isi dengan konfigurasi di bawah ini:\n\n```json\n{\n    \"compilerOptions\": {\n        \"module\": \"commonjs\",\n        \"esModuleInterop\": true,\n        \"target\": \"es5\",\n        \"outDir\": \"build\",\n        \"rootDir\": \"src\",\n        \"baseUrl\": \".\",\n        \"strict\": true\n    }\n}\n```\n\nBiar *nggak* bingung, ini sedikit penjelasan tentang opsi-opsi konfigurasi di atas:\n\n* `module`: Menentukan format modul hasil kompilasi. Buat aplikasi *server* atau *back-end*, format `commonjs` adalah pilihan standar yang paling aman.\n* `target`: Menentukan versi *JavaScript* keluaran hasil kompilasi. Di sini kita pilih `es5` agar kompatibel dengan lingkungan *runtime* yang lebih lama.\n* `outDir`: Folder tujuan untuk menampung file-file *JavaScript* hasil kompilasi. Kita arahkan ke folder `build`.\n* `rootDir`: Folder utama tempat kita menyimpan semua file sumber *TypeScript* kita. Kita atur ke folder `src`.\n* `baseUrl`: Path dasar yang digunakan buat menyelesaikan impor modul *non-relative*.\n\nUntuk dokumentasi lengkap mengenai opsi konfigurasi lainnya, kalian bisa langsung meluncur ke [dokumentasi resmi tsconfig](https://www.typescriptlang.org/tsconfig).\n\nSelanjutnya, kita perlu memperbarui bagian `scripts` di dalam file `package.json` agar mempermudah proses menjalankan dan membangun aplikasi. Ubah isinya menjadi seperti ini:\n\n```json\n{\n  \"name\": \"typenode\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"build\": \"tsc\",\n    \"serve\": \"node ./build/main.js\",\n    \"dev\": \"ts-node ./src/main.ts\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^4.3.2\",\n    \"ts-node\": \"^10.0.0\"\n  }\n}\n```\n\n## Membuat Server dengan TypeScript\n\nLangkah konfigurasi udah hampir selesai, nih! Tapi sebelum mulai memindahkan kode, kita butuh dua paket lagi yang berisi definisi tipe (*type definitions*):\n\n* `@types/node`: Menyediakan definisi tipe untuk objek bawaan *Node.js*.\n* `@types/express`: Menyediakan definisi tipe untuk *Express*.\n\nJalankan perintah ini di terminal buat memasangnya:\n\n```shell\n# dengan npm\nnpm install @types/node @types/express --save-dev\n\n# dengan yarn\nyarn add -D @types/node @types/express\n```\n\nKarena *TypeScript* menggunakan sistem tipe statis (*static typing*), paket-paket tipe ini penting banget biar *compiler* tahu tipe data apa saja yang sah digunakan pada tiap objek. Menariknya, kalau kalian pakai *Visual Studio Code*, paket tipe ini bakal mengaktifkan fitur *code completion* dan *IntelliSense* yang canggih banget. Menulis kode jadi lebih terbantu dan cepat! 😎\n\nSekarang, mari kita rapikan struktur direktori kita. Buat sebuah folder baru bernama `src` untuk menampung seluruh kode *TypeScript* yang akan kita buat.\n\n```shell\nmkdir src\n```\n\nSetelah foldernya dibuat, pindahkan file `main.js` yang kita buat tadi ke dalam folder `src`, lalu ubah ekstensinya menjadi `main.ts`.\n\n```shell\nmv main.js src/main.ts\n```\n\nSekarang, struktur direktori proyek kalian bakal terlihat rapi kayak gini:\n\n```\n.\n├── tsconfig.json\n├── src\n│   └── main.ts\n├── node_modules\n├── package.json\n└── package-lock.json\n```\n\nBuka file `src/main.ts` di editor kalian, lalu ubah kodenya menggunakan sintaks *TypeScript* modern kayak di bawah ini:\n\n```typescript\nimport express from \"express\";\n\nfunction main(){\n  const app = express();\n  const port = 8080;\n\n  // endpoint sederhana untuk menampilkan teks 'Hello Express TS'\n  app.get(\"/\", (req, res) => res.send(\"Express + Typescript + NodeJS = 😍\"));\n\n  // mulai server express\n  app.listen(port, () => {\n    console.log(`[server] server dimulai di http://localhost:${port} ⚡`);\n  });\n}\n\nmain();\n```\n\nNah, sekarang saatnya kita coba jalankan aplikasi *TypeScript* ini. Cukup jalankan perintah berikut di terminal:\n\n```shell\nnpm run dev\n```\n\nJika konfigurasinya udah bener, kalian bakal melihat output sukses yang sama seperti sebelumnya. Sekarang *server* kalian udah berjalan lancar menggunakan *TypeScript* di latar belakang! Ingat ya, ke depannya selalu simpan file baru kalian di dalam folder `src`.\n\n## Kompilasi TypeScript ke JavaScript\n\nSetelah asyik koding pakai *TypeScript*, ada satu langkah penting sebelum kalian mempublikasikan aplikasi ini ke lingkungan produksi (*production*), yaitu kompilasi.\n\n*Node.js* secara bawaan *nggak* bisa menjalankan file *TypeScript* secara langsung. Makanya kita perlu mengubah semua file di folder `src` menjadi kode *JavaScript* biasa agar kinerjanya tetap cepat dan optimal.\n\nUntuk melakukan proses kompilasi ini, jalankan perintah:\n\n```shell\nnpm run build\n```\n\nSetelah perintah selesai berjalan, kalian bakal menemukan folder baru bernama `build` yang berisi file `main.js`. Isi file hasil kompilasi tersebut bakal terlihat seperti ini:\n\n```javascript\n\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar express_1 = __importDefault(require(\"express\"));\nfunction main() {\n    var app = express_1.default();\n    var port = 8080;\n    // endpoint sederhana untuk menampilkan teks\n    app.get(\"/\", function (req, res) { return res.send(\"Express + Typescript + NodeJS = 😍\"); });\n    // mulai server express\n    app.listen(port, function () {\n        console.log(\"[server] server dimulai di http://localhost:\" + port + \" ⚡\");\n    });\n}\nmain();\n```\n\nBisa kalian lihat, semua sintaks modern kayak *arrow functions* telah diubah menjadi fungsi biasa (*anonymous function*) dan variabel diubah menjadi `var`. Hal ini dikarenakan target compiler kita atur ke `es5` di file `tsconfig.json`. Kalau kalian pengen hasil yang lebih modern, kalian bisa mengubah nilai `target` tersebut ke `es6` atau versi yang lebih baru.\n\nTerakhir, buat menjalankan kode versi *production* yang udah dicompile tadi, jalankan perintah berikut:\n\n```shell\nnpm run serve\n```\n\n## Versi Cepat (TL;DR)\n\nBuat kalian yang lagi buru-buru atau pengen langsung melihat hasil jadinya tanpa perlu mengetik satu-satu dari awal, tenang aja. Kalian bisa langsung clone atau salin kode lengkapnya dari repositori [GitHub](https://github.com/izzudd/kode-kode-invasikode/tree/main/typescript-node-express).\n\nSetelah disalin, kalian tinggal jalankan perintah `npm install` di terminal komputer kalian buat memasang semua dependensinya, dan proyek pun siap dijalankan!\n\nCatatan kecil, file `package-lock.json` *nggak* perlu ikut disalin ya.\n\nSelamat mencoba dan bereksperimen dengan *TypeScript*! Semoga sukses kodingnya! 😁",[],{"id":60,"title":8,"slug":9,"articles":61,"parent_series":55},"9",[62,78,91,94,105,118,130,141,153,164,175,185,195,206,215,226,237,247,255,266,277,288,296,305,314,327,336,347,358,368,377,386,396],{"id":63,"title":64,"slug":65,"excerpt":66,"thumbnail_image":67,"tags":69},"41","Log Aggregation Modern dengan Grafana Loki dan Vector: Hemat Storage Tanpa Indeks Raksasa","log-aggregation-modern-grafana-loki-vector-hemat-storage","Klaster Elasticsearch kalian rakus RAM dan boros storage, ya? Padahal nggak semua kata di log perlu diindeks, lho. Yuk, kita kenalan sama duet Grafana Loki dan Vector yang jauh lebih ramah kantong!",{"id":68},"03c9d1a0-c80a-401d-9f2b-2b3ee7abb115",[70,71,72,73,74,75,76,77],"backend","observa","logging","grafana","loki","vector","devops","system-design",{"id":79,"title":80,"slug":81,"excerpt":82,"thumbnail_image":83,"tags":85},"45","Rate Limiting Algorithms: Token Bucket vs Leaky Bucket vs Sliding Window","rate-limiting-algorithms-token-bucket-leaky-bucket-sliding-window","Udah tahu kenapa *rate limiting* itu wajib, tapi masih bingung beda Token Bucket, Leaky Bucket, Fixed Window, dan Sliding Window? Yuk, kita adu empat algoritma ini bareng-bareng dan cari tahu mana yang paling pas buat API kalian!",{"id":84},"0e0ed26d-20c6-443c-bde1-4a6200f6f801",[70,77,86,87,88,89,90],"rate-limiting","redis","api-gateway","architecture","traffict-management",{"id":43,"title":44,"slug":45,"excerpt":46,"thumbnail_image":92,"tags":93},{"id":49},[51,52,53,54],{"id":95,"title":96,"slug":97,"excerpt":98,"thumbnail_image":99,"tags":101},"17","Pemrograman Asynchronous vs Multithreading, Apa Sih Bedanya?","pemrograman-asynchronous-dan-multithreading-apa-bedanya","Sering dengar istilah asynchronous dan multithreading pas ngoding tapi masih bingung bedanya? Yuk, kita bedah perbedaannya lewat analogi bikin mi instan yang gampang dipahami!",{"id":100},"9c05d0ae-e829-4f1b-b9f7-a84f3e0439d3",[102,103,104],"pemrograman","concurrency","tips-coding",{"id":106,"title":107,"slug":108,"excerpt":109,"thumbnail_image":110,"tags":112},"33","Berkenalan dengan RabbitMQ: Si Kurir Pesan Serba Bisa","berkenalan-dengan-rabbitmq-si-kurir-pesan-serba-bisa","Pernah nggak sih kalian klik Bayar Sekarang dan notifikasi suksesnya muncul seketika, padahal email konfirmasi baru nyampe beberapa detik kemudian? Rahasianya ada di satu kurir tak terlihat. Yuk, kita kenalan sama RabbitMQ!",{"id":111},"f6620f79-b3b2-4f9c-8104-283a335e06c4",[113,114,70,115,116,117],"rabbitmq","message-broker","microservices","async","queue",{"id":119,"title":120,"slug":121,"excerpt":122,"thumbnail_image":123,"tags":125},"34","Kenapa Backend Butuh Database Connection Pooling?","kenapa-backend-butuh-database-connection-pooling","Pernah kena error Too many connections padahal CPU server masih santai di angka 30%? Masalahnya bukan di query kalian, tapi di cara aplikasi ngobrol sama database. Yuk, kenalan sama Connection Pooling!",{"id":124},"6f7a2d8c-2a37-4901-a522-50df8d9c0a20",[70,126,127,128,77,129],"database","postgresql","connection-pooling","performance",{"id":131,"title":132,"slug":133,"excerpt":134,"thumbnail_image":135,"tags":137},"27","Background Worker & Task Queue: Jangan Jalankan Proses Berat di Request HTTP!","background-worker-task-queue-jangan-jalankan-proses-berat-di-http","Pernah nggak sih kalian klik Daftar Akun lalu halaman loading muter sampai 15 detik tanpa kepastian? Penyebabnya klasik banget. Yuk, kita bahas kenapa proses berat nggak boleh dijalanin di request HTTP!",{"id":136},"e119c6ad-fc37-4b92-abdc-3eb20f8e34b4",[70,138,139,140,113,87,116],"task-queue","celery","fastapi",{"id":142,"title":143,"slug":144,"excerpt":145,"thumbnail_image":146,"tags":148},"28","Mengatasi N+1 Query Problem: Musuh Tersembunyi Performa Backend","mengatasi-n-plus-1-query-problem-musuh-tersembunyi-backend","Pernah bikin endpoint yang cuma nampilin 50 postingan beserta nama penulisnya, tapi response-nya lambat banget? Bisa jadi kalian kena N+1 Query. Yuk, kita bedah penyebabnya dan cara memberantasnya!",{"id":147},"34b94e14-3e9a-4778-9f1f-6df5898915fb",[126,149,150,151,152,129,70],"sql","orm","sqlalchemy","django",{"id":154,"title":155,"slug":156,"excerpt":157,"thumbnail_image":158,"tags":160},"30","Berkenalan dengan Bahasa Go: Kenapa Banyak Dipakai untuk Backend Modern?","berkenalan-dengan-bahasa-go-untuk-backend-modern","Kok bisa sih Go yang masih muda ini jadi bahasa andalan Docker sampai Kubernetes? Yuk, kita kenalan sama Goroutine, Channel, dan alasan dia hemat memori luar biasa!",{"id":159},"a368631c-f331-4c50-8322-1d0fc44927aa",[161,162,70,103,163,77],"golang","go","goroutine",{"id":165,"title":166,"slug":167,"excerpt":168,"thumbnail_image":169,"tags":171},"13","Hal yang Perlu Diperhatikan Sebelum Pindah ke Linux","hal-yang-perlu-diperhatikan-sebelum-pindah-ke-linux","Tertarik migrasi dari Windows ke Linux tapi masih ragu? Yuk, pelajari kelebihan, kekurangan, dan persiapan penting sebelum kamu benar-benar pindah!",{"id":170},"ae27713e-5025-4d13-88b6-efb4860cc5b3",[172,173,174],"linux","windows","foss",{"id":176,"title":177,"slug":178,"excerpt":179,"thumbnail_image":180,"tags":182},"11","Apa Kabar JavaScript? Rilis State of JS 2022","apa-kabar-javascript-rilis-state-of-js-2022","Survei State of JS 2022 resmi dirilis dengan lonjakan responden yang luar biasa! Framework dan build tool apa saja yang berhasil mencuri perhatian tahun ini?",{"id":181},"18df5262-d813-43d1-b1f7-5595a7f53602",[51,183,184],"web","news",{"id":186,"title":187,"slug":188,"excerpt":189,"thumbnail_image":190,"tags":192},"12","Buat PowerShell Lebih Berwarna dengan Starship","buat-powershell-lebih-berwarna-dengan-starship","Bosen sama tampilan PowerShell yang hitam putih dan kaku? Yuk, sulap terminalmu jadi lebih interaktif, estetik, dan berwarna pakai Starship!",{"id":191},"c5a8262b-43db-4479-8f6c-5a6a0d61653b",[193,173,194],"shell","powershell",{"id":196,"title":197,"slug":198,"excerpt":199,"thumbnail_image":200,"tags":202},"14","Instalasi Java dengan Visual Studio Code","instalasi-java-dengan-visual-studio-code","Mau belajar ngoding Java tapi spek laptop pas-pasan buat buka IDE berat? Yuk, cari tahu cara setup VS Code biar ngoding Java tetap lancar dan enteng!",{"id":201},"99b01cc2-11ac-4449-9927-a1a7116347df",[203,204,205],"howto","java","editor",{"id":207,"title":208,"slug":209,"excerpt":210,"thumbnail_image":211,"tags":213},"15","Kenapa Ada Banyak Sekali Distro Linux?","kenapa-ada-banyak-sekali-distro-linux","Pernah bingung pas mau install Linux tapi malah disuguhi puluhan pilihan distro? Tenang, kalian nggak sendirian. Yuk, cari tahu kenapa distro Linux bisa sebanyak itu dan apa bedanya!",{"id":212},"b5352a4b-f274-4489-aca9-36814947d514",[172,214],"distro",{"id":216,"title":217,"slug":218,"excerpt":219,"thumbnail_image":220,"tags":222},"18","React, Angular, atau Vue: Pilih Framework yang Mana?","react-angular-vue-pilih-framework-yang-mana","Bingung menentukan pilihan di antara React, Angular, dan Vue untuk proyek web kalian berikutnya? Tenang, yuk kita bandingkan kelebihan masing-masing di sini!",{"id":221},"ff111270-80c2-4ccb-83d7-d5ab8c021201",[223,224,225],"web-development","frontend","framework",{"id":227,"title":228,"slug":229,"excerpt":230,"thumbnail_image":231,"tags":233},"19","Static Typing dan Dynamic Typing: Apa Bedanya?","static-typing-dan-dynamic-typing-apa-bedanya","Pernah bingung kenapa di Java tipe data harus dideklarasikan, sementara di Python tinggal pakai aja? Yuk, cari tahu perbedaan static typing dan dynamic typing di sini!",{"id":232},"98e85e76-9e7b-42d1-b989-7c75e7f49abc",[234,235,236],"programming","types","comparison",{"id":238,"title":239,"slug":240,"excerpt":241,"thumbnail_image":242,"tags":244},"20","Tailwind v3.0 Rilis: Ada JIT, Arbitrary Values, dan Banyak Lagi!","tailwind-v3-0-rilis-jit-arbitrary-dan-banyak-lagi","Tailwind CSS v3.0 resmi dirilis dengan segudang peningkatan performa yang bikin proses coding makin asyik. Apa aja sih fitur andalan yang wajib dicoba?",{"id":243},"d5e879fa-5cd0-4015-a155-b0cc69ff12fb",[245,246,223],"tailwind-css","css-framework",{"id":248,"title":249,"slug":250,"excerpt":251,"thumbnail_image":252,"tags":254},"21","TypeScript: JavaScript dengan Gaya dan Tipe Data Statis","typescript-javascript-dengan-gaya","Pernah pusing gara-gara runtime error di JavaScript? Yuk, kenalan dengan TypeScript yang bawa fitur static typing biar kode kalian makin rapi dan aman!",{"id":253},"f615bb1f-8e36-4d6c-9c2c-f1629407173c",[54,51,223],{"id":256,"title":257,"slug":258,"excerpt":259,"thumbnail_image":260,"tags":262},"22","Yang Baru di Nuxt 3: Nitro Engine, Vite, dan Fitur Keren Lainnya","yang-baru-di-nuxt-3-nitro-vite-dan-banyak-lagi","Nuxt 3 hadir membawa perubahan arsitektur besar-besaran untuk menyelaraskan dengan Vue 3. Penasaran apa saja peningkatan performa dan fitur barunya?",{"id":261},"8444bdbc-f60c-4d8b-8593-1b49400e8659",[263,264,265],"nuxt-3","vue-3","frontend-framework",{"id":267,"title":268,"slug":269,"excerpt":270,"thumbnail_image":271,"tags":273},"23","Kenapa Pakai FastAPI dan Kenapa Dia Kenceng Banget?","kenapa-pakai-fastapi-dan-kenapa-dia-kenceng-banget","Sering dengar FastAPI tapi masih bingung kenapa dia bisa ngebut kayak NodeJS dan Go? Yuk, kita bedah bareng rahasia ASGI, sihir Pydantic, sampai dokumentasi otomatisnya!",{"id":272},"84847c9e-70ab-4dcc-bed7-7be50165f7f4",[140,274,70,275,276],"python","asgi","pydantic",{"id":278,"title":279,"slug":280,"excerpt":281,"thumbnail_image":282,"tags":284},"26","REST API vs gRPC: Kapan Sebaiknya Mulai Pindah dari JSON?","rest-api-vs-grpc-kapan-sebaiknya-pindah-dari-json","Pernah nggak sih sistem mikroservis kalian mulai kerasa berat padahal cuma tuker-tukeran data internal? Belum tentu masalah servernya. Yuk, kita bahas kapan REST + JSON masih juara dan kapan gRPC jadi jawabannya!",{"id":283},"487500a0-9e09-469d-8736-1583c5ea83aa",[70,285,286,115,287,77],"grpc","rest-api","protobuf",{"id":289,"title":290,"slug":291,"excerpt":292,"thumbnail_image":293,"tags":295},"38","Optimistic vs Pessimistic Locking: Mengatasi Rebutan Data di Database","optimistic-vs-pessimistic-locking-mengatasi-rebutan-data-di-database","Seribu orang ngeklik \"Beli Sekarang\" di detik yang sama buat rebutan 1 tiket terakhir. Kira-kira apa yang bakal terjadi di server kalian? Yuk, kita banding *pessimistic* sama *optimistic locking*!",{"id":294},"21ab769d-6f82-4a22-be11-17ac16e9fb6b",[70,126,103,127,77,89,149],{"id":297,"title":298,"slug":299,"excerpt":300,"thumbnail_image":301,"tags":303},"24","Kenapa Butuh Rate Limiting?","kenapa-butuh-rate-limiting","Pernah nggak sih endpoint login kalian diserbu bot yang nyoba nembak ribuan password cuma dalam semenit? Yuk, kita bahas kenapa Rate Limiting itu wajib, plus cara masangnya di FastAPI!",{"id":302},"1401f9e5-6359-404a-8d80-273ddee9a372",[70,86,77,304,87,140],"api",{"id":306,"title":307,"slug":308,"excerpt":309,"thumbnail_image":310,"tags":312},"25","Kenapa Event Queue Bikin Backend Kalian Nggak Gampang Tumbang?","kenapa-event-queue-bikin-backend-kamu-nggak-gampang-tumbang","Pernah klik tombol Beli Sekarang dan notifikasi suksesnya muncul dalam sekejap, padahal di belakang layar ada invoice, email, sampai push notification yang harus dibuat? Rahasianya Event Queue. Yuk, kita bedah!",{"id":311},"d9e76018-fbcc-4c69-ad42-8f75ff229ecd",[70,77,313,114,89],"event-queue",{"id":315,"title":316,"slug":317,"excerpt":318,"thumbnail_image":319,"tags":321},"46","Mengapa C Mulai Ditinggalkan: Duel Filosofi Keamanan Rust vs Kesederhanaan Zig","mengapa-c-mulai-ditinggalkan-duel-filosofi-rust-vs-zig","Pernah denger kalau sekitar 70% celah keamanan kritis software modern itu asalnya dari bahasa C? Iya, bahasa yang udah jadi fondasi internet ini 😅. Yuk, kita bedah duel filosofi Rust vs Zig dan cari tahu mana yang pas buat proyek kalian!",{"id":320},"1942a5c9-c1f6-476d-9913-768f78d9d8eb",[322,323,324,325,326],"system-programming","rust","zig","c","memory-safety",{"id":328,"title":329,"slug":330,"excerpt":331,"thumbnail_image":332,"tags":334},"29","Memahami Database Indexing: Rahasia Query Super Cepat","memahami-database-indexing-rahasia-query-super-cepat","Query kalian mulai lelet padahal data baru nembus jutaan baris? Sebelum buru-buru *upgrade* server, yuk cek dulu *index*-nya. Yuk, kita bedah gimana *database indexing* sebenernya kerja!",{"id":333},"b123036f-1779-478c-a545-cf5f189b5fe9",[126,149,127,335,129,70],"indexing",{"id":337,"title":338,"slug":339,"excerpt":340,"thumbnail_image":341,"tags":343},"31","Mengenal Redis: Lebih dari Sekadar In-Memory Cache","mengenal-redis-lebih-dari-sekadar-in-memory-cache","Masih nganggep Redis cuma buat caching? Padahal dia bisa jadi leaderboard, message broker, sampai rate limiter lho. Yuk, kita bedah semua kemampuannya!",{"id":342},"9595b7d7-60e0-48f5-a715-f3cf60f34e1d",[87,70,344,345,346,274],"cache","nosql","in-memory",{"id":348,"title":349,"slug":350,"excerpt":351,"thumbnail_image":352,"tags":354},"32","Docker Compose untuk Developer Santai: Satu Perintah Buat Jalankan Semua Service","docker-compose-untuk-developer-santai","Pernah nggak kalian ngulang-ngulang perintah `docker run` cuma buat nyalain web, database, dan cache satu-satu? Capek, kan? Yuk, kita rapikan semuanya jadi satu file dan satu perintah!",{"id":353},"f4c08f1b-e0d0-410c-b091-c3618944fb3e",[355,356,76,357,70],"docker","docker-compose","containers",{"id":359,"title":360,"slug":361,"excerpt":362,"thumbnail_image":363,"tags":365},"35","Mengenal Idempotency Key: Rahasia Anti-Double Charge di API Pembayaran","mengenal-idempotency-key-rahasia-anti-double-charge-di-api-pembayaran","Pernah internet kalian ngadat pas lagi nekan tombol Bayar, terus panik ngekliknya tiga kali? Kalau endpoint-nya nggak idempotent, saldo bisa kepotong berkali-kali. Yuk, kenalan sama Idempotency Key!",{"id":364},"724cb83a-3ce5-4ee2-b0d7-533e3a0fc7df",[70,304,366,77,367,140,87],"idempotency","payment",{"id":369,"title":370,"slug":371,"excerpt":372,"thumbnail_image":373,"tags":375},"36","Mencegah Efek Domino di Mikroservis dengan Circuit Breaker Pattern","mencegah-efek-domino-di-mikroservis-dengan-circuit-breaker-pattern","Pernah nggak sih, satu fitur minor di aplikasi kalian mendadak lelet, eh malah bikin halaman checkout dan login ikut down total? Itu namanya *cascading failure*. Yuk, kita bahas gimana *circuit breaker pattern* (pemutus arus) nyelametin arsitektur kalian!",{"id":374},"c2e8e37f-8f9a-423f-a09d-74613b3c2924",[70,115,376,77,89],"circuit-breaker",{"id":378,"title":379,"slug":380,"excerpt":381,"thumbnail_image":382,"tags":384},"37","Kenapa Backend Butuh Graceful Shutdown? Jangan Asal Cabut Kabel Server!","kenapa-backend-butuh-graceful-shutdown-jangan-asal-cabut-kabel-server","Pernah nggak sih, abis kalian nge-*deploy* backend, beberapa detik kemudian monitoring malah banjir *alert* **502 Bad Gateway** dari pengguna? Saldo udah kepotong tapi status order belum keburu ter-*update* di *database*. Yuk, kita bahas kenapa *graceful shutdown* itu wajib banget!",{"id":383},"251a54a7-1d24-47fd-8cbc-a46fd42cbb6f",[70,76,140,355,385,77,89],"kubernetes",{"id":387,"title":388,"slug":389,"excerpt":390,"thumbnail_image":391,"tags":393},"39","Database Sharding vs Partitioning: Kapan Data Perlu Dipecah?","database-sharding-vs-partitioning-kapan-data-perlu-dipecah","Tabel transaksi kalian udah nembus miliaran baris dan tiap *query* laporan bikin *CPU* melonjak 100%? Sebelum asal pecah data, yuk kita pahami dulu beda *sharding* sama *partitioning*!",{"id":392},"08ef5fe5-d935-47b3-bbbc-d976948b2a9e",[70,126,127,77,89,394,395],"sharding","scaling",{"id":397,"title":398,"slug":399,"excerpt":400,"thumbnail_image":401,"tags":403},"40","Menyelami Distributed Tracing: Melacak Jejak Request di Balik Keruwetan Microservices","menyelami-distributed-tracing-melacak-jejak-request-microservices","Satu klik Checkout di backend kalian bisa memicu puluhan network call antar-service, tapi pas ada yang lambat, service mana sebenernya yang salah? Log aja nggak cukup buat njawab itu. Yuk, kita bedah Distributed Tracing!",{"id":402},"1ace92fa-b89c-4cef-ab75-4e4cd67a089c",[70,404,405,406,115,89,407],"distributed-systems","observability","open-telemetry","tracing","\u003Cp>Kebanyakan \u003Cem>framework front-end\u003C/em> populer kayak \u003Cem>Nuxt\u003C/em> atau \u003Cem>Angular\u003C/em> biasanya udah otomatis menyediakan opsi buat pakai \u003Cem>TypeScript\u003C/em> pas kita pertama kali \u003Cem>install\u003C/em>.\u003C/p>\n\u003Cp>Tapi, gimana ceritanya kalau di bagian \u003Cem>back-end\u003C/em>? Misalnya, kalian pengen bikin \u003Cem>server\u003C/em> menggunakan \u003Cem>Express\u003C/em> yang berjalan di atas \u003Cem>Node.js\u003C/em>, tapi lebih sreg pakai \u003Cem>TypeScript\u003C/em> biar kodenya lebih terstruktur dan minim \u003Cem>bug\u003C/em>.\u003C/p>\n\u003Cp>Mau \u003Cem>nggak\u003C/em> mau, kita harus melakukan \u003Cem>setup\u003C/em> sendiri dari awal. Nah, di artikel kali ini, kita bakal kupas tuntas cara melakukan \u003Cem>setup TypeScript\u003C/em> bareng \u003Cem>Node.js\u003C/em> dan \u003Cem>Express\u003C/em> dengan cara yang santai dan gampang diikuti. Yuk, langsung aja kita mulai! 🚀\u003C/p>\n\u003Ch2 id=\"persiapan\">Persiapan\u003C/h2>\n\u003Cp>\u003Cstrong>\u003Ccode>Node.js\u003C/code> + \u003Ccode>TypeScript\u003C/code> + \u003Ccode>Express\u003C/code> = 🤩\u003C/strong>\u003C/p>\n\u003Cp>Sebelum lanjut koding, pastikan dulu beberapa program ini udah terpasang di komputer kalian:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cem>Node.js\u003C/em>\u003C/li>\n\u003Cli>\u003Cem>npm\u003C/em> atau \u003Ca href=\"https://yarnpkg.com/getting-started/install\">yarn\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Cp>Kalau belum punya, kalian bisa langsung mampir ke panduan \u003Ca href=\"https://docs.npmjs.com/downloading-and-installing-node-js-and-npm\">install Node.js\u003C/a> buat pasang dulu.\u003C/p>\n\u003Cp>Biar makin yakin kalau semuanya udah terpasang dengan bener, coba jalankan perintah ini di terminal untuk mengecek versinya.\u003C/p>\n\u003Cp>Mengecek versi \u003Cem>Node.js\u003C/em>:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">BASH\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%24%20node%20-v%0Av14.16.0\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">$\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> node\u003C/span>\u003Cspan style=\"color:#79B8FF\"> -v\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">v14.16.0\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Mengecek versi \u003Cem>npm\u003C/em>:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">BASH\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%24%20npm%20-v%0A7.15.0\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">$\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> npm\u003C/span>\u003Cspan style=\"color:#79B8FF\"> -v\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">7.15.0\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Kalau terminal udah menampilkan nomor versi kayak di atas, berarti kalian udah aman buat lanjut ke langkah berikutnya.\u003C/p>\n\u003Ch2 id=\"inisialisasi-proyek-node-js\">Inisialisasi Proyek Node.js\u003C/h2>\n\u003Cp>Pertama-tama, buka terminal kalian terus bikin folder baru khusus buat proyek ini, lalu langsung masuk ke dalamnya.\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"mkdir%20typenode%20%26%26%20cd%20typenode\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">mkdir\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> typenode\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> && \u003C/span>\u003Cspan style=\"color:#79B8FF\">cd\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> typenode\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Setelah itu, kita inisialisasi file \u003Ccode>package.json\u003C/code> menggunakan perintah \u003Ccode>npm init\u003C/code>.\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"npm%20init%20-y\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> init\u003C/span>\u003Cspan style=\"color:#79B8FF\"> -y\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Sekarang, mari kita buat \u003Cem>server\u003C/em> sederhana menggunakan \u003Cem>Express\u003C/em> versi \u003Cem>JavaScript\u003C/em> biasa dulu buat memastikan semuanya berjalan normal. Buat sebuah file baru bernama \u003Ccode>main.js\u003C/code> di dalam direktori utama proyek, lalu tulis kode berikut (boleh langsung disalin aja biar cepet, hehe):\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">JAVASCRIPT\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"const%20express%20%3D%20require(%22express%22)%3B%0A%0Afunction%20main()%7B%0A%20%20const%20app%20%3D%20express()%3B%0A%20%20const%20port%20%3D%208080%3B%0A%0A%20%20%2F%2F%20endpoint%20sederhana%20untuk%20menampilkan%20teks%20'Hello%20Express%20Node.js'%0A%20%20app.get(%22%2F%22%2C%20(req%2C%20res)%20%3D%3E%20res.send(%22Hello%20Express%20Node.js%22))%3B%0A%0A%20%20%2F%2F%20mulai%20server%20express%0A%20%20app.listen(port%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20console.log(%60%5Bserver%5D%20server%20dimulai%20di%20http%3A%2F%2Flocalhost%3A%24%7Bport%7D%20%E2%9A%A1%60)%3B%0A%20%20%7D)%3B%0A%7D%0A%0Amain()%3B\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> express\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> require\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"express\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">function\u003C/span>\u003Cspan style=\"color:#B392F0\"> main\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(){\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> app\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> express\u003C/span>\u003Cspan style=\"color:#E1E4E8\">();\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> port\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#79B8FF\"> 8080\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">  // endpoint sederhana untuk menampilkan teks 'Hello Express Node.js'\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  app.\u003C/span>\u003Cspan style=\"color:#B392F0\">get\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"/\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, (\u003C/span>\u003Cspan style=\"color:#FFAB70\">req\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#FFAB70\">res\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> res.\u003C/span>\u003Cspan style=\"color:#B392F0\">send\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Hello Express Node.js\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">));\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">  // mulai server express\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  app.\u003C/span>\u003Cspan style=\"color:#B392F0\">listen\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(port, () \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    console.\u003C/span>\u003Cspan style=\"color:#B392F0\">log\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">`[server] server dimulai di http://localhost:${\u003C/span>\u003Cspan style=\"color:#E1E4E8\">port\u003C/span>\u003Cspan style=\"color:#9ECBFF\">} ⚡`\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  });\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">main\u003C/span>\u003Cspan style=\"color:#E1E4E8\">();\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Sebelum kodenya dijalankan, tentu kita harus memasang \u003Cem>library\u003C/em> \u003Ccode>express\u003C/code> terlebih dahulu agar tidak terjadi \u003Cem>error\u003C/em>.\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%23%20dengan%20npm%0Anpm%20install%20express%0A%0A%23%20dengan%20yarn%0Ayarn%20add%20express\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan npm\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> express\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan yarn\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> add\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> express\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Setelah proses instalasi selesai, sekarang saatnya kita jalankan \u003Cem>server\u003C/em> tersebut.\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"node%20main.js\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">node\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> main.js\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Jika sukses tanpa kendala, kalian bakal melihat pesan sukses di terminal kalian:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">TEXT\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%5Bserver%5D%20server%20dimulai%20di%20http%3A%2F%2Flocalhost%3A8080%20%E2%9A%A1\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\">\u003Ccode>[server] server dimulai di http://localhost:8080 ⚡\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Kalian bisa membuka \u003Cem>browser\u003C/em> kesayangan lalu kunjungi \u003Ccode>http://localhost:8080\u003C/code> buat melihat hasilnya langsung. Kalau udah muncul teksnya, selamat! Selanjutnya kita bakal mulai meracik bagian \u003Cem>TypeScript\u003C/em>-nya.\u003C/p>\n\u003Ch2 id=\"menambahkan-typescript-ke-proyek\">Menambahkan TypeScript ke Proyek\u003C/h2>\n\u003Cp>Untuk mulai menggunakan \u003Cem>TypeScript\u003C/em>, kita butuh dua dependensi utama tambahan:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode>typescript\u003C/code>: Ini adalah \u003Cem>library\u003C/em> inti yang bertugas mengubah (melakukan kompilasi) kode \u003Cem>TypeScript\u003C/em> menjadi kode \u003Cem>JavaScript\u003C/em> standar yang dipahami oleh \u003Cem>Node.js\u003C/em>.\u003C/li>\n\u003Cli>\u003Ccode>ts-node\u003C/code>: Alat bantu yang super berguna agar kita bisa langsung menjalankan file \u003Cem>TypeScript\u003C/em> di lingkungan \u003Cem>Node.js\u003C/em> tanpa perlu melakukan kompilasi secara manual pas masa pengembangan (\u003Cem>development\u003C/em>).\u003C/li>\n\u003C/ul>\n\u003Cp>Silakan jalankan perintah berikut di terminal buat memasang keduanya:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%23%20dengan%20npm%0Anpm%20install%20typescript%20ts-node%20--save-dev%0A%0A%23%20dengan%20yarn%0Ayarn%20add%20-D%20typescript%20ts-node\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan npm\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> typescript\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> ts-node\u003C/span>\u003Cspan style=\"color:#79B8FF\"> --save-dev\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan yarn\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> add\u003C/span>\u003Cspan style=\"color:#79B8FF\"> -D\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> typescript\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> ts-node\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Sebagai catatan, bendera \u003Ccode>--save-dev\u003C/code> pada \u003Cem>npm\u003C/em> atau \u003Ccode>-D\u003C/code> pada \u003Cem>yarn\u003C/em> digunakan untuk memasukkan dependensi ini ke bagian \u003Ccode>devDependencies\u003C/code> di file \u003Ccode>package.json\u003C/code>. Soalnya, kita cuma butuh \u003Cem>tools\u003C/em> ini pas masa \u003Cem>development\u003C/em> aja, \u003Cem>nggak\u003C/em> usah dibawa ke lingkungan \u003Cem>production\u003C/em>.\u003C/p>\n\u003Cp>Setelah proses \u003Cem>install\u003C/em> selesai, kita perlu membuat file konfigurasi untuk \u003Cem>compiler TypeScript\u003C/em>-nya. Buatlah file bernama \u003Ccode>tsconfig.json\u003C/code> di \u003Cem>root directory\u003C/em> proyek kalian, lalu isi dengan konfigurasi di bawah ini:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">JSON\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%7B%0A%20%20%20%20%22compilerOptions%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22module%22%3A%20%22commonjs%22%2C%0A%20%20%20%20%20%20%20%20%22esModuleInterop%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%22target%22%3A%20%22es5%22%2C%0A%20%20%20%20%20%20%20%20%22outDir%22%3A%20%22build%22%2C%0A%20%20%20%20%20%20%20%20%22rootDir%22%3A%20%22src%22%2C%0A%20%20%20%20%20%20%20%20%22baseUrl%22%3A%20%22.%22%2C%0A%20%20%20%20%20%20%20%20%22strict%22%3A%20true%0A%20%20%20%20%7D%0A%7D\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">{\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"compilerOptions\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"module\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"commonjs\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"esModuleInterop\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">true\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"target\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"es5\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"outDir\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"build\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"rootDir\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"src\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"baseUrl\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\".\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"strict\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#79B8FF\">true\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Biar \u003Cem>nggak\u003C/em> bingung, ini sedikit penjelasan tentang opsi-opsi konfigurasi di atas:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode>module\u003C/code>: Menentukan format modul hasil kompilasi. Buat aplikasi \u003Cem>server\u003C/em> atau \u003Cem>back-end\u003C/em>, format \u003Ccode>commonjs\u003C/code> adalah pilihan standar yang paling aman.\u003C/li>\n\u003Cli>\u003Ccode>target\u003C/code>: Menentukan versi \u003Cem>JavaScript\u003C/em> keluaran hasil kompilasi. Di sini kita pilih \u003Ccode>es5\u003C/code> agar kompatibel dengan lingkungan \u003Cem>runtime\u003C/em> yang lebih lama.\u003C/li>\n\u003Cli>\u003Ccode>outDir\u003C/code>: Folder tujuan untuk menampung file-file \u003Cem>JavaScript\u003C/em> hasil kompilasi. Kita arahkan ke folder \u003Ccode>build\u003C/code>.\u003C/li>\n\u003Cli>\u003Ccode>rootDir\u003C/code>: Folder utama tempat kita menyimpan semua file sumber \u003Cem>TypeScript\u003C/em> kita. Kita atur ke folder \u003Ccode>src\u003C/code>.\u003C/li>\n\u003Cli>\u003Ccode>baseUrl\u003C/code>: Path dasar yang digunakan buat menyelesaikan impor modul \u003Cem>non-relative\u003C/em>.\u003C/li>\n\u003C/ul>\n\u003Cp>Untuk dokumentasi lengkap mengenai opsi konfigurasi lainnya, kalian bisa langsung meluncur ke \u003Ca href=\"https://www.typescriptlang.org/tsconfig\">dokumentasi resmi tsconfig\u003C/a>.\u003C/p>\n\u003Cp>Selanjutnya, kita perlu memperbarui bagian \u003Ccode>scripts\u003C/code> di dalam file \u003Ccode>package.json\u003C/code> agar mempermudah proses menjalankan dan membangun aplikasi. Ubah isinya menjadi seperti ini:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">JSON\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%7B%0A%20%20%22name%22%3A%20%22typenode%22%2C%0A%20%20%22version%22%3A%20%221.0.0%22%2C%0A%20%20%22description%22%3A%20%22%22%2C%0A%20%20%22main%22%3A%20%22index.js%22%2C%0A%20%20%22scripts%22%3A%20%7B%0A%20%20%20%20%22test%22%3A%20%22echo%20%5C%22Error%3A%20no%20test%20specified%5C%22%20%26%26%20exit%201%22%2C%0A%20%20%20%20%22build%22%3A%20%22tsc%22%2C%0A%20%20%20%20%22serve%22%3A%20%22node%20.%2Fbuild%2Fmain.js%22%2C%0A%20%20%20%20%22dev%22%3A%20%22ts-node%20.%2Fsrc%2Fmain.ts%22%0A%20%20%7D%2C%0A%20%20%22keywords%22%3A%20%5B%5D%2C%0A%20%20%22author%22%3A%20%22%22%2C%0A%20%20%22license%22%3A%20%22ISC%22%2C%0A%20%20%22dependencies%22%3A%20%7B%0A%20%20%20%20%22express%22%3A%20%22%5E4.17.1%22%0A%20%20%7D%2C%0A%20%20%22devDependencies%22%3A%20%7B%0A%20%20%20%20%22typescript%22%3A%20%22%5E4.3.2%22%2C%0A%20%20%20%20%22ts-node%22%3A%20%22%5E10.0.0%22%0A%20%20%7D%0A%7D\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">{\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"name\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"typenode\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"version\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"1.0.0\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"description\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"main\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"index.js\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"scripts\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"test\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"echo \u003C/span>\u003Cspan style=\"color:#79B8FF\">\\\"\u003C/span>\u003Cspan style=\"color:#9ECBFF\">Error: no test specified\u003C/span>\u003Cspan style=\"color:#79B8FF\">\\\"\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> && exit 1\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"build\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"tsc\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"serve\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"node ./build/main.js\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"dev\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ts-node ./src/main.ts\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"keywords\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: [],\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"author\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"license\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"ISC\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"dependencies\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"express\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"^4.17.1\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"devDependencies\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"typescript\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"^4.3.2\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"ts-node\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"^10.0.0\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  }\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Ch2 id=\"membuat-server-dengan-typescript\">Membuat Server dengan TypeScript\u003C/h2>\n\u003Cp>Langkah konfigurasi udah hampir selesai, nih! Tapi sebelum mulai memindahkan kode, kita butuh dua paket lagi yang berisi definisi tipe (\u003Cem>type definitions\u003C/em>):\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode>@types/node\u003C/code>: Menyediakan definisi tipe untuk objek bawaan \u003Cem>Node.js\u003C/em>.\u003C/li>\n\u003Cli>\u003Ccode>@types/express\u003C/code>: Menyediakan definisi tipe untuk \u003Cem>Express\u003C/em>.\u003C/li>\n\u003C/ul>\n\u003Cp>Jalankan perintah ini di terminal buat memasangnya:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%23%20dengan%20npm%0Anpm%20install%20%40types%2Fnode%20%40types%2Fexpress%20--save-dev%0A%0A%23%20dengan%20yarn%0Ayarn%20add%20-D%20%40types%2Fnode%20%40types%2Fexpress\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan npm\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @types/node\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @types/express\u003C/span>\u003Cspan style=\"color:#79B8FF\"> --save-dev\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan yarn\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> add\u003C/span>\u003Cspan style=\"color:#79B8FF\"> -D\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @types/node\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> @types/express\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Karena \u003Cem>TypeScript\u003C/em> menggunakan sistem tipe statis (\u003Cem>static typing\u003C/em>), paket-paket tipe ini penting banget biar \u003Cem>compiler\u003C/em> tahu tipe data apa saja yang sah digunakan pada tiap objek. Menariknya, kalau kalian pakai \u003Cem>Visual Studio Code\u003C/em>, paket tipe ini bakal mengaktifkan fitur \u003Cem>code completion\u003C/em> dan \u003Cem>IntelliSense\u003C/em> yang canggih banget. Menulis kode jadi lebih terbantu dan cepat! 😎\u003C/p>\n\u003Cp>Sekarang, mari kita rapikan struktur direktori kita. Buat sebuah folder baru bernama \u003Ccode>src\u003C/code> untuk menampung seluruh kode \u003Cem>TypeScript\u003C/em> yang akan kita buat.\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"mkdir%20src\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">mkdir\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> src\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Setelah foldernya dibuat, pindahkan file \u003Ccode>main.js\u003C/code> yang kita buat tadi ke dalam folder \u003Ccode>src\u003C/code>, lalu ubah ekstensinya menjadi \u003Ccode>main.ts\u003C/code>.\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"mv%20main.js%20src%2Fmain.ts\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">mv\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> main.js\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> src/main.ts\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Sekarang, struktur direktori proyek kalian bakal terlihat rapi kayak gini:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">TEXT\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\".%0A%E2%94%9C%E2%94%80%E2%94%80%20tsconfig.json%0A%E2%94%9C%E2%94%80%E2%94%80%20src%0A%E2%94%82%20%20%20%E2%94%94%E2%94%80%E2%94%80%20main.ts%0A%E2%94%9C%E2%94%80%E2%94%80%20node_modules%0A%E2%94%9C%E2%94%80%E2%94%80%20package.json%0A%E2%94%94%E2%94%80%E2%94%80%20package-lock.json\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\">\u003Ccode>.\n├── tsconfig.json\n├── src\n│   └── main.ts\n├── node_modules\n├── package.json\n└── package-lock.json\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Buka file \u003Ccode>src/main.ts\u003C/code> di editor kalian, lalu ubah kodenya menggunakan sintaks \u003Cem>TypeScript\u003C/em> modern kayak di bawah ini:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">TYPESCRIPT\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"import%20express%20from%20%22express%22%3B%0A%0Afunction%20main()%7B%0A%20%20const%20app%20%3D%20express()%3B%0A%20%20const%20port%20%3D%208080%3B%0A%0A%20%20%2F%2F%20endpoint%20sederhana%20untuk%20menampilkan%20teks%20'Hello%20Express%20TS'%0A%20%20app.get(%22%2F%22%2C%20(req%2C%20res)%20%3D%3E%20res.send(%22Express%20%2B%20Typescript%20%2B%20NodeJS%20%3D%20%F0%9F%98%8D%22))%3B%0A%0A%20%20%2F%2F%20mulai%20server%20express%0A%20%20app.listen(port%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20console.log(%60%5Bserver%5D%20server%20dimulai%20di%20http%3A%2F%2Flocalhost%3A%24%7Bport%7D%20%E2%9A%A1%60)%3B%0A%20%20%7D)%3B%0A%7D%0A%0Amain()%3B\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> express \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> \"express\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">function\u003C/span>\u003Cspan style=\"color:#B392F0\"> main\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(){\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> app\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> express\u003C/span>\u003Cspan style=\"color:#E1E4E8\">();\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> port\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#79B8FF\"> 8080\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">  // endpoint sederhana untuk menampilkan teks 'Hello Express TS'\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  app.\u003C/span>\u003Cspan style=\"color:#B392F0\">get\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"/\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, (\u003C/span>\u003Cspan style=\"color:#FFAB70\">req\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#FFAB70\">res\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> res.\u003C/span>\u003Cspan style=\"color:#B392F0\">send\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Express + Typescript + NodeJS = 😍\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">));\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">  // mulai server express\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  app.\u003C/span>\u003Cspan style=\"color:#B392F0\">listen\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(port, () \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    console.\u003C/span>\u003Cspan style=\"color:#B392F0\">log\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">`[server] server dimulai di http://localhost:${\u003C/span>\u003Cspan style=\"color:#E1E4E8\">port\u003C/span>\u003Cspan style=\"color:#9ECBFF\">} ⚡`\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  });\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">main\u003C/span>\u003Cspan style=\"color:#E1E4E8\">();\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Nah, sekarang saatnya kita coba jalankan aplikasi \u003Cem>TypeScript\u003C/em> ini. Cukup jalankan perintah berikut di terminal:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"npm%20run%20dev\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> run\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> dev\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Jika konfigurasinya udah bener, kalian bakal melihat output sukses yang sama seperti sebelumnya. Sekarang \u003Cem>server\u003C/em> kalian udah berjalan lancar menggunakan \u003Cem>TypeScript\u003C/em> di latar belakang! Ingat ya, ke depannya selalu simpan file baru kalian di dalam folder \u003Ccode>src\u003C/code>.\u003C/p>\n\u003Ch2 id=\"kompilasi-typescript-ke-javascript\">Kompilasi TypeScript ke JavaScript\u003C/h2>\n\u003Cp>Setelah asyik koding pakai \u003Cem>TypeScript\u003C/em>, ada satu langkah penting sebelum kalian mempublikasikan aplikasi ini ke lingkungan produksi (\u003Cem>production\u003C/em>), yaitu kompilasi.\u003C/p>\n\u003Cp>\u003Cem>Node.js\u003C/em> secara bawaan \u003Cem>nggak\u003C/em> bisa menjalankan file \u003Cem>TypeScript\u003C/em> secara langsung. Makanya kita perlu mengubah semua file di folder \u003Ccode>src\u003C/code> menjadi kode \u003Cem>JavaScript\u003C/em> biasa agar kinerjanya tetap cepat dan optimal.\u003C/p>\n\u003Cp>Untuk melakukan proses kompilasi ini, jalankan perintah:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"npm%20run%20build\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> run\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> build\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Setelah perintah selesai berjalan, kalian bakal menemukan folder baru bernama \u003Ccode>build\u003C/code> yang berisi file \u003Ccode>main.js\u003C/code>. Isi file hasil kompilasi tersebut bakal terlihat seperti ini:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">JAVASCRIPT\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%22use%20strict%22%3B%0Avar%20__importDefault%20%3D%20(this%20%26%26%20this.__importDefault)%20%7C%7C%20function%20(mod)%20%7B%0A%20%20%20%20return%20(mod%20%26%26%20mod.__esModule)%20%3F%20mod%20%3A%20%7B%20%22default%22%3A%20mod%20%7D%3B%0A%7D%3B%0AObject.defineProperty(exports%2C%20%22__esModule%22%2C%20%7B%20value%3A%20true%20%7D)%3B%0Avar%20express_1%20%3D%20__importDefault(require(%22express%22))%3B%0Afunction%20main()%20%7B%0A%20%20%20%20var%20app%20%3D%20express_1.default()%3B%0A%20%20%20%20var%20port%20%3D%208080%3B%0A%20%20%20%20%2F%2F%20endpoint%20sederhana%20untuk%20menampilkan%20teks%0A%20%20%20%20app.get(%22%2F%22%2C%20function%20(req%2C%20res)%20%7B%20return%20res.send(%22Express%20%2B%20Typescript%20%2B%20NodeJS%20%3D%20%F0%9F%98%8D%22)%3B%20%7D)%3B%0A%20%20%20%20%2F%2F%20mulai%20server%20express%0A%20%20%20%20app.listen(port%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20console.log(%22%5Bserver%5D%20server%20dimulai%20di%20http%3A%2F%2Flocalhost%3A%22%20%2B%20port%20%2B%20%22%20%E2%9A%A1%22)%3B%0A%20%20%20%20%7D)%3B%0A%7D%0Amain()%3B\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">\"use strict\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">var\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> __importDefault \u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (\u003C/span>\u003Cspan style=\"color:#79B8FF\">this\u003C/span>\u003Cspan style=\"color:#F97583\"> &&\u003C/span>\u003Cspan style=\"color:#79B8FF\"> this\u003C/span>\u003Cspan style=\"color:#E1E4E8\">.__importDefault) \u003C/span>\u003Cspan style=\"color:#F97583\">||\u003C/span>\u003Cspan style=\"color:#F97583\"> function\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (\u003C/span>\u003Cspan style=\"color:#FFAB70\">mod\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    return\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (mod \u003C/span>\u003Cspan style=\"color:#F97583\">&&\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> mod.__esModule) \u003C/span>\u003Cspan style=\"color:#F97583\">?\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> mod \u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"default\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: mod };\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">Object.\u003C/span>\u003Cspan style=\"color:#B392F0\">defineProperty\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#79B8FF\">exports\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"__esModule\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, { value: \u003C/span>\u003Cspan style=\"color:#79B8FF\">true\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> });\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">var\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> express_1 \u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#B392F0\"> __importDefault\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#B392F0\">require\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"express\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">));\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">function\u003C/span>\u003Cspan style=\"color:#B392F0\"> main\u003C/span>\u003Cspan style=\"color:#E1E4E8\">() {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    var\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> app \u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> express_1.\u003C/span>\u003Cspan style=\"color:#B392F0\">default\u003C/span>\u003Cspan style=\"color:#E1E4E8\">();\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    var\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> port \u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#79B8FF\"> 8080\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    // endpoint sederhana untuk menampilkan teks\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    app.\u003C/span>\u003Cspan style=\"color:#B392F0\">get\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"/\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#F97583\">function\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (\u003C/span>\u003Cspan style=\"color:#FFAB70\">req\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#FFAB70\">res\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) { \u003C/span>\u003Cspan style=\"color:#F97583\">return\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> res.\u003C/span>\u003Cspan style=\"color:#B392F0\">send\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Express + Typescript + NodeJS = 😍\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">); });\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    // mulai server express\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    app.\u003C/span>\u003Cspan style=\"color:#B392F0\">listen\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(port, \u003C/span>\u003Cspan style=\"color:#F97583\">function\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> () {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        console.\u003C/span>\u003Cspan style=\"color:#B392F0\">log\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"[server] server dimulai di http://localhost:\"\u003C/span>\u003Cspan style=\"color:#F97583\"> +\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> port \u003C/span>\u003Cspan style=\"color:#F97583\">+\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> \" ⚡\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    });\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">main\u003C/span>\u003Cspan style=\"color:#E1E4E8\">();\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Bisa kalian lihat, semua sintaks modern kayak \u003Cem>arrow functions\u003C/em> telah diubah menjadi fungsi biasa (\u003Cem>anonymous function\u003C/em>) dan variabel diubah menjadi \u003Ccode>var\u003C/code>. Hal ini dikarenakan target compiler kita atur ke \u003Ccode>es5\u003C/code> di file \u003Ccode>tsconfig.json\u003C/code>. Kalau kalian pengen hasil yang lebih modern, kalian bisa mengubah nilai \u003Ccode>target\u003C/code> tersebut ke \u003Ccode>es6\u003C/code> atau versi yang lebih baru.\u003C/p>\n\u003Cp>Terakhir, buat menjalankan kode versi \u003Cem>production\u003C/em> yang udah dicompile tadi, jalankan perintah berikut:\u003C/p>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black/40 inline-block\">\u003C/span>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C/span>\n    \u003C/div>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"npm%20run%20serve\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C/path>\n      \u003C/svg>\n      \u003Cspan class=\"copy-text\">Copy\u003C/span>\n    \u003C/button>\n  \u003C/div>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> run\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> serve\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Ch2 id=\"versi-cepat-tl-dr\">Versi Cepat (TL;DR)\u003C/h2>\n\u003Cp>Buat kalian yang lagi buru-buru atau pengen langsung melihat hasil jadinya tanpa perlu mengetik satu-satu dari awal, tenang aja. Kalian bisa langsung clone atau salin kode lengkapnya dari repositori \u003Ca href=\"https://github.com/izzudd/kode-kode-invasikode/tree/main/typescript-node-express\">GitHub\u003C/a>.\u003C/p>\n\u003Cp>Setelah disalin, kalian tinggal jalankan perintah \u003Ccode>npm install\u003C/code> di terminal komputer kalian buat memasang semua dependensinya, dan proyek pun siap dijalankan!\u003C/p>\n\u003Cp>Catatan kecil, file \u003Ccode>package-lock.json\u003C/code> \u003Cem>nggak\u003C/em> perlu ikut disalin ya.\u003C/p>\n\u003Cp>Selamat mencoba dan bereksperimen dengan \u003Cem>TypeScript\u003C/em>! Semoga sukses kodingnya! 😁\u003C/p>\n","\u003Cul>\n\u003Cli>TypeScript memberikan fitur static typing dan autocompletion yang membuat penulisan kode di Node.js jadi lebih aman dan minim bug.\u003C/li>\n\u003Cli>Package ts-node mempermudah kita menjalankan file TypeScript secara langsung tanpa perlu dicompile manual selama masa development.\u003C/li>\n\u003Cli>Untuk production, file TypeScript wajib dicompile ke JavaScript biasa agar kinerjanya optimal dan kompatibel dengan Node.js.\u003C/li>\n\u003C/ul>\n",[411,414,417,425],{"id":315,"title":316,"slug":317,"excerpt":318,"thumbnail_image":412,"tags":413},{"id":320},[322,323,324,325,326],{"id":79,"title":80,"slug":81,"excerpt":82,"thumbnail_image":415,"tags":416},{"id":84},[70,77,86,87,88,89,90],{"id":418,"title":419,"slug":420,"excerpt":421,"thumbnail_image":422,"tags":424},"44","Transactional Outbox Pattern: Solusi Konsistensi Database dan Message Broker Tanpa 2PC","transactional-outbox-pattern-konsistensi-database-message-broker","Pernah nggak kalian lihat pesanan udah masuk database, tapi email konfirmasinya nggak pernah kekirim? Itu gejala *dual-write problem*. Yuk, kita bedah Transactional Outbox Pattern biar data dan *event* kalian nggak lagi berselisih paham!",{"id":423},"e3c617fd-1486-4b82-b937-94fbec846c77",[70,115,89,126,114,77,127],{"id":426,"title":427,"slug":428,"excerpt":429,"thumbnail_image":430,"tags":432},"43","Dead Letter Queue (DLQ) & Retry Policy: Menyelamatkan Pesan Nyasar di RabbitMQ Tanpa Bikin Worker Macet","dead-letter-queue-retry-policy-rabbitmq-resilient-messaging","Pernah nggak sih, *worker* kalian nolak satu pesan terus-terusan sampai CPU melonjak 100%? Itu namanya *poison message loop*, jebakan klasik di RabbitMQ. Yuk, kita bahas cara pasang *retry policy* dan *dead letter queue* yang bener!",{"id":431},"6c0a7ead-4841-4073-b29e-df7ae0f2aa3c",[113,114,70,89,115,116,274],[434,438,441,444,447,450],{"text":435,"depth":436,"id":437},"Persiapan",2,"persiapan",{"text":439,"depth":436,"id":440},"Inisialisasi Proyek Node.js","inisialisasi-proyek-node-js",{"text":442,"depth":436,"id":443},"Menambahkan TypeScript ke Proyek","menambahkan-typescript-ke-proyek",{"text":445,"depth":436,"id":446},"Membuat Server dengan TypeScript","membuat-server-dengan-typescript",{"text":448,"depth":436,"id":449},"Kompilasi TypeScript ke JavaScript","kompilasi-typescript-ke-javascript",{"text":451,"depth":436,"id":452},"Versi Cepat (TL;DR)","versi-cepat-tl-dr",1791045070987]