[{"data":1,"prerenderedAt":444},["ShallowReactive",2],{"site-header":3,"site-footer-license":37,"article-typescript-javascript-dengan-gaya-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":54,"takeway":55,"body":56,"authors":57,"series":58},"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!","2026-06-15T02:39:25.712Z",{"id":49},"f615bb1f-8e36-4d6c-9c2c-f1629407173c",[51,52,53],"typescript","javascript","web-development",null,"- TypeScript adalah superset dari JavaScript yang menambahkan fitur optional static typing untuk meminimalisir bug.\n- Kode TypeScript akan dikompilasi menjadi JavaScript standar agar bisa dijalankan di browser maupun Node.js.\n- Fitur static type sangat membantu meningkatkan Developer Experience (DX) lewat auto-completion dan verifikasi error sejak dini.","JavaScript bener-bener jadi salah satu bahasa pemrograman paling populer di dunia saat ini. Kemampuannya yang bisa dipakai di sisi server maupun *client* secara bersamaan menjadi salah satu faktor utama kenapa bahasa ini dicintai banyak developer.\n\nGaya penulisan dinamis alias *dynamic typing* juga jadi keunggulan tersendiri buat JavaScript. Soalnya, kita sebagai programmer bisa menulis kode secara ekspresif tanpa perlu pusing-pusing memikirkan deklarasi tipe data sejak awal.\n\nTapi, kebebasan itu kadang malah berbalik jadi musuh utama pas kode yang kita tulis sudah mulai membesar dan kompleks. Kalau nggak teliti, tumpukan kode yang rumit itu rentan banget memicu *runtime error*. Salah satu error yang paling sering bikin senam jantung yaitu:\n\n```\nUncaught TypeError: Cannot read properties of undefined (reading 'val')\n    at :1:5\n```\n\nNah, di saat-saat kritis seperti inilah fitur *static typing* dan *type checking* bakal terasa sangat berharga. Oleh karena itu, hadirlah TypeScript sebagai alternatif penyelamat JavaScript dengan sedikit gaya! 😎\n\n## Tentang TypeScript\n\nSederhananya, TypeScript adalah *superset* dari JavaScript. Artinya, TypeScript membawa semua fitur bawaan JavaScript, tapi ditambah dengan fitur-fitur ekstra yang *powerful*. Fitur utamanya meliputi *optional static typing*, *type checking*, *class*, dan *interface*.\n\n> TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.\n>\n> ~ [typescriptlang.org](https://www.typescriptlang.org/)\n\nKode TypeScript yang kita tulis nantinya nggak bisa langsung dijalankan begitu saja. Komputer harus menerjemahkan (*compile*) kode tersebut menjadi JavaScript standar terlebih dahulu, karena browser maupun Node.js cuma paham JavaScript biasa.\n\nKerennya lagi, karena sifatnya yang kompatibel ke belakang, kalian tetap bisa menuliskan kode JavaScript murni di dalam berkas TypeScript. Tapi ingat ya, hal ini nggak berlaku sebaliknya.\n\nFitur andalan TypeScript tentu saja adalah kemampuannya menambahkan tipe data (*type*) ke dalam JavaScript. Tipe data ini adalah properti wajib yang harus melekat pada setiap data yang kita definisikan.\n\nEntah itu pada variabel, fungsi, parameter, atau objek lainnya. Kalau nggak pakai fitur tipe data ini, kode TypeScript yang kalian tulis bakal balik lagi jadi JavaScript biasa. Melalui proses transpilasi, anotasi tipe tersebut akan dihapus hingga menyisakan kode JavaScript murni yang siap dieksekusi.\n\n> 📷 *Ilustrasi: diagram proses kompilasi kode TypeScript dengan anotasi tipe data menjadi kode JavaScript standar.*\n\n## Kenapa Harus Pakai TypeScript?\n\nKalau ditanya kapan dan kenapa kalian harus beralih ke TypeScript, jawabannya kembali ke kebutuhan masing-masing. Semua tergantung skala proyek dan preferensi kalian sendiri.\n\nTapi secara umum, TypeScript sangat disarankan buat proyek skala menengah ke atas yang kodenya bakal terus berkembang. Kalau cuma buat proyek kecil-kecilan atau sekadar eksperimen singkat, pakai JavaScript biasa pun sebenarnya sudah cukup kok.\n\nBuktinya, banyak *framework* web modern seperti Angular, Vue v3, Nuxt 3, dan NestJS yang ditulis memakai TypeScript. Alasan utamanya apalagi kalau bukan sistem *static type* yang ampuh menekan potensi *runtime error* di lingkungan produksi.\n\nSelain itu, pengembangan sisi *back-end* (server) di ekosistem Node.js sekarang juga sudah lumrah menggunakan TypeScript. Bahkan, ada Deno yang mendukung TypeScript secara bawaan (*native*) tanpa konfigurasi tambahan.\n\nMasih butuh alasan lain buat mencoba TypeScript? Berikut beberapa keuntungan menarik lainnya:\n\n* ***Self-documented code*** — Kehadiran tipe data di setiap variabel dan parameter fungsi secara otomatis mendokumentasikan maksud dari kode tersebut. Kita nggak perlu menebak-nebak tipe data apa yang harus dikirim ke sebuah fungsi.\n* **Deteksi error sejak dini** — Kode TypeScript wajib melewati proses kompilasi terlebih dahulu. Di fase inilah *compiler* bakal menyaring dan menunjukkan letak error agar bisa langsung kalian perbaiki sebelum aplikasi di-deploy. Selamat tinggal *runtime error*! 👋\n* **Dukungan *Functional Programming*** — Sama seperti JavaScript, TypeScript juga mendukung gaya pemrograman fungsional secara penuh.\n* **Pemrograman Berorientasi Objek (OOP) yang matang** — Konsep seperti *abstraction*, *encapsulation*, *inheritance*, dan *polymorphism* bisa kalian terapkan dengan rapi tanpa perlu trik atau *hack* aneh-aneh lagi.\n* **Memaksimalkan fitur Editor** — Ini bagian favorit saya. Fitur-fitur keren seperti *auto-completion*, sugerensi kode, *error checking*, dan *IntelliSense* bakal menyala maksimal di *code editor* kesayangan kalian.\n* ***Developer Experience* (DX) yang memuaskan** — Pengalaman menulis kode pakai TypeScript terasa jauh lebih menyenangkan. Kombinasi *IntelliSense* yang aktif dan jaminan kode yang lebih aman dari *runtime error* bikin proses koding jadi makin percaya diri.\n\n## Dari JavaScript ke TypeScript\n\nMari kita lihat contoh kasusnya. Kode JavaScript biasa kadang bisa membingungkan kalau dibaca pertama kali, terutama karena sifat dinamisnya. Apalagi kalau kita kurang teliti dalam menamai variabel atau fungsi—dan jujur saja, memberi nama yang pas itu memang sulit banget!\n\nCoba perhatikan cuplikan kode JavaScript di bawah ini:\n\n```javascript\nfunction add(a, b){\n    return a + b;\n}\n\nfunction fullName(firstName, lastName){\n    return firstName + \" \" + lastName;\n}\n```\n\nKita punya dua fungsi sederhana. Keduanya sama-sama menerima dua parameter, tapi tujuannya berbeda. Fungsi `add` dirancang buat menjumlahkan angka, sedangkan fungsi `fullName` dibuat buat menggabungkan nama depan dan belakang.\n\nSekarang, coba kita panggil kedua fungsi tersebut dengan cara yang agak 'ngawur':\n\n```javascript\nconsole.log(add(2, 4));                  // output 6\nconsole.log(add(\"inva\", \"sikode\"));      // output invasikode\nconsole.log(fullName(\"inva\", \"sikode\")); // output inva sikode\nconsole.log(fullName(2, 4));             // output 24\n```\n\nWalaupun kita memasukkan argumen yang salah target (`add(\"inva\", \"sikode\")` dan `fullName(2, 4)`), JavaScript nggak bakal protes dan tetap menjalankan kodenya karena secara sintaks memang dianggap valid.\n\nTapi perilaku seperti ini rawan memicu kekacauan logika di aplikasi kalian, terutama saat bekerja dengan tim besar.\n\nNah, TypeScript hadir buat menyelesaikan masalah ini dengan mendefinisikan jenis data apa saja yang boleh diterima oleh sebuah fungsi.\n\nSekarang mari kita ubah fungsi tadi menggunakan sintaks TypeScript:\n\n```typescript\nfunction add(a: number, b: number): number{\n    return a + b;\n}\n\nfunction fullName(firstName: string, lastName: string): string{\n    return firstName + \" \" + lastName;\n}\n```\n\nCukup dengan menambahkan keterangan tipe data dan mengubah ekstensi berkas dari `.js` menjadi `.ts`, fungsi kita sekarang sudah terproteksi dengan baik.\n\nJika kita mencoba memanggil fungsinya dengan parameter yang salah seperti sebelumnya:\n\n```typescript\nconsole.log(add(2, 4));                  // output 6\nconsole.log(add(\"inva\", \"sikode\"));      // error kompilasi!\nconsole.log(fullName(\"inva\", \"sikode\")); // output inva sikode\nconsole.log(fullName(2, 4));             // error kompilasi!\n```\n\nSaat kalian mencoba melakukan kompilasi, TypeScript bakal langsung menolak dan memunculkan pesan error. Bahkan, *code editor* seperti VS Code juga bakal langsung menandai baris yang salah dengan garis merah:\n\n```\nArgument of type 'string' is not assignable to parameter of type 'number'.\nArgument of type 'number' is not assignable to parameter of type 'string'.\n```\n\n> 📷 *Ilustrasi: peringatan galat tipe data di editor VS Code dengan garis bawah merah dan kotak pesan penjelasan error.*\n\nDengan begini, kita dipaksa buat menggunakan fungsi sesuai dengan aturan mainnya. Cara ini sangat efektif buat meminimalisir celah *bug* pada proyek yang kalian kembangkan.\n\nBagaimana? Tertarik buat mencoba TypeScript di proyek selanjutnya? Kalian bisa langsung meluncur ke situs resminya di [typescriptlang.org](https://www.typescriptlang.org/) buat belajar lebih lanjut.\n\nSelamat berkoding ria 👋",[],{"id":59,"title":8,"slug":9,"articles":60,"parent_series":54},"9",[61,77,90,100,111,124,136,147,159,170,181,191,201,212,221,231,242,252,255,266,277,288,296,305,314,327,336,347,358,368,377,386,396],{"id":62,"title":63,"slug":64,"excerpt":65,"thumbnail_image":66,"tags":68},"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":67},"03c9d1a0-c80a-401d-9f2b-2b3ee7abb115",[69,70,71,72,73,74,75,76],"backend","observa","logging","grafana","loki","vector","devops","system-design",{"id":78,"title":79,"slug":80,"excerpt":81,"thumbnail_image":82,"tags":84},"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":83},"0e0ed26d-20c6-443c-bde1-4a6200f6f801",[69,76,85,86,87,88,89],"rate-limiting","redis","api-gateway","architecture","traffict-management",{"id":91,"title":92,"slug":93,"excerpt":94,"thumbnail_image":95,"tags":97},"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!",{"id":96},"798b60f1-9ef5-4f73-8d43-85825fd86acc",[52,98,99,51],"nodejs","express",{"id":101,"title":102,"slug":103,"excerpt":104,"thumbnail_image":105,"tags":107},"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":106},"9c05d0ae-e829-4f1b-b9f7-a84f3e0439d3",[108,109,110],"pemrograman","concurrency","tips-coding",{"id":112,"title":113,"slug":114,"excerpt":115,"thumbnail_image":116,"tags":118},"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":117},"f6620f79-b3b2-4f9c-8104-283a335e06c4",[119,120,69,121,122,123],"rabbitmq","message-broker","microservices","async","queue",{"id":125,"title":126,"slug":127,"excerpt":128,"thumbnail_image":129,"tags":131},"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":130},"6f7a2d8c-2a37-4901-a522-50df8d9c0a20",[69,132,133,134,76,135],"database","postgresql","connection-pooling","performance",{"id":137,"title":138,"slug":139,"excerpt":140,"thumbnail_image":141,"tags":143},"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":142},"e119c6ad-fc37-4b92-abdc-3eb20f8e34b4",[69,144,145,146,119,86,122],"task-queue","celery","fastapi",{"id":148,"title":149,"slug":150,"excerpt":151,"thumbnail_image":152,"tags":154},"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":153},"34b94e14-3e9a-4778-9f1f-6df5898915fb",[132,155,156,157,158,135,69],"sql","orm","sqlalchemy","django",{"id":160,"title":161,"slug":162,"excerpt":163,"thumbnail_image":164,"tags":166},"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":165},"a368631c-f331-4c50-8322-1d0fc44927aa",[167,168,69,109,169,76],"golang","go","goroutine",{"id":171,"title":172,"slug":173,"excerpt":174,"thumbnail_image":175,"tags":177},"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":176},"ae27713e-5025-4d13-88b6-efb4860cc5b3",[178,179,180],"linux","windows","foss",{"id":182,"title":183,"slug":184,"excerpt":185,"thumbnail_image":186,"tags":188},"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":187},"18df5262-d813-43d1-b1f7-5595a7f53602",[52,189,190],"web","news",{"id":192,"title":193,"slug":194,"excerpt":195,"thumbnail_image":196,"tags":198},"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":197},"c5a8262b-43db-4479-8f6c-5a6a0d61653b",[199,179,200],"shell","powershell",{"id":202,"title":203,"slug":204,"excerpt":205,"thumbnail_image":206,"tags":208},"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":207},"99b01cc2-11ac-4449-9927-a1a7116347df",[209,210,211],"howto","java","editor",{"id":213,"title":214,"slug":215,"excerpt":216,"thumbnail_image":217,"tags":219},"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":218},"b5352a4b-f274-4489-aca9-36814947d514",[178,220],"distro",{"id":222,"title":223,"slug":224,"excerpt":225,"thumbnail_image":226,"tags":228},"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":227},"ff111270-80c2-4ccb-83d7-d5ab8c021201",[53,229,230],"frontend","framework",{"id":232,"title":233,"slug":234,"excerpt":235,"thumbnail_image":236,"tags":238},"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":237},"98e85e76-9e7b-42d1-b989-7c75e7f49abc",[239,240,241],"programming","types","comparison",{"id":243,"title":244,"slug":245,"excerpt":246,"thumbnail_image":247,"tags":249},"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":248},"d5e879fa-5cd0-4015-a155-b0cc69ff12fb",[250,251,53],"tailwind-css","css-framework",{"id":43,"title":44,"slug":45,"excerpt":46,"thumbnail_image":253,"tags":254},{"id":49},[51,52,53],{"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",[146,274,69,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",[69,285,286,121,287,76],"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",[69,132,109,133,76,88,155],{"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",[69,85,76,304,86,146],"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",[69,76,313,120,88],"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",[132,155,133,335,135,69],"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",[86,69,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,75,357,69],"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",[69,304,366,76,367,146,86],"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",[69,121,376,76,88],"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",[69,75,146,355,385,76,88],"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",[69,132,133,76,88,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",[69,404,405,406,121,88,407],"distributed-systems","observability","open-telemetry","tracing","\u003Cp>JavaScript bener-bener jadi salah satu bahasa pemrograman paling populer di dunia saat ini. Kemampuannya yang bisa dipakai di sisi server maupun \u003Cem>client\u003C/em> secara bersamaan menjadi salah satu faktor utama kenapa bahasa ini dicintai banyak developer.\u003C/p>\n\u003Cp>Gaya penulisan dinamis alias \u003Cem>dynamic typing\u003C/em> juga jadi keunggulan tersendiri buat JavaScript. Soalnya, kita sebagai programmer bisa menulis kode secara ekspresif tanpa perlu pusing-pusing memikirkan deklarasi tipe data sejak awal.\u003C/p>\n\u003Cp>Tapi, kebebasan itu kadang malah berbalik jadi musuh utama pas kode yang kita tulis sudah mulai membesar dan kompleks. Kalau nggak teliti, tumpukan kode yang rumit itu rentan banget memicu \u003Cem>runtime error\u003C/em>. Salah satu error yang paling sering bikin senam jantung yaitu:\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=\"Uncaught%20TypeError%3A%20Cannot%20read%20properties%20of%20undefined%20(reading%20'val')%0A%20%20%20%20at%20%3A1%3A5\" 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>Uncaught TypeError: Cannot read properties of undefined (reading 'val')\n    at :1:5\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Nah, di saat-saat kritis seperti inilah fitur \u003Cem>static typing\u003C/em> dan \u003Cem>type checking\u003C/em> bakal terasa sangat berharga. Oleh karena itu, hadirlah TypeScript sebagai alternatif penyelamat JavaScript dengan sedikit gaya! 😎\u003C/p>\n\u003Ch2 id=\"tentang-typescript\">Tentang TypeScript\u003C/h2>\n\u003Cp>Sederhananya, TypeScript adalah \u003Cem>superset\u003C/em> dari JavaScript. Artinya, TypeScript membawa semua fitur bawaan JavaScript, tapi ditambah dengan fitur-fitur ekstra yang \u003Cem>powerful\u003C/em>. Fitur utamanya meliputi \u003Cem>optional static typing\u003C/em>, \u003Cem>type checking\u003C/em>, \u003Cem>class\u003C/em>, dan \u003Cem>interface\u003C/em>.\u003C/p>\n\u003Cblockquote>\n\u003Cp>TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.\u003C/p>\n\u003Cp>~ \u003Ca href=\"https://www.typescriptlang.org/\">typescriptlang.org\u003C/a>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Kode TypeScript yang kita tulis nantinya nggak bisa langsung dijalankan begitu saja. Komputer harus menerjemahkan (\u003Cem>compile\u003C/em>) kode tersebut menjadi JavaScript standar terlebih dahulu, karena browser maupun Node.js cuma paham JavaScript biasa.\u003C/p>\n\u003Cp>Kerennya lagi, karena sifatnya yang kompatibel ke belakang, kalian tetap bisa menuliskan kode JavaScript murni di dalam berkas TypeScript. Tapi ingat ya, hal ini nggak berlaku sebaliknya.\u003C/p>\n\u003Cp>Fitur andalan TypeScript tentu saja adalah kemampuannya menambahkan tipe data (\u003Cem>type\u003C/em>) ke dalam JavaScript. Tipe data ini adalah properti wajib yang harus melekat pada setiap data yang kita definisikan.\u003C/p>\n\u003Cp>Entah itu pada variabel, fungsi, parameter, atau objek lainnya. Kalau nggak pakai fitur tipe data ini, kode TypeScript yang kalian tulis bakal balik lagi jadi JavaScript biasa. Melalui proses transpilasi, anotasi tipe tersebut akan dihapus hingga menyisakan kode JavaScript murni yang siap dieksekusi.\u003C/p>\n\u003Cblockquote>\n\u003Cp>📷 \u003Cem>Ilustrasi: diagram proses kompilasi kode TypeScript dengan anotasi tipe data menjadi kode JavaScript standar.\u003C/em>\u003C/p>\n\u003C/blockquote>\n\u003Ch2 id=\"kenapa-harus-pakai-typescript\">Kenapa Harus Pakai TypeScript?\u003C/h2>\n\u003Cp>Kalau ditanya kapan dan kenapa kalian harus beralih ke TypeScript, jawabannya kembali ke kebutuhan masing-masing. Semua tergantung skala proyek dan preferensi kalian sendiri.\u003C/p>\n\u003Cp>Tapi secara umum, TypeScript sangat disarankan buat proyek skala menengah ke atas yang kodenya bakal terus berkembang. Kalau cuma buat proyek kecil-kecilan atau sekadar eksperimen singkat, pakai JavaScript biasa pun sebenarnya sudah cukup kok.\u003C/p>\n\u003Cp>Buktinya, banyak \u003Cem>framework\u003C/em> web modern seperti Angular, Vue v3, Nuxt 3, dan NestJS yang ditulis memakai TypeScript. Alasan utamanya apalagi kalau bukan sistem \u003Cem>static type\u003C/em> yang ampuh menekan potensi \u003Cem>runtime error\u003C/em> di lingkungan produksi.\u003C/p>\n\u003Cp>Selain itu, pengembangan sisi \u003Cem>back-end\u003C/em> (server) di ekosistem Node.js sekarang juga sudah lumrah menggunakan TypeScript. Bahkan, ada Deno yang mendukung TypeScript secara bawaan (\u003Cem>native\u003C/em>) tanpa konfigurasi tambahan.\u003C/p>\n\u003Cp>Masih butuh alasan lain buat mencoba TypeScript? Berikut beberapa keuntungan menarik lainnya:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cem>\u003Cstrong>Self-documented code\u003C/strong>\u003C/em> — Kehadiran tipe data di setiap variabel dan parameter fungsi secara otomatis mendokumentasikan maksud dari kode tersebut. Kita nggak perlu menebak-nebak tipe data apa yang harus dikirim ke sebuah fungsi.\u003C/li>\n\u003Cli>\u003Cstrong>Deteksi error sejak dini\u003C/strong> — Kode TypeScript wajib melewati proses kompilasi terlebih dahulu. Di fase inilah \u003Cem>compiler\u003C/em> bakal menyaring dan menunjukkan letak error agar bisa langsung kalian perbaiki sebelum aplikasi di-deploy. Selamat tinggal \u003Cem>runtime error\u003C/em>! 👋\u003C/li>\n\u003Cli>\u003Cstrong>Dukungan \u003Cem>Functional Programming\u003C/em>\u003C/strong> — Sama seperti JavaScript, TypeScript juga mendukung gaya pemrograman fungsional secara penuh.\u003C/li>\n\u003Cli>\u003Cstrong>Pemrograman Berorientasi Objek (OOP) yang matang\u003C/strong> — Konsep seperti \u003Cem>abstraction\u003C/em>, \u003Cem>encapsulation\u003C/em>, \u003Cem>inheritance\u003C/em>, dan \u003Cem>polymorphism\u003C/em> bisa kalian terapkan dengan rapi tanpa perlu trik atau \u003Cem>hack\u003C/em> aneh-aneh lagi.\u003C/li>\n\u003Cli>\u003Cstrong>Memaksimalkan fitur Editor\u003C/strong> — Ini bagian favorit saya. Fitur-fitur keren seperti \u003Cem>auto-completion\u003C/em>, sugerensi kode, \u003Cem>error checking\u003C/em>, dan \u003Cem>IntelliSense\u003C/em> bakal menyala maksimal di \u003Cem>code editor\u003C/em> kesayangan kalian.\u003C/li>\n\u003Cli>\u003Cstrong>\u003Cem>Developer Experience\u003C/em> (DX) yang memuaskan\u003C/strong> — Pengalaman menulis kode pakai TypeScript terasa jauh lebih menyenangkan. Kombinasi \u003Cem>IntelliSense\u003C/em> yang aktif dan jaminan kode yang lebih aman dari \u003Cem>runtime error\u003C/em> bikin proses koding jadi makin percaya diri.\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"dari-javascript-ke-typescript\">Dari JavaScript ke TypeScript\u003C/h2>\n\u003Cp>Mari kita lihat contoh kasusnya. Kode JavaScript biasa kadang bisa membingungkan kalau dibaca pertama kali, terutama karena sifat dinamisnya. Apalagi kalau kita kurang teliti dalam menamai variabel atau fungsi—dan jujur saja, memberi nama yang pas itu memang sulit banget!\u003C/p>\n\u003Cp>Coba perhatikan cuplikan kode JavaScript 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\">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=\"function%20add(a%2C%20b)%7B%0A%20%20%20%20return%20a%20%2B%20b%3B%0A%7D%0A%0Afunction%20fullName(firstName%2C%20lastName)%7B%0A%20%20%20%20return%20firstName%20%2B%20%22%20%22%20%2B%20lastName%3B%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:#F97583\">function\u003C/span>\u003Cspan style=\"color:#B392F0\"> add\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">a\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#FFAB70\">b\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\"> a \u003C/span>\u003Cspan style=\"color:#F97583\">+\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> b;\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:#F97583\">function\u003C/span>\u003Cspan style=\"color:#B392F0\"> fullName\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">firstName\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#FFAB70\">lastName\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\"> firstName \u003C/span>\u003Cspan style=\"color:#F97583\">+\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> \" \"\u003C/span>\u003Cspan style=\"color:#F97583\"> +\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> lastName;\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>Kita punya dua fungsi sederhana. Keduanya sama-sama menerima dua parameter, tapi tujuannya berbeda. Fungsi \u003Ccode>add\u003C/code> dirancang buat menjumlahkan angka, sedangkan fungsi \u003Ccode>fullName\u003C/code> dibuat buat menggabungkan nama depan dan belakang.\u003C/p>\n\u003Cp>Sekarang, coba kita panggil kedua fungsi tersebut dengan cara yang agak 'ngawur':\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=\"console.log(add(2%2C%204))%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20output%206%0Aconsole.log(add(%22inva%22%2C%20%22sikode%22))%3B%20%20%20%20%20%20%2F%2F%20output%20invasikode%0Aconsole.log(fullName(%22inva%22%2C%20%22sikode%22))%3B%20%2F%2F%20output%20inva%20sikode%0Aconsole.log(fullName(2%2C%204))%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20output%2024\" 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\">console.\u003C/span>\u003Cspan style=\"color:#B392F0\">log\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#B392F0\">add\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#79B8FF\">2\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#79B8FF\">4\u003C/span>\u003Cspan style=\"color:#E1E4E8\">));                  \u003C/span>\u003Cspan style=\"color:#6A737D\">// output 6\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:#B392F0\">add\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"inva\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"sikode\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">));      \u003C/span>\u003Cspan style=\"color:#6A737D\">// output invasikode\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:#B392F0\">fullName\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"inva\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"sikode\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">)); \u003C/span>\u003Cspan style=\"color:#6A737D\">// output inva sikode\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:#B392F0\">fullName\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#79B8FF\">2\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#79B8FF\">4\u003C/span>\u003Cspan style=\"color:#E1E4E8\">));             \u003C/span>\u003Cspan style=\"color:#6A737D\">// output 24\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Walaupun kita memasukkan argumen yang salah target (\u003Ccode>add("inva", "sikode")\u003C/code> dan \u003Ccode>fullName(2, 4)\u003C/code>), JavaScript nggak bakal protes dan tetap menjalankan kodenya karena secara sintaks memang dianggap valid.\u003C/p>\n\u003Cp>Tapi perilaku seperti ini rawan memicu kekacauan logika di aplikasi kalian, terutama saat bekerja dengan tim besar.\u003C/p>\n\u003Cp>Nah, TypeScript hadir buat menyelesaikan masalah ini dengan mendefinisikan jenis data apa saja yang boleh diterima oleh sebuah fungsi.\u003C/p>\n\u003Cp>Sekarang mari kita ubah fungsi tadi menggunakan sintaks TypeScript:\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=\"function%20add(a%3A%20number%2C%20b%3A%20number)%3A%20number%7B%0A%20%20%20%20return%20a%20%2B%20b%3B%0A%7D%0A%0Afunction%20fullName(firstName%3A%20string%2C%20lastName%3A%20string)%3A%20string%7B%0A%20%20%20%20return%20firstName%20%2B%20%22%20%22%20%2B%20lastName%3B%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:#F97583\">function\u003C/span>\u003Cspan style=\"color:#B392F0\"> add\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">a\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> number\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#FFAB70\">b\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> number\u003C/span>\u003Cspan style=\"color:#E1E4E8\">)\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> number\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\"> a \u003C/span>\u003Cspan style=\"color:#F97583\">+\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> b;\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:#F97583\">function\u003C/span>\u003Cspan style=\"color:#B392F0\"> fullName\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#FFAB70\">firstName\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#FFAB70\">lastName\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">)\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\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\"> firstName \u003C/span>\u003Cspan style=\"color:#F97583\">+\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> \" \"\u003C/span>\u003Cspan style=\"color:#F97583\"> +\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> lastName;\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>Cukup dengan menambahkan keterangan tipe data dan mengubah ekstensi berkas dari \u003Ccode>.js\u003C/code> menjadi \u003Ccode>.ts\u003C/code>, fungsi kita sekarang sudah terproteksi dengan baik.\u003C/p>\n\u003Cp>Jika kita mencoba memanggil fungsinya dengan parameter yang salah seperti sebelumnya:\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=\"console.log(add(2%2C%204))%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20output%206%0Aconsole.log(add(%22inva%22%2C%20%22sikode%22))%3B%20%20%20%20%20%20%2F%2F%20error%20kompilasi!%0Aconsole.log(fullName(%22inva%22%2C%20%22sikode%22))%3B%20%2F%2F%20output%20inva%20sikode%0Aconsole.log(fullName(2%2C%204))%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20error%20kompilasi!\" 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\">console.\u003C/span>\u003Cspan style=\"color:#B392F0\">log\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#B392F0\">add\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#79B8FF\">2\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#79B8FF\">4\u003C/span>\u003Cspan style=\"color:#E1E4E8\">));                  \u003C/span>\u003Cspan style=\"color:#6A737D\">// output 6\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:#B392F0\">add\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"inva\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"sikode\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">));      \u003C/span>\u003Cspan style=\"color:#6A737D\">// error kompilasi!\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:#B392F0\">fullName\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"inva\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"sikode\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">)); \u003C/span>\u003Cspan style=\"color:#6A737D\">// output inva sikode\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:#B392F0\">fullName\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(\u003C/span>\u003Cspan style=\"color:#79B8FF\">2\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#79B8FF\">4\u003C/span>\u003Cspan style=\"color:#E1E4E8\">));             \u003C/span>\u003Cspan style=\"color:#6A737D\">// error kompilasi!\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cp>Saat kalian mencoba melakukan kompilasi, TypeScript bakal langsung menolak dan memunculkan pesan error. Bahkan, \u003Cem>code editor\u003C/em> seperti VS Code juga bakal langsung menandai baris yang salah dengan garis merah:\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=\"Argument%20of%20type%20'string'%20is%20not%20assignable%20to%20parameter%20of%20type%20'number'.%0AArgument%20of%20type%20'number'%20is%20not%20assignable%20to%20parameter%20of%20type%20'string'.\" 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>Argument of type 'string' is not assignable to parameter of type 'number'.\nArgument of type 'number' is not assignable to parameter of type 'string'.\u003C/code>\u003C/pre>\n  \u003C/div>\n\u003C/div>\u003Cblockquote>\n\u003Cp>📷 \u003Cem>Ilustrasi: peringatan galat tipe data di editor VS Code dengan garis bawah merah dan kotak pesan penjelasan error.\u003C/em>\u003C/p>\n\u003C/blockquote>\n\u003Cp>Dengan begini, kita dipaksa buat menggunakan fungsi sesuai dengan aturan mainnya. Cara ini sangat efektif buat meminimalisir celah \u003Cem>bug\u003C/em> pada proyek yang kalian kembangkan.\u003C/p>\n\u003Cp>Bagaimana? Tertarik buat mencoba TypeScript di proyek selanjutnya? Kalian bisa langsung meluncur ke situs resminya di \u003Ca href=\"https://www.typescriptlang.org/\">typescriptlang.org\u003C/a> buat belajar lebih lanjut.\u003C/p>\n\u003Cp>Selamat berkoding ria 👋\u003C/p>\n","\u003Cul>\n\u003Cli>TypeScript adalah superset dari JavaScript yang menambahkan fitur optional static typing untuk meminimalisir bug.\u003C/li>\n\u003Cli>Kode TypeScript akan dikompilasi menjadi JavaScript standar agar bisa dijalankan di browser maupun Node.js.\u003C/li>\n\u003Cli>Fitur static type sangat membantu meningkatkan Developer Experience (DX) lewat auto-completion dan verifikasi error sejak dini.\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":78,"title":79,"slug":80,"excerpt":81,"thumbnail_image":415,"tags":416},{"id":83},[69,76,85,86,87,88,89],{"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",[69,121,88,132,120,76,133],{"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",[119,120,69,88,121,122,274],[434,438,441],{"text":435,"depth":436,"id":437},"Tentang TypeScript",2,"tentang-typescript",{"text":439,"depth":436,"id":440},"Kenapa Harus Pakai TypeScript?","kenapa-harus-pakai-typescript",{"text":442,"depth":436,"id":443},"Dari JavaScript ke TypeScript","dari-javascript-ke-typescript",1791045072766]