Ngobrolin TypeScript
Ringkasan Episode
Bantu KoreksiTypeScript dibahas sebagai superset JavaScript — bahasanya tetap JavaScript, hanya ditambah anotasi tipe, interface, generic, dan sejenisnya, lalu dikompilasi kembali menjadi JavaScript karena itulah satu-satunya yang dimengerti browser. Analoginya seperti komentar dan sorotan pada dokumen yang sedang disunting: semuanya membantu selama menulis, tapi hilang begitu dokumen dicetak. Satu hal penting ditegaskan supaya tidak salah harap: pemeriksaan tipenya berlangsung statis, saat menulis dan mengompilasi. Begitu program berjalan, TypeScript tidak lagi memeriksa apa pun — jadi memakainya bukan jaminan bebas galat, terutama ketika data dari luar ternyata tidak sesuai bentuk yang diasumsikan. Nilainya justru pada mendelegasikan pekerjaan repetitif yang manusia memang buruk mengerjakannya: memeriksa typo, memastikan salinan akurat, mengingat bentuk data. Sebagai efek samping, menulis tipe memaksa kita mendokumentasikan apa yang kita buat. Dibahas juga alternatif yang lebih ringan berupa komentar dokumentasi di JavaScript biasa, lengkap dengan pengalaman nyata memakainya untuk mewarisi codebase asing tanpa dokumentasi dan tanpa kontak siapa pun — cukup untuk tipe sederhana, tapi menyiksa begitu berhadapan dengan objek bersarang. Sisanya membedah union type yang membatasi nilai pada beberapa kemungkinan saja, type predicate, dan strict mode yang memaksa kita memeriksa dulu apakah datanya benar-benar ada sebelum dipakai.
Poin-poin Utama
- •TypeScript adalah superset JavaScript yang harus dikompilasi kembali menjadi JavaScript, karena browser sampai sekarang hanya mengerti JavaScript
- •Pemeriksaan tipenya statis: begitu program berjalan, TypeScript tidak lagi memeriksa apa pun — jadi memakainya bukan jaminan bebas galat, terutama untuk data dari luar
- •Nilai utamanya adalah mendelegasikan pekerjaan repetitif yang manusia memang buruk mengerjakannya — memeriksa typo, memastikan salinan akurat, mengingat bentuk data
- •Menulis tipe memaksa kita mendokumentasikan: rekan kerja jadi bisa tahu sebuah fungsi menerima apa dan mengembalikan apa tanpa membaca isinya
- •Komentar dokumentasi di JavaScript biasa bisa jadi solusi cepat untuk codebase warisan yang tidak berdokumentasi, tapi sintaksnya menyiksa begitu berhadapan dengan objek bersarang
- •Union type membatasi nilai pada beberapa kemungkinan saja, sehingga salah ketik pada salah satu nilainya langsung tertangkap alih-alih lolos sebagai string sembarang
- •Strict mode memaksa kita memeriksa dulu apakah data benar-benar ada sebelum dipakai — persis kasus undefined yang biasanya baru meledak saat program berjalan
Hai, halo-halo semuanya. Selamat malam, selamat hari selasa.
Selasa malam makunya.
Ngobrolin weh.
Ngobrolin weh. Dan sudah ada yang ngegas nih, dua orang ngegas.
Ada Hans Hans.
Ada Jeremy Ando, wah namanya mantap.
Gimana kabarnya semuanya? Malam hari ini mudah-mudahan sehat ya.
Dingin.
Dingin ya?
Iya.
Ini hujan mulu.
Jepang, Jepangas.
Jepangas.
Engga hujan disana?
Engga. So, kering panas soalnya apa sih? Merapi.
Oh iya, merapi gimana tuh kabarnya tuh?
Iya, enggak apa-apa sih. Cuma aja, maksudnya enggak, enggak bahaya.
Cuma jadi panas aja. Cuma aja.
Ada Audi, ada Nuriski, halo-halo. Oh Bekasi dingin sekarang ya Bekasi ya.
Oh Planet Bekasi dingin.
Planet Bekasi dingin, lagi dingin ya. Lagi musim dingin ya.
Planet Bekasi. Halo, walaikumsalam.
Walaikumsalam.
Jadi malam hari ini kita ketemu lagi, seperti biasa masih bertiga, format standar.
Ada Riza, ada Irvan, dan juga ada Eka. Malam ini kita akan ngobrolin TypeScript.
Nah, saya juga penasaran nih, teman-teman disini yang udah pakai TypeScript berapa orang?
Boleh, boleh itu ya. Boleh tunjuk tangan di kolom chat gitu.
Tunjuk tangan.
Yang belum, ya tunjuk tangan. Pakai emoji gitu kan, tunjuk tangan ada ya.
Terus masih JavaScript yang berkutat di JavaScript, boleh juga tunjuk tangan.
Lihat transkrip lengkap (1142 segmen lagi)
Atau tulis ya, saya JavaScript.
Yang apa, yang sudah tertarik ke TypeScript berapa orang?
Iya, yang pengen coba.
Saya baru pakai TypeScript itu untuk project yang lucu-lucuan aja.
Yang baru nyoba-nyoba, belum pernah pakai di production.
Jadi bener-bener curious nih.
Itu pada mau pakai TypeScript, kenapa, kalau saya mau meyakinkan kolek saya, meyakinkan product owner, atau meyakinkan teman-teman yang lain.
Atau meracuni teman-teman, kenapa harus pakai TypeScript?
Pengen dengar nih dari teman-teman nih, gimana nih, apa sih TypeScript?
Apa hebatnya gitu ya?
Iya.
Halnya 2-3 tahun terakhir ini naik dan nggak turun-turun gitu kayak trending terus gitu TypeScript.
Jadi pengen tahu apa sih TypeScript gitu.
Mungkin ada juga yang aneksi TypeScript, begitu teranjur pakai TypeScript,
abis itu kalau misalnya nggak pakai TypeScript, jadi sakau, mungkin ada yang kayak gitu.
Ada yang sakau ya, ada yang sakau.
Ada yang sakau atau ada yang stres gara-gara naiknya susah.
Seperti Harum, Harum Mawar.
Kayak nama tersangka ya, sebut saja Mawar.
Belia bukan namanya sebenarnya.
Karena jaman kalau jaman saya gitu, saya sebelum pakai TypeScript, itu jaman Probe Types.
Oh, Probe Types.
Oh, Flow.
Riat yang dulu juga.
Probe Types.
Dan saya tuh awalnya malah setelah nggak bikin Probe Types.
Akhirnya Probe Typesnya bikin variablenya, terus bikin objek aja.
Semuanya objek, objek kosong.
Kalau nggak array, string, kalau yang obvious bisa layan number, string.
Terus kemudian bolehan array of string, array of number.
Terakhir kalau dia sudah objek dan harus di-struct lagi, semua harus di-definisikan,
malas akhirnya bikin objek.
Berdosa.
Sebenarnya nggak begitu kan.
Iya, iya, iya.
Ada yang masih di GS, pengen belajar tapi belum sempat.
Ada juga tadi kan kalau si Mawar ini kan dia sepertinya itu ya, terkendala ya.
Terkendala karena mungkin belajarnya masih sedikit, jadi terkendala dengan nyari type-nya.
Terus error, ketemu error, terus bingung gimana solvingnya.
Kalau Damar, kebalikan.
Ternyata dia pakai sekali, terus ketagihan.
Nggak pernah di GS lagi.
Pasti ada itu.
Iya, ada pasti.
Jadi ada plus-minusnya ya.
Memang learning curve-nya agak-agak tinggi kali ya kalau untuk type ini ya.
Apalagi yang berangkat dari bahasa dinamis kan, dari JavaScript, ketemu JavaScript, bingung.
Ya, atau dari Python, dari Ruby, dari PHP.
Ya, tapi kalau misalkan yang dari Java gitu kan, dari plus-plus kayaknya lebih landai ya, learning curve-nya.
Golang?
Golang juga.
Type-free kan?
Ada, ada type-nya.
Strong-strong type.
Strong-strong type ya.
Iya, sama type-type, TypeScript juga.
Jadi, ya plus-minus ya, plus-minus.
Nah, malam hari ini kita akan diskusi kira-kira, mungkin lebih ke bukan hanya TypeScript ya.
Karena type system secara umum mungkin ya.
Kenapa itu butuh, keperluannya dimana, apakah itu bisa menambah produktivitas ya.
Kalau dari Mawar tadi, malah menurunkan produktivitas ya.
Bisa menambah, bisa menurunkan.
Bisa menambah, bisa menurunkan, betul.
Teruskan gini nih, biasanya kalau di sosmed kan, sosmed atau Reddit atau apa lah, Hacker News,
orang itu kan biasanya opinionated banget yang kayak, "Wah, kalau mau jadi developer, harus belajar TypeScript."
Atau sebaliknya ada yang bilang, "Ah, sebetulnya nggak perlu, TypeScript itu umum kosong lah, nggak usah, nggak perlu."
Umum kosong.
Jadi, mungkin buat nggak balance, ngimbangin apa ya, kayak influencer-influenceran gitu,
ya kita nanti bisa lihat kali ya, kapan sih TypeScript itu worth it dan cukup penting.
Kapan ya, bisa, mungkin bisa di-skip dulu atau di-tunda.
Ya, dan ada ini nih, masternya TypeScript nih, ada di sini, jagoannya TypeScript nih.
Sebuah TypeScript 3 kali muncul.
Ayo kita undang aja, ayo gabung, ayo gabung, gabung, gabung.
Langsung, nggak lah, nggak.
Langsung.
Oke.
Kita bikin bagian dulu lah, bererti nih.
Saya nggak bisa relate karena nggak pernah pakai TS dan JS.
Wah, jadi pakainya apa?
Oh, bukan anak front-end ya, bukan anak web ya?
Wasm-wasm aja.
Kayaknya pakai wasm.
Oke.
Oke, kita mulai dari ini dulu kali ya, definisi terus apa itu TypeScript, gitu ya.
Saya punya materi, pernah saya bawa kan di salah satu workshop.
Jadi, workshop ini cukup unik, kenapa?
Karena saya diminta untuk mengajarin designer, bukan developer.
Oh, nice.
Minta designer, karena perusahaannya itu menggunakan TypeScript,
jadi nggak belajar JavaScript, langsung belajar TypeScript.
Awalnya agak skeptis, gitu kan.
Desainer, tapi itu langsung kasih TypeScript.
Tapi kan malah nggak apa-apa ya, kan sama-sama belajar baru.
Betul, jadi belajarnya langsung statik, nggak belajar yang dinamis dulu kan,
jadi tidak terkontaminasi, gitu kan.
Saya agak skeptis awalnya, ini bisa nggak sih langsung ngajarin TypeScript?
Apakah belajarannya tinggi, gitu kan.
Atau jalan-jalan harus belajar TypeScript, eh, JavaScript dulu kayak naik tangga dulu,
kan ada perantarannya kan, stepping stone-nya.
Tapi ya udahlah, karena diminta begitu ya sekalian eksperimen, dan ternyata cukup berhasil.
Jadi ini ada cuplikan materinya,
jadi TypeScript itu adalah sebenarnya turunan ya, varian atau superset dari JavaScript.
Jadi TypeScript itu ya sebetulnya JavaScript.
Iya, JavaScript itu kan tipe bahasa pengelembangan dengan tipenya dinamis, kan.
Dinamis artinya kita bisa mengubah-ubah variable,
tipe data dari variable.
Karena semua dianggap apa? Semua dianggap objek, ya.
Semua diajak objek, di JavaScript semua adalah objek.
Nah, jadi kalau lihat gambarnya seperti ini ya, JavaScript itu yang ini,
terus kalau ES6 atau ES yang lain gitu, biasanya ada di atasnya yang eksperimental,
atau yang belum di-approved ya, itu sudah, apa, itu istilahnya butuh transpiler, kan,
ditranslasi ke JavaScript.
Nah, TypeScript itu ada di atasnya lagi, dia menambahkan beberapa fitur seperti type,
annotation, ada interface, ada generics, ada enums, dan ada banyak yang lainnya.
Nah, kenapa TypeScript harus dikompilasi ke JavaScript?
Karena JavaScript adalah satu-satunya bahasa yang dimengerti oleh browser sampai saat ini.
Dulu sempat ada itu. - Jadi sebenarnya kalau kita buka console log,
terus kita ngetik TypeScript, pasti error, dijamin error.
Karena emang browser itu nggak bisa parsing, nggak bisa mengenali browser engine,
nggak bisa mengenalin TS sama sekali. Belum ya? - Belum, belum.
Satu saat tiba-tiba ada speknya di UAT. - Proposal virus ya.
Dulu sempat ada wacana. Kalau teman-teman ikutin dulu, Chrome ya, bukan web secara umum ya,
tapi Chrome, apa Google Chrome, berencana untuk memasukkan Flutter, eh Flutter,
Dart ke sebagai pengganti JavaScript. - Oh, iya, iya, iya.
- Tapi kurang berhasil. Akhirnya Dart tindah bikin Flutter gitu.
Awalnya dari situ sebenarnya bahasa pemograman Dart itu. Yang adalah juga strongly typed,
hampir sama seperti TypeScript. Nah, TS ini harus dikompilasi ke JavaScript gitu ya.
Begitu juga Dart juga bisa dikompilasi ke JavaScript. Begitu juga Rayscript, ada lagi apa?
ClosureScript, dan script-script yang lainnya. Itu harus dikompilasi.
- PHP bisa dikompilasi ke JavaScript. - Oh iya, ada beberapa bahasa pemograman
yang juga bisa dikompilasi ke JavaScript. Nah, sebenarnya TypeScript ini bukan hanya
bahasa pemograman, tapi ada 3 komponen. Yang pertama bahasanya sendiri,
yaitu yang fitur-fitur tambahannya, kemudian ada... - Terus ada tools-nya ya?
- Iya, lendut server yang jalan secara otomatis di Visual Studio Code.
Jadi kalau temen-temen... - Itu ada komen lainnya juga ya, berarti? TSC itu kan?
- TSC. Enggak, satu lagi. Itu ada satu lagi namanya compiler. TSC itu adalah compiler.
Jadi ada 3 komponen. Iya, kalau lendut server itu biasanya tools untuk
kasih kayak pop-up gitu, ada keterangan. Biasanya kalau misalkan kita pakai VS Code,
walaupun kode kita JavaScript, itu biasanya ada helper-nya kan.
Kalau kita hover ke satu variable atau ke satu parameter, dia ada kasih tahu gitu kan.
Walaupun kita nggak pakai... - Kita lisensi.
- Iya. Itu lendut server. Dan sekarang lendut server dipakai di hampir semua bahasa...
editor kan? - IDE.
- Iya, IDE. Ada Vim juga bisa pakai lendut server juga.
Nah, analoginya adalah, si TypeScript ini adalah pada saat kita nulis dokumen,
misalkan Word atau Google Docs gitu, kan kita tulis ada komentarnya, ada...
ada anotasinya lah. Anotasi itu ada kayak highlight dan lain-lain. Ini perlu,
ini nggak perlu. Spellcheck dan lain-lain. Tapi ketika sudah di-print dalam bentuk buku
atau dalam bentuk misalkan PDF dan lain-lain, dia nggak ada komentarnya, udah hilang.
Jadi JavaScript-nya ya itu. Jadi akhirnya jadi akan ada compile time dan run time.
Compile time ini kalau di TypeScript itu ya pada saat kita jalankan TSC,
itu adalah compile time. Ketika dia sudah di JavaScript, dia hanya akan berjalan
di saat run time. Seperti itu. - Nah, cuma hal yang penting perlu diingat nih,
beda sama mungkin bahasa pengprograman lain kali ya. Kalau TypeScript itu kan dia
menganalisanya, type checking-nya itu jalannya di static, ya kan?
- Static, iya. - Static type checking.
Jadi dia bisa mendeteksi pas kita lagi ngetik, kita misalnya ngesan variable yang nggak sesuai.
Nah, itu dia bisa ngecek. Tapi begitu udah di compile, begitu udah jalan di run time,
ya udah sih TypeScript-nya itu nggak bisa melakukan type checking lagi, udah lewat.
Jadi mungkin agak beda sama yang bahasa pengprograman apa ya yang emang built-in type checking?
- Ya C++, Java. - Jadi agak beda sebetulnya.
Jadi pakai TypeScript itu bukan jaminan pasti 100% aman. Di run time tetap bisa error
kalau ada yang definisinya nggak sesuai atau apalah, mungkin data eksternal yang...
- Nggak strict. - Nggak strict.
- Nggak, kalau pun kita codingannya strict, kalau ada data eksternal yang nggak sesuai,
terus kita type casting-nya sembarangan ya, pokoknya tetap bisa jadi error.
Karena begitu run time, TypeScript-nya udah nggak bisa ngecek apa-apa lagi.
- Nah, sekarang pertanyaannya kenapa kita butuh type system untuk front-end khususnya gitu?
Apa kepentingannya, apa keperluannya? Yang pasti pertama, apapun yang dikirimkan HTML
dalam untuk form itu adalah string. Jadi kalau misalkan 1 ditambah string 1,
jadinya 11 bukan dua, gitu kan. Dan itu sangat berbahaya.
Kalau dulu error itu akan dihadapi oleh user langsung.
Nah, dengan adanya TypeScript di tengah-tengah, itu bisa diinterap oleh TypeScript.
Wah, ini tipe data-nya berbeda. Yang satu number, yang satu string, itu nggak bisa dijumlahkan.
Jadi boleh di-convert dulu, atau emang itu kesalahan seperti itu.
Beberapa yang saya dapatkan, kenapa kita butuh type system atau TypeScript,
yang tadi yang barusan diomongin. Jadi kesalahan itu hanya terjadi pada saat develop.
Kalau di production, hampir bisa dibilang, walaupun tadi kalau Eka bilang,
tetap ada faktor, ada kemungkinan salah, tapi kecil lah, diperkecil.
- Yang sudah diminimalkan. - Jauh mengurangi.
Jauh mengurangi dan mengurangi kesalahan yang preventable. Maksudnya hal-hal yang,
kita kan manusia ya, developer manusia, kalau harus ngerjain hal yang repetitif,
ngecek semua bebas dari typo, terus kopasnya akurat, ya maksudnya kita bukan dibuat untuk itu,
tapi mesin komputer itu kan emang dibuat untuk itu. Jadi kita mendelegasikan hal-hal yang redundant,
yang melelakan makan waktu, tapi bisa diprediksi, kita delegasikan itu ke komputer, ke program dalam hal ini, ke TypeScript.
Dengan demikian user experience akan meningkat. Pengalaman pengguna adalah menggunakan produk kita.
Kalau produk kita errornya sedikit, ya tentunya dia akan lebih menyenangkan, dari UX juga lebih bagus.
Kemudian dari sisi DX, nah DX ini lumayan sering terdengar juga ya, developer experience.
Lebih baik kalau menggunakan type system, karena yang pertama ada bantuan autocomplete,
dia lebih pintar, dia bisa tahu konteksnya, gitu kan. Terus juga, kok nggak ada, ini dia contohnya.
Ini adalah contohnya kita bisa tahu, ini fungsi parameter pertama itu apa, parameter kedua itu apa,
ketiga dan seterusnya, beserta dengan tipe datanya, gitu.
- Dan ini secara nggak langsung kayak memaksa kita buat mendokumentasikan ya?
- Iya, walaupun bukan dokumentasi komplit, tapi minimal kan kita harus agak niat sedikit,
nah terus teman kita, teman kerja kita bisa lihat minimal bisa tahu itu apa dan hasilnya, expected-nya apa.
- Iya, betul. Jadi bagian dari dokumentasi juga, TypeScript ini ya.
Terus tadi juga kita udah bahas tentang typo, kesalahan-kesalahan konyol gitu ya,
salah koma jadi titik lah, atau titik koma malah titik dua, gitu kan, sering salah kayak gitu kan.
Terus typo, variable yang belum didefinisikan dan lain-lain itu bisa tertangkap semua.
Kemudian kodanya juga lebih bisa dikelola, tadi ada hubungannya sama dokumentasi gitu ya.
Dengan adanya, dengan memaksa kita untuk menulis type di variable atau di parameter,
itu secara tidak langsung kita sudah mendokumentasikan, mendokumentasikan apa yang mau kita buat.
Lebih jelas gitu, lebih jelas. Ini tujuannya apa? Ini juga sama tadi dan TypeScript ini dikembangkan oleh Microsoft
dan digunakan untuk membuat VSCode. VSCode dibuat dengan TypeScript.
Dan, ya kan ketawan kan company-nya? - Nggak apa-apa.
- Nggak apa-apa ya. Oke. Dan si pembuatnya ini adalah orang yang sama yang membuat bahasa pemogaman C#.
Tadi kita nggak nyemput ya C#, ternyata type strongly type ya. Jadi pembuatnya itu sama.
- Berarti kayaknya semua yang low-level language itu strongly type ya. Karena emang, emang penting.
- Iya. Jaman itu kan yang bercabang itu kalau di produk yang Microsoft yang bercabang itu C# dan VB.
VB itu non-strip. - Iya, VB itu dynamic.
Visual Basic itu dynamic. Nah, ini tadi sudah kita jawab bahwa berarti kita nggak bisa pakai TypeScript di HTML.
Belum, belum bisa sampai saat ini. - Jaman dulu ES6 nggak bisa dipakai langsung di browser.
Sekarang sudah bisa sebagian. - Ya, TypeScript juga sekarang harus di-transpile dulu ke ES6 atau bawahnya.
- Iya. Ada wacana juga si JavaScript ini katanya ya. Nggak tahu ini bakal terwujud atau nggak.
Katanya bakal mau introduksi type system juga kan. Tapi nggak tahu kapan gitu.
Ada wacana kesana. - Dan itu pasti adoptinya ribet pasti.
Cukup panjang. Terus, apa lagi nih? Ini biasanya. Kalau baru mulai, biasanya ini, ini, ini.
- Bajar. Jadi ini, ini itu apa namanya? Ex implicit. Apa sih namanya itu?
Ya, pokoknya kan ada jenis-jenis type, kalau misalnya kita nggak tahu apa, itu kita pakainya ini.
Cuma ini nih bahaya nih. Emang semua bisa dikaliin. - Bisa.
- Yang bisa dikaliin. - Atau bahaya ya.
- Kalau Anya full, Bnya bare, full kali bare, jadinya apa coba?
- Iya. Ini parameternya dikasih tipenya ini, parameter kedua dikasih tipenya ini.
Terus fungsi yang diharapkan untuk return juga returnnya ini.
Ini sebenarnya contoh yang, bukan contoh yang, contoh hello world lah ya, contoh hello world.
Jadi TypeScript itu butuh setiap parameter diberikan tipenya, juga fungsi biasanya diberikan tipenya.
Kalau fungsi yang tidak return apapun, ada nggak sih di TypeScript?
- Void. - Void ya, void.
Sebenarnya TypeScript itu kan punya kemampuan buat invert. Kayak misalnya kalau di contoh ini nih, misalnya Anya tuh number.
Karena kan mau dikaliin kan A number, B number, kita nggak harus beneran nge-definisiin return type-nya yang di tengah tuh ini.
Jadi A number, B number, kita ngereturn A kali B. Itu tuh bakal, dia cukup pintar buat tahu bahwa hasilnya pasti number.
- Betul. Juga type annotation ini sebenarnya tidak selalu dibutuhkan.
Kalau sudah obvious, misalkan seperti ini ya, A di kali B, kali itu memang udah dilast kan.
- Tapi A-nya harus ada dibutuhkan. Misalnya A-nya kita set A sama dengan 1, B sama dengan 1.
Nah 1 itu kan number ya, jadi itu juga implicit. TypeScript cukup pintar buat tahu itu number.
- Kan masih bisa float atau double juga. - TypeScript cuma punya number.
- Iya, kalau script baru ada float, ada integer. Dan operasi matematikanya juga berbeda.
Kalau float dia plus titik, kali titik, bagi titik, dan lain-lain. Itu khusus untuk float.
Jadi hanya bisa float di kali float. Float dibagi float. Kalau TypeScript mungkin masih bisa nyampor ya.
- Baru belajar. Oke. - Nah, ini juga ada pertanyaan menarik nih.
Berarti kalau TS ditranslate ke JS, apakah performa akan menurun? Karena kan perlu proses tambahan.
Dan sudah dijawab oleh Damar. Gak berasa. Di production gak berasa. Berasanya adalah saat di compile.
- Di compile. - Saat di download oleh user, itu udah dalam keadaan JS. Jadi emang user yang gak...
- Ya, secara user experience tidak berasa. Cuman secara developer experience mungkin iya.
Banyak yang mengeluhkan yang bilang TSC atau TypeScript compiler itu lambat. Karena ditulis dengan node JS.
Makanya muncul beberapa alternatif seperti SOP. - Pake RAS.
- Pake RAS. Dia dikompilasi dengan RAS. Jadi lebih cepat. Itu juga salah satu yang menyebabkan...
- IS build juga bisa. - IS build juga udah bisa sekarang. Betul.
- Itu jauh lebih cepat. - Betul.
Ada beberapa yang merasa jengah dengan lambatnya compiler TypeScript.
Makanya ada muncul saran dari beberapa orang yang menyarankan lebih baik menggunakan JS.doc.
JavaScript plus JS.doc. Itu apakah sama? Dibilang sama, enggak juga ya. Serupa tapi tak sama ya.
JS.doc ini kan dokumentasi. - Betul. Ada link-nya. Buka link-nya aja. JS.doc.app.
- Oke. Baiklah. JS.doc.app.
Jadi TypeScript itu sebenarnya fitur yang dia, maksudnya yang utamanya itu kalau saya tangkap itu adalah
ada static analysis-nya yang bisa menangkap strict type ini saat implementasi dalam saat development
untuk bisa mencegah... apa namanya? - Preventable error.
- Oke. - Preventable issue.
- Berarti lebih ke arah static analysis ya? - Iya.
Cuma kan tadi ada tool-link-nya juga, ada compiler-nya juga. Sementara kalau JS.doc itu jauh lebih simple
ya cuma buat mendokumentasikan sesuai namanya. Jadi apa? Sintasi itu kayak comment. Nah, kayak gitu tuh.
- Kalau teman-teman ngoding Java atau VB zaman dulu kayak gini nih. Semuanya di sini ya parameter-parameternya.
- Name, string. - Nah, ini cuma bekerja buat intelligence saja autocomplete.
- Untuk sekarang masih pakai JS.doc. - Nah, kayak gini ya. Nah, ini jadi sebenarnya dibilang sama enggak ya.
Kalau menjawab pertanyaan tadi dibilang dari siapa tadi namanya? Nyan.js.
Kalau ditanya sama enggak. Tentu saja tidak. Kenapa? Karena yang satu adalah komentar atau dokumentasi.
Yang satu adalah bahasa. Dia lebih lengkap.
TypeScript juga menambahkan beberapa fitur dalam bentuk bahasa, seperti contohnya interface,
kemudian ada generics, dan ada kita juga bisa validasi tipe data dari JSON.
Nah, kalau JS.doc kan rasanya nggak bisa ya. Nggak sejauh itu. Belum sampai sejauh itu.
- JS.doc hanya untuk mendokumentasikan apa sih? Variable. - Variable, fungsi, dan lain-lainnya.
- Parameter. Genis parameter. - Iya, parameter.
- Dan kebetulan aku punya pengalaman pribadi ini pakai JS.doc karena nge-inherit di tempat kerja.
Dapat codebase yang ditulis oleh pihak eksternal, pihak luar, dan kita nggak punya kontak sama sekali.
- Ya, udah. Nah, JavaScript semua, udah nggak tahu lah, udah nggak ada...
Pokoknya nggak jelas lah API-nya kayak apa, ini function buat apa, dan hasilnya apa.
Itu kayak harus di-console semua manual, tapi karena kejar tayang, buru-buru, harus segera di...
Ada beberapa hal, jadi ada beberapa logic yang perlu dicek dan perlu di-edit, di-refactor.
Nah, solusi cepet tanpa harus apa. Terus dari segi deploy-nya juga belum di-setup CICD, harus manual.
Aku yang loading minta ketemuan buat deploy-in karena ini derutat ya, one-off.
Ya udah, kalau buat. Nah, ada beberapa tiket untuk ngecek dan merefactor beberapa logic-nya
biar bisa didokumentasiin. Kebetulan ada beberapa lumayan dominan dikalkulasi.
Jadi input-nya lumayan kompleks, maksudnya input-nya ada beberapa skenario A, B, C, dan output-nya juga
ada beberapa logic yang perlu dipastiin. Nah, itu solusinya JSDoc sih, yang saat itu juga beneran
udah tinggal ngetik kayak gitu doang. Cuma kelemahannya nih, nested object, kalau object-nya udah rumit,
itu susahnya minta ampun. Itu kalau tadi kan kalau misalnya primitif yang kayak simple, yang kayak string,
number, itu masih oke. Tapi kalau udah array dengan nested object itu bikin bisa ada referensi gitu,
semacam bisa kita mendefinisikan objek-objek yang ada, terus bisa dipakai lagi untuk fungsin lainnya,
misalnya array yang berisi objek A atau B atau C jenisnya, tapi itu ribet asli syntax-nya.
- Tapi bisa digabung loh antara JSDoc dengan data definition TypeScript itu bisa. - Oh, nice.
- Jadi pakai interface. - Iya, interface. - Jadi export interface, terus JSDoc-nya tinggal diimport.
- Cuma itu harus masukin TypeScript dulu kan. Kalau ini kasusnya yang beneran buru-buru banget,
adanya cuma JS, JSDoc itu bisa jadi solusi. Cuma selanjutnya kalau mau refaktor pelan-pelan,
pelan-pelan ya, nambahin Convert ke TypeScript, itu bagus, itu berarti bisa secara bertahap di Convert
sampai jadi TypeScript semua. - Betul. Jadi kalau memang TypeScript hanya digunakan,
hanya digunakan untuk mendefinisikan fungsi, variable, parameter, return function-nya, mendefinisikan type-nya,
itu mungkin JSDoc udah lebih dari cukup. Tapi kalau misalkan udah pakai interface, harus validasi si JSON-nya,
objek di dalam objek, nested object, array dan lain-lain, itu kayaknya TypeScript udah bisa jadi pilihan.
Apalagi beberapa struktur data ditambahkan di TypeScript misalkan tuple. Ada yang saya tahu yang berbeda hanya tuple,
yang lainnya kayak Genrex dan lain-lain. - Terus logic, TypeScript itu bisa simple logic kayak misalnya
capitalize, misalnya apa ya? - Union type, union type itu juga penting banget.
Terus string manipulation juga bisa kayak kita punya beberapa value, terus dari situ kita kayak extrapolate,
jadi value-nya harus capitalize atau workase atau mengkombinasikan string.
Ya pokoknya TypeScript itu bisa menghendal, walaupun itu logic statik ya, cuman itu bisa cukup pinter buat hal-hal kayak gitu.
- Ya, misalkan to lowercase gitu kan, something dot to lowercase, tiba-tiba yang dikirim angka error kan,
TypeScript bisa mendeteksi itu supaya memastikan bahwa dot to lowercase itu harus string, itu juga termasuk.
Terus tadi yang saya sebutkan union type itu juga cukup killer feature-nya, salah satu killer feature-nya
konstanta ya? - TypeScript union, TypeScript itu masanya cuman suka lupa deh, ngerti bentuknya itu namanya apa?
- Union itu yang biasanya huru besar semua, nah kalau misalkan pakai Redux nih, bikin action ininya,
bukan pakai string terus huru besar semua tuh, itu bisa dijadikan union kan. Union misalkan car,
car tipe-nya ada sedan, pick-up, - Oh, apa, depi sine pipe ya?
- Ya, pipe, itu union kan, kita bisa bikin tipe atau struktur data kita sendiri, gitu.
- Union type, ntar gua ambilin. - Ya, sambil kita coba-cobain ya.
Berarti apakah nggak bisa juga dipakai di web komponen? Kalau di web komponen yang vanilla nggak bisa,
tapi kalau misalkan pakai lib lemen, pakai yang lain, itu dia dikompilasi dulu jadi JavaScript juga ujung-ujungnya.
Cuman kalau langsung web komponen yang vanilla itu masih harus pakai JavaScript.
Yang paling sering saya terkena isu soal people data itu, tiba-tiba hasilnya yang saya ambil itu undefined atau null.
Sedangkan yang saya butuhkan itu string atau objek, tetapi yang saya dapat undefined, akhirnya di runtime error.
Nah, kalau pakai TypeScript itu bisa dicegah, karena dia sudah, saya tahu itu, written-nya dari function mana,
atau dari hasil apa, dari objek mana, itu kan sudah punya type-nya.
Jadi tiba-tiba kita masukin ke, assign ke function tertentu yang membutuhkan tipe data, ternyata yang kita assign itu undefined.
Bisa, maksudnya ada probabilitas itu bisa menjadi undefined, maka TypeScript itu bisa capture.
Nah, itu contohnya ada, itu istilahnya type predicate ternyata, itu di private chat ada link-nya.
Bisa dibuka buat lihat contohnya, bagus itu contohnya.
- Boleh, boleh. - Oke.
- Is, jadi intinya itu pakai keyword is di TypeScript. - Mana contohnya?
Scrolling ke contohnya na, function isString.
IsString itu kan kita dapat data, data si X itu parameter kan, yang kayak dibilang Ivan tadi, X-nya ya nggak tahu itu apa.
Coba, return-nya X is string.
Kalau value-nya, kalau return-nya true, berarti dia memang string.
Apapun, kalau selain, ya di contoh ini, kalau apapun yang selain string, ya return-nya false.
Jadi kita tinggal apa, data yang mau kita cek, ya tinggal dimasukin ke function isString ini.
Habis itu, setelah lolos, TypeScript langsung otomatis tahu bahwa itu adalah string.
Berarti isString itu berarti isObject, isNumber, is...
- Terserah kita namain apa, Mak? Terserah itu contoh doang. - Bebas, bebas.
Iya. Tadi kita lanjut union nih, ada yang contoh ini, dog, cat, sheep.
Ini dia. Jadi mungkin kan kita membuat tipe data sendiri atau stoker data sendiri.
Dan itu string gitu ya, artinya contohnya kayak gini, misalkan saya punya 2 string.
Kemungkinan cuma 2 kan, success atau error.
Kalau kita bikin flipcoin berarti hasil akhir dari function-nya itu harus menghasilkan salah satu dari 2 ini.
- Kalau dulu pasti bisa ketutup. - Oh iya, maaf.
Nah, jadi kalau kita bikin function flipcoin, ya kan?
Flipcoin itu kemungkinan cuma ada 2 kan, head or tails kan.
- Jadi kita bisa langsung... - Detekannya langsung string-nya, bukan tipe data-nya ya.
Iya, ini udah menjadi tipe data sendiri, isinya seperti ini, kayak konstantan.
Gak bisa ya, coin-nya, dalenya, gambarnya garuda pancasila gitu, ternyata coin-nya.
Nah, kalau misalkan di sini tiba-tiba kita typo, kita kurang S atau Inya kita lupa tulis atau itu,
dia akan langsung error kasih warning bahwa ini nggak ada tipe data-nya, dia hanya menerima heads or tails.
Jadi lebih strict gitu ya. Itu salah satu fitur kunci juga kalau menurut saya.
Counter undefined.
Oke, lanjut lagi, apa lagi yang mau kita bahas, Pak?
Biasanya yang sering ketemu fitur-fitur TypeScript yang paling berguna, paling bermanfaat, ada lagi nggak sih?
- Kita masuk kayak kasus kecil aja gimana? - Boleh, boleh.
Strict mode. Buka link yang dari saya aja yang di itu. Kita go through sama-sama.
- Apa itu? - Ini ya, maksudnya.
Jadi strict mode. Jadi kenapa kita, bagi saya, saya masih baru belajar TypeScript.
Belum pernah pakai di production terus terang aja, jadi hanya baru main-main aja.
Dan kenapa saya mulai tertarik dan ingin belajar menggali karena strict mode-nya ini.
Karena paling sering saya terkena masalah adalah kalau, ya itu tadi,
saya harap bukan fungsinya saya menerima cuma array, tetapi ternyata return data saya dari tempat yang lain dapatnya undefined.
Itu kenanya di runtime kalau di ES6 biasa, ya kan? Kalau pakai TypeScript bisa dapat nih.
Jadi contohnya kita langsung ke contoh ke bawah, ini kan teman-teman bisa baca.
Kita langsung ke contoh kasus, dia ada di bawah sedikit. Terus, terus, terus, terus.
Oke, di main function, oke. Lagi ke bawah, oke, stop. Jadi di main function, kebanyakan, kebanyakan.
Jadi di main function, dia sebenarnya kan ambil data dari DB, username, intinya usernya found.
Terus kita kemudian greeting found user.username. Itu contohnya, contoh kasusnya.
Terus kita lihat di apa namanya, di greeting itu apa sih? Greeting. Kita turun sedikit.
Greeting itu ternyata menerima input argumennya names. Langsung kita anggapannya names itu langsung array.
Jadi langsung kita console log, names.map, name to lowercase, blablabla.
Itu harapannya adalah si inputnya adalah array. Terus kita turun. Kita turun lagi.
Nah, kalau kita jalanin ini blablabla, kita compile, terus nggak ada terjadi masalah kan. Terus kita turun.
Nah, ternyata kalau misalnya apa namanya, kalau kita enable strict mode, berarti dari yang names yang tadi itu kita kan nggak define.
Jadi dia nggak punya apa, dia implicitnya any type. Sedangkan kita jalankan, kita anggap dia sebagai array.
Maka si TS itu langsung bisa return error saat compile. Dia ngasih tau names yang tadi ini adalah tipe datanya any.
Tetapi kita perlakukan dia sebagai array. Maka kita harus define dia sebagai array.
Kita turun sedikit. Terus, terus, terus, terus. Ya, solusinya kan yang kita buat itu jadi array.
Array yang ada type-nya. Jadi di TypeScript juga array itu harus sama semua type-nya.
Kalau di TypeScript kan bisa ya. Array 1, 2, string gitu kan. Array 1, 2, tree gitu.
Jadi ini array of string gitu ya. Kita define array of string.
Beres kan. Ternyata, nggak segit si type itu bisa lebih jauh lagi. Waktu kita panggil greeting font user.username tadi,
dia bilang, "Ini font user.username itu bukan array of string." Maka itu salah, dia bilang.
Jadi kita harus masukin dia ke dalam string. Kita turun lagi ke hasil akhirnya.
Nah, berarti kita kan harus cek dulu si user itu ketemu nggak. Iya kan? Kalau nggak ketemu apa?
Kalau ketemu, baru kita assign dia harus dalam array. Jadi greeting array font user.username.
Font user.username. Jadi si function greeting-nya kita itu sudah pasti, pasti, pasti, pasti.
Sudah pasti ada dan betul.
Ya, sudah pasti ada dan betul array. Maka dia menjalankan tugasnya dengan pasti.
Nah, disinilah kenapa saya tertarik mau implementasi di project saya yang selanjutnya pakai TypeScript.
Mantap.
Terus ini ya, tapi yang tadi kan kita sudah sempat ngomong ya, build-nya lama abis itu tinggal main.
Ada tuh memes-nya. Lagi ditanya, "Kenapa kalian nggak kerja?" Lagi compile.
Kenapa nggak ada yang sampai selama itu? Pengalaman pribadi sih walaupun kodenya cukup banyak, nggak pernah sampai lama banget.
Selama ini build lama itu kayaknya biang karaknya cuma satu deh, sharp image processing.
Itu kalau misalnya kita pakai yang image library yang sharp atau semacamnya, yang kalau dulu paling sering mati Gatsby,
tapi bisa, mungkin di framework lain juga banyak. Itu tuh kalau compile pasti lama.
Karena dia kan memproses image-nya satu persatu, dia ngeresize dan mungkin bikin beberapa format, jadi lama intinya.
Maksudnya kalau TypeScript sih nggak tahu belum pernah nge-handle codebase yang sebesar itu sampai terasa lama.
Microfront-nya.
Ya, mungkin. Tapi kan kalau microfront-nya apa harus di compile semua sekaligus, inti orang bikin microfront-nya kan biar bisa kepisah package-nya.
Nah, itu nggak tahu.
Monorepo.
Di dalam kasus apa atau codebase sebesar apa yang sampai lama banget, sampai signifikan.
Maksudnya bedanya, kalau cuma beda 1-2 detik kan nggak kerasa ya.
Tapi maksudnya sampai beda 5 menit lebih begitu namakan TypeScript. Aku pribadi sih belum pernah ngalamin.
Cuma mungkin teman-teman ada yang pernah.
Ini juga menarik nih. TypeScript udah wajib banget buat job market ya. Pusing.
Udah wajib banget ya.
Saya juga insight menarik nih. Karena baru tahu juga ternyata TypeScript udah wajib ya.
Bukan jadi nilai tambah lagi sekarang ya. Udah wajib tahu TypeScript ya.
Mungkin sekarang makin lama, makin apa sih kayak di state of the web, di survei-survei gitu.
Emang TypeScript kan konsisten naik terus. Bahkan per, nggak tahu ya, per sekitar 4 tahun lalu gitu kayaknya mungkin belum se hype itu TypeScript
buat entry level, kalau dari pengalaman aku lagi-lagi 4-5 tahun yang lalu.
Cuma mungkin makin sekarang ya makin jadi.
Menjawab pertanyaan Eka yang tadi, seberapa besar proyeknya sehingga TypeScriptnya lama.
Ada beberapa proyek besar yang akhirnya dari JavaScript ke TypeScript abis itu balik lagi ke JavaScript.
- Balik lagi. Svelte ya kayaknya? - Svelte.
Svelte nggak sih? Gara-gara rich values-nya nggak malus. Udah lah, JSdoc aja.
Iya, dia balik JSdoc.
Tapi kelihatannya itu bukan, maksudnya nggak sepenuhnya sunking lamanya nge-build deh.
Cuma maksudnya kompleksitas antar modulnya.
Maksudnya dengan codebase sebesar itu kelihatannya memastikan semua play nice dengan type definition-nya, interface-nya.
Itu kan, ya maksudnya, existing legacy codebase itu emang kalau sebesar itu agak sulit.
Cuma kelihatannya, maksudnya belum pernah lihat dari diskusinya di GitHub-nya.
Itu nggak ada bukti bahwa itu karena build-nya kelamaan deh.
Iya, bukan hanya karena itu. Mungkin karena yang tadi kebutuhannya hanya untuk memberi type variable seperti dokumentasi dalam tanggung tipe ya.
Dia tidak menggunakan fitur-fitur TypeScript seperti interface-ka atau generic.
Jadi buat pakai TypeScript, type dokumentasi, ya udah pakai yang lebih cocok gitu.
Itu udah ada, udah ada dan udah jalan, udah ada musik, udah ada sistemnya.
- Nah ini ada GDI juga nih. Halo. - Wey.
- Kata siapa? - "Benefit TypeScript tidak menggunakan TypeScript."
- Oh, maksudnya next-nya bisa kita undang. - Bisa, ini.
- Makanya orang muncul di sini kita undang ya. - Ngobrolin cloud, ya ngobrolin cloud.
- Ngobrolin web/xcloud. - Pusing di development-nya tapi di production safety.
Nah ini, ini, ini. Benar nih, benar banget nih.
Jadi kita lebih mengutamakan user experience dibandingkan developer experience gitu ya.
- Tapi sebenarnya mungkin tingkat pusingnya juga apa? Ini grafik tingkat pusingnya di awal tuh begini.
Cuma makin lama kan makin turun. Pas kita udah, kita udah ngerti dan menguasain,
pusingnya pasti berkurang kok. Dan safety-nya tetap.
- Halo, di PHP, ada juga nih, kita pakai, saya juga interrupt yang sama.
Bukan, mirip-mirip dengan static analysis itu namanya PHP saya.
Jadi PHP static analysis. Jadi sama, mirip tuh. Jadi misalnya function apa,
written-nya harus apa, terus kemudian kalau saya pakai function itu di tempat lain,
dan argumennya harus apa. Nanti dia bisa didetek oleh PHP stand ini secara,
kalau kita gabungin sama IDE, kan bisa dirun saat save ya.
Kalau kita save file-nya, dia akan jalani static analysis per file-nya.
- Kayak ESLin gitu? - Iya, jadi dia bisa tahu tuh,
dia bisa tahu kode mana yang akan menghasilkan error, kemungkinan error.
Karena tipe data, return data, terus gitu. - Tipe data, typo.
- Tapi itu bukan, itu library ya? Maksudnya kita install itu. Kayak ESLin ya?
- Premium package. - Oh, yang pro, itu pro-nya.
- Jadi PHP stand-nya juga, dia buat level strict, maksudnya level 0 sampai level 10.
Jadi kita harus bikin juga tuh PHP doc-nya. Nanti dia harus, dia ngedetek PHP doc-nya juga.
- Oke. - Jadi mengapa saya, karena kalau kode saya,
saya udah mengarah mulai ke arah pakai PHP stand semua sebagai standar,
makanya untuk JS-nya saya lagi milih TypeScript sebagai standar.
- Oke, oke. Nah ini kita balik nanya-nanya nih, Mas Dhoni.
Mas Dhoni kan lumayan ini ya, ini kan masih pakai JavaScript yang dinamis,
kalau nggak salah, ClosureScript juga ngulik kan, pokoknya bahasa-bahasa yang dinamis.
Kenapa lebih memilih bahasa dinamis dibandingkan bahasa statis? Boleh jawab ya. Ini juga...
- Asyik ya kita ganti nanya-nanya. - Udah langsung ditodong, cocok tuh.
Bahas edge. Pas nih. Udah ada. - Kita intersect the edge.
- Iya, tuh. Kan banyak tuh kan, dan sudah running di edge juga kan.
- Nah ini kita juga pernah bahas sekilas ya di episode entah apa. Oh JS Engine.
- JS Engine, iya. Bun, Deno itu bisa langsung running TypeScript tanpa harus transpilasi dulu.
Kalau Node masih belum. Node harus menggunakan TSC atau transpilasi yang lain.
Jadi JavaScript baru bisa dijalankan. Kalau Deno... - Yang bikin sama.
- Ya, yang bikin sama. Bun dan Deno, dua-duanya tanpa perlu transpilasi, dia langsung bisa running TypeScript.
- Tapi, berarti dia... langsung transpilasi dia? - Iya, dia langsung di... - Dia install TypeScript-nya, built-in berarti ya.
- Karena kan... - Berarti JIT, just in time, dia langsung...
- Karena kan kalau engine-nya TypeScript itu kita tulis JavaScript kan valid kan, meskipun warning ya.
Tapi tidak sebaliknya kan, gitu. Makanya si Bun sama si Deno itu engine-nya udah TypeScript.
Jadi meskipun kita tulis JavaScript, dia tetap terima. - Ya dia bisa baca.
- Kalau Node.js itu kan engine-nya JS, bukan TS. Makanya TS-nya harus transpilasi dulu, gitu.
- Kalau yang kayak Edge Function yang sudah... maksudnya Cloud For Firewall yang sudah punya Edge Function
bisa kita pakai Bun atau Deno, ada nggak sih? - Ada. Deno kan punya ini sendiri dia.
- Deno Deploy namanya, kalau nggak salah. - Oke, itu Mas Donnie bilang, Dynamic Engine More Fun.
- Iya sih. - More Function.
- Tantangan ya? - Lebih lucu ya.
- Karena kalau nggak ada bug, nggak ada tantangan kan. Kan kita bug-driven development.
- Nah nggak, cuma nih, temen-temen gimana kalau pendapat tentang seberapa pentingnya
nambahin TypeScript di project kita. Kalau aku pribadi sih, kalau pandanganku,
kalau existing codebase apalagi udah established dan nggak ada TypeScript-nya, nggak usah dulu.
In most cases, nggak perlu dulu karena ya itu kan kadang cuma kita aja sebagai developer
pengen perfectionis semua jadiin TypeScript, padahal maksudnya kalau untuk production-nya
kan resource-nya bisa dipakai buat ngerjain hal lain. Jadi kalau menurutku sih
kalau udah established banget, existing codebase apalagi legacy, itu ya nggak perlu banget.
Itu ya mungkin prioritas rendah lah. Itu masuknya mungkin QOL, quality of life improvement,
nambahin TypeScript. Tapi kalau bikin project baru apalagi pakai stack yang cukup modern nih,
misalnya kalau front-end ya segala macam meta framework atau framework sekarang misalnya
mau kita pakai Next.js, Wellkit, Astro apapun itu, itu kan by default starternya hampir semua
atau malah semua udah ada TypeScript-nya. Jadi why not. - Nah kan fit pun udah ada kan?
- Gimana kalau menurut kamu, kalau menurut Eka gimana kalau misalnya meskipun dia sudah ada
sudah established nih codenya tetapi kan kita tetap ada penambahan fitur baru.
Kalau misalnya kita bikin packaging-packaging sendiri kayak package sendiri gitu.
- Oh ya kalau package sendiri kan itu udah bisa. - Main codebase-nya kan banyak package itu modular tuh.
Jadi package yang kita sendiri udah pakai TypeScript gitu. Bisa juga kan ya?
- Ya bisa, bisa juga. Kalau emang ada resource-nya. Cuma ya mungkin itu, ya tergantung.
Lagi-lagi tergantung timnya gimana terus kayak apa, dari segi project management ya ada
resource-nya yang tersisa berapa. Mas sebenarnya TypeScript itu bagus, improvement,
tapi nggak urgent banget harus sekarang banget ditambahin ke existing project lebih keitunya sih.
Tapi kalau bisa ya lebih bagus. - Intinya nggak usah berantem gara-gara harus pakai TypeScript
kalau nggak usah dipaksa-in. Apapun dipaksa-in itu kurang bagus.
- Pertanyaan yang bagus dari Bumantara, kalau mau belajar TS apakah harus belajar JS dulu?
- Tadi designer-nya nggak tuh, yang designer tadi nggak kan?
- Tapi behavior-nya, sintaksinya kan sebetulnya JS juga itu.
- Choose name sama dengan Eka, itu kan JS. - Mungkin sintaksinya nggak, tapi konsep-konsepnya
seperti promise, callback, dll. itu kan JS semua. Ditambah lagi..
- Semua cara ngedefinisi invariable, bikin book itu JavaScript semua. Jadi ya jelas-jelas.
- Ditambah lagi kadang-kadang error-nya itu bukan error TypeScript, tapi error JavaScript
apalagi di runtime kan, itu yang muncul kan error JavaScript. Kalau kita tidak mengerti JavaScript,
bingung juga itu. Jadi mungkin fundamental JavaScript perlu sedikit,
kemudian langsung masuk ke TS, nggak apa-apa. - Event loop, event loop.
- Event loop, iya. Pokoknya konsep-konsep JavaScript itu harus dikuasai dulu.
Ini ya, tadi kita bahas tentang developer experience. Kita harus mengorbankan developer experience
susah-susah di kita. Yang penting user terbantu atau user experience-nya bagus.
- User experience harus bagus. - Mau enaknya kita.
- Tapi kalau ada experience yang bagus, ya why not? - Iya. Tapi kalau misalkan nggak ada pilihan nih,
kita harus susah nih. Kita harus mengutamakan si user. - User dulu.
- Percuma aplikasi kita keren banget, tapi user nggak ada yang pakai kan, percuma kan.
Ini juga nih. Berakit-akit kehulu, berenang-renang kemudian ya.
- Nah ini mau lulus apa? - Kalau udah, nggak,
kalau udah lulus kompilasi TypeScript-nya udah aman.
- Mau share pertama kali aku pakai TypeScript nih sebelumnya, sebelumnya udah belajar
dikit, baca-baca kayak tutorial gratisan, baca e-book gratisan, cuma ya namanya baca kayak gitu,
suka niat nggak niat kan, pas lagi pengen dibaca, abis itu lupa. Nah intinya cara paling,
ya kalau menurut aku cara paling manjur buat belajar TypeScript adalah bikin proyek pakai TypeScript.
Langsung bikin proyek aja. Walaupun ya pertama pasti, ya itu tadi sesuai komennya,
beneran pusing dan capek, semua merah, asli merah semua. Terus kayak tadi kayak komen yang di awal tuh,
"Eni, eni, eni, are you okay eni?" Kayak lagu. Nah cuma kan pas kita mouse over ke error-nya,
itu kan ada kodenya, dan ada keterangannya, dari situ kita bisa lihat itu kodenya kenapa,
dan kita bisa biasanya cek stack overflow ya. Ada keterangannya, ya kita baca aja
conversasinya itu apa, cara betulinnya gimana, pas awalnya emang kopas-kopas aja,
kadang malah nambah merahnya nambah banyak, kadang merahnya pindah. Nah untungnya seringnya
akhirnya merahnya hilang. Dengan satu persatu mengilangin error-nya itu, kita lama-lama ngerti sih.
Jadi itu kayaknya kalau misalnya kita cuma baca, kita dalam keadaan belum tahu time strip,
terus kita cuma baca, itu nempelnya tuh agak sulit. Harus ngalamin error sendiri.
Nah cuma, ya apa tetap kalau di production atau aplikasi yang penting atau berurusan sama orang lain ya,
jangan pakai aplikasi yang personal project atau yang kecil-kecil aja dulu.
Iya. Tadi ada pertanyaan yang bagus juga, nggak tahu ada yang ini, nah ini.
-Banyak tuh bagus. -Banyak ya? Biasanya pakai time strip biar mengurangi
menghapal property atau method yang dimiliki satu objek. Apalagi kalau data structure-nya udah nested.
-Iya, salah satu contohnya juga. -Inter-desense ya, pakai inter-desense.
Jadi kalau di compiler options kita bisa nentuin kan targetnya itu mau isnext,
next itu kelihatannya yang tahun berjalan ya.
-Ya, tahun berjalan. -Syntax dari ECMAScript specification
di tahun ini, atau bisa juga dispesifikasiin is5, is6, dan seterusnya.
Nah itu tuh kita dapet gratis type definitions untuk ECMAScript dan DOM Note API.
Jadi event, misalnya mouse event ya, itu kan bawaan yang ada dari browser.
Itu kita tinggal ketik aja misalnya terima parameter event, titik 2 mouse event.
Itu ada muncul sendiri. Jadi event itu isinya apa, atau misalnya event itu kan bisa kita bikin listener.
Apa aja yang bisa di listen, itu tuh ada di definisinya.
Kalau project-project atau library-library X third party yang kita pakai,
kalau dia menyediakan type definition-nya, kita juga bisa langsung pakai.
-Langsung dapet tau. -Betul.
Nah gimana kalau kita pakai library lama yang belum ada,
nggak bawa type definition sendiri, kita bisa pakai definity type.
Itu ada link-nya somewhere bentar.
-Ini sudah disiapkan. -Asik.
-Ini kan? -Definite type.
-Ini apa nih? -Ini type definition yang unofficial.
Jadi kalau misalnya kita pakai external package atau library yang belum ada type definition-nya,
merah semua kan tau. Nah kita install, ininya type-nya.
Oke. Ini semua library yang belum ada type-nya?
-Kita install ini, terus dia langsung... -Iya, itu tergantung ada yang pull request atau nggak.
Cuma kalau cukup terkenal sih, hampir pasti ada.
-Hampir pasti ada ya. -JQuery ada nggak?
JQuery udah bawa kali, kayaknya ada deh.
-Kalau dari jQuery-nya udah bawa. -Ada jQuery-nya.
S-Express? Ada nggak Express? Ada dong. American Express.
-Gak ada. Express udah ada sendiri. -Ada kebawah, itu tuh.
Bahkan saking banyaknya folder-nya. Delay zilot. Coba kebawah, panah kebawah.
Oh gitu. Delay zilot. Baru sampai C.
Kayaknya ada next-nya, pokoknya nggak ditampilin semua saking banyaknya atau gimana.
-Cupa. -Oh gitu.
Jadi dari UI Web GitHub itu sampai nggak cukup.
Apa nggak besar ukurannya? Cuma tab doang nggak besar ya?
-Kecil kok. -Ini kan cuma kecil ya.
Buka aja salah satu contohnya.
Contohnya ya, oke. Tadi ada...
Oh nih, ada tulisannya. "Sorry, we had to truncate this directory to 1000 files."
Sebetulnya isinya ada 7862 package. Cuma yang ditampilin cuma seribu.
Ini misalkan isinya apa?
-Tab definition gitu doang. -Tab definition ya.
Bahkan kalau kita nggak mau install nih, kita cuma pengen pakai salah satu gitu.
Dari library ini kita cuma impor satu metode ya, satu function.
Ya udah kita kopas aja itu tadi.
Bisa dicari... Sekarang Google... Eh, sorry, Google. GitHub ini bisa ada search functionnya.
-Bisa bagus banget kok. -Iya, bisa.
-Dicari di sini ya. -Iya.
-Misalkan apa tadi? JQuery. -Expression.
-JQuery. -JQuery.
-Pi repository. -Ini kalau jQuery-nya sendiri...
JQuery-nya sendiri udah ada tab definition-nya, nggak bakal ada di sini.
-Gak kelihatan. -Ini cuma buat...
-Gak ada, Bati. -Ada, tapi kayaknya nggak kelihatan.
Support for new jQuery.
Ada yang nanya, XTJS ada nggak? XTJS?
Ada, cari sendiri lah. Cari sendiri.
-JQuery, power picker. -Hahaha.
Mana ini ya? Nah, ini dia. Ini kan.
-Kin silahkan cari sendiri. -Oh, ada tips-nya bagus tuh.
Ada komen bagus tuh paling bawah.
-Kalian lihat di NPM.js kalau ada icon DT. -Oh.
Berarti ada di definitely type ya.
-Oh, nice, nice, nice, nice. -Oh, ini caranya.
MGS. Terima kasih.
-Tadi. -Terima kasih.
-Akan tadi apa? JQuery. -Hahaha.
Niat, Niat.
Hahaha.
Iseng.
-Tuh, ada DT-nya. -Oh, ada DT-nya.
-Nice, nice. -Ada.
Express. Pasti ada. Express juga udah ada ini-nya.
Oh, digadikan satu repo ya.
Menarik, menarik.
Oke, mantap.
-JQuery not dead. -JQuery is not dead.
-Ya, not dead lah. -Long live, long live.
Hahaha.
Nah, ini bahasan baru lagi nih.
Kalau Mas Donny ini udah kemana-mana eksplorasinya ya.
Data Oriented Programming.
Nah, baru lagi nih ya.
Apa itu? Hahaha.
Pake JSON, validasinya bukan di level teknologi web apapun.
-Nah, ini mantap. -Tapi di data.
Biar framework agnostik kali ya. Bahkan teknologi agnostik kali ya.
-Karena itunya di level lain. -Di level data.
Kalau nggak salah, Quick atau apa ya?
Punya yang baru itu pakenya kayak gitu deh.
Jadi, dia menjenerate semacam react component atau apa, on the fly.
Builder.io yang punya Quick.
Cuma dia kan punya teknologi lagi.
Builder.io.
Jadi intinya suatu komponen itu dibikin JSON-nya.
JSON-nya, nama komponennya apa,
-proposinya apa, -Kaik skema ya.
behavior-nya gimana,
dan diceknya, logiknya semua,
bahkan di-store ke database-nya itu dari situ.
Jadi, bisa menjenerate komponen
pakai framework atau UI library apapun on the fly.
-Nih, next level. -Next level.
Nah, ini juga pertanyaan bagus.
Sebenarnya udah sering kita jawab di episode-episode sebelumnya.
Kenapa fitur-fitur TS nggak dimasukin aja ke browser engine,
ke JavaScript engine?
Susah.
Soalnya kan si JavaScript ini,
teknologi web secara umum ya,
baik itu HTML, CSS, JavaScript,
itu harus mengakomodir browser yang paling jadul
sampai browser yang paling modern.
Kalau kita masukin di engine yang modern,
terus orang-orang bikin TypeScript semua,
apa kabarnya tuh yang masih pakai IE 11 gitu ya,
belum edge, kan?
-Nggak bisa jadi error semua. -Harus ada backwards compatibility.
-Compatibility. -Compatibility dengan versi sebelumnya.
Terus, atmosphere itu kan, apa,
kita pernah bahas tuh, itu mereka konferensinya kayak,
mereka bikin launching spesifikasinya
cuma setahun sekali,
dan melibatkan stakeholder-nya,
pemangku pentingnya tuh banyak banget dari berbagai perusahaan,
yang mana ya sulit lah bikin orang sebanyak itu,
dengan kepentingan sebanyak itu,
sepakat itu kan agak sulit,
jadi emang mungkin cycle-nya juga nggak bisa sembarangan
nambahin ini itu, nggak bisa nambahin fitur yang ekstrim.
-Betul, karena web itu apa ya, open kan,
kalau misalkan katakan lah kayak Android atau iOS gitu,
mau nih, yang versi, -Yang punya cuma satu perusahaan.
-Iya, nggak support lagi versi ini, Donut gitu kan,
Android Donut itu udah nggak support lagi, atau Eclair gitu.
-Itu dalam apa, bang?
-Ya udah, dimatiin aja, udah, silahkan ganti handphone Anda,
kalau nggak bisa gitu kan, segampang itu mereka melakukan,
memutus rantai yang dulu-dulu,
kalau web kan nggak bisa, terus tiba-tiba ada yang akses web di embedded system,
yang masih, yang layarnya kecil, atau yang di mesin apa gitu,
mereka akan punya kepentingan,
dan si web ini harus mengakomodir semua kepentingan itu,
makanya nggak bisa sembarangan, bahkan kayak pertanyaan-pertanyaan seperti,
kenapa React nggak masuk aja ke JavaScript Engine,
nggak perlu pakai framework lagi, udah semuanya React.
Ya itu, jadinya web komponen, ujung-ujungnya ya,
yang bisa dipakai semua, tapi masih agnostik lah, gitu.
-Tentunya kayak quadcopter yang ada di Mars kan, pakai JavaScript kan.
-Tiba-tiba runtime error, itu jatuh.
-Gimana coba di sana nanti update-nya?
-Specifikasinya berubah, pakai polyfill-nya nggak jalan.
Ya, konsiderasinya sangat banyak, gitu.
Kalau kita mau nge-post satu fitur aja, itu panjang jalannya.
Jadi harus proposal dulu, dari proposal dibahas,
abis itu masuk ke kandidat, dan seterusnya kita udah pernah bahas juga ya, prosesnya.
Walaupun sebenarnya ada, wacana ke sana ada,
jadi kabarnya JavaScript mau ditambahkan type, ya mungkin sifatnya opsional.
Tapi ya itu masih panjang jalannya, gitu.
Ada kemungkinan tetap, ada kemungkinan.
-Itu di JavaScript-nya atau di ECMA script-nya ya, berarti?
Dari ECMA script? -Di ECMA-nya.
Ya, contohnya gini aja.
Contohnya gini, kalau ada yang tahu coffee script,
beberapa fitur IS-6 itu diadaptasi dari coffee script.
Contohnya arrow function, itu dari coffee script.
Dulu JavaScript nggak bisa arrow function kan, sekarang bisa.
Jadi ada bahasa, dalam tanda kutip bahasa transpiler yang di atas JavaScript,
yang kadang-kadang kalau make sense,
itu akan diadaptasi ke dalam JavaScript-nya sendiri atau ke dalam ECMA script.
Jadi kemungkinan ke sana tetap ada, tapi jalannya agak panjang.
-Mungkin kembali lagi ke pembahasan kita yang lalu di JavaScript engine.
JavaScript engine itu nggak cuma, JavaScript engine itu bukan Node.js loh.
JavaScript engine itu V8.js, Spider Monkey.
-Java script core. -Java script core yang punya Apple.
-Webkit. -Webkit.
Jadi JavaScript engine kan rantainya yang salah.
Yang menjalankan ya, engine-nya untuk menjalankan JavaScript.
Jadi kalau misalnya mau menambahkan sesuatu, harus agree dulu nih.
Minimal yang Fendor yang tiga ini agree.
Oke, kalau kita mau nambahin TypeScript,
berarti ketiga ini harus agree untuk nambahin TypeScript.
-Mereka semua harus mengimplementasi di mesin mereka, dekode mereka sendiri-sendiri.
-Iya. Dan mereka punya masing-masing ini kan, punya masing-masing kepentingan.
-Tergantung device-nya. Eh, Samsung browser itu pakai apa engine-nya?
-Chromium? -Chromium ya.
-Aman berarti ya? -Ya.
-Aman. Dolphin, Dolphin pakai apa Dolphin?
-Apa itu? UC ya? UC browser.
-UC browser. Banyak. Jadi banyak sekali.
-Opera mini, opera mini. -Opera mini dulu ya beda lagi tuh ya.
-Serem itu. Untung udah nggak ada yang pakai.
-Udah gele-gelek mereka yang mengalami. Ini pertanyaan Mas Donny ini apa ini maksudnya nih?
Nggak ngerti nih. Vendoring itu apa?
-Pendukung tanpa meng-include di... -How could we support TypeScript without vendoring it?
-Sebagai pembuat aplikasi web atau sebagai... -Pembuat library.
-Pembuat library yang diinstall orang atau apa ya?
Kalau di library kan kita bisa pakai apa itu? Ini sebetulnya dev dependency kan.
Jadi itu dihandle oleh si package manager kan.
Kalau misalnya pakai yang package manager yang kayak PNPM atau mungkin sekarang yarn workspace juga udah bisa kayaknya ya.
Dia ngedeteksi di user yang menginstall library kita tuh, dia udah punya TypeScript atau belum.
Kalau udah kayaknya bisa nggak beneran install TypeScript lagi deh di dependency-nya, di node modules-nya.
-Ini tadi ada yang minta demo-in, jalanin TypeScript buat Node.js.
Wah saya lagi nggak di development laptop nih. Jadi saya tunjukin ini aja.
-Streaming laptop.
Itu tadi yang playground-nya itu aja.
-Kalau pengen nyoba tanpang install harus Node.js, susah.
Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-Kalau pengen nyoba tanpang excel, ya itu. -Kalau pengen nyoba tanpang excel, ya itu.
-LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-LipUV itu ditulis dengan C++. -LipUV itu ditulis dengan C++.
-Untuk topik sendiri kita rantai JavaScript belum pernah bahas ya. -Untuk topik sendiri kita rantai JavaScript belum pernah bahas ya.
-Enak kan? Kita kan? Nggak perlu nyari-nyari lagi. -Enak kan? Kita kan? Nggak perlu nyari-nyari lagi.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Kita tinggal nanya-nanya aja. -Kita tinggal nanya-nanya aja.
-Kita tinggal nanya-nanya aja. -Kita tinggal nanya-nanya aja.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Nest. -Nest.
-Nest. -Nest.
-Nest. -Nest.
-Nest. -Nest.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Yang ngomong bintang tamu. -Yang ngomong bintang tamu.
-Kalau jadi ray, tidak di-convert jadi set. Ya, pertanyaan bagus ini. Saya juga nggak tahu jawabannya kenapa.
-Oh, ini ada kemungkinan di setting ts-config-nya.
-Kalau ts-config-nya masih is3, ya pasti ke ray, kan.
-Kalau misalkan ke isnext, mungkin dia akan jadi set. Mungkin ya.
-Mungkin, coba. Coba nanti kasih tahu kita. -Yes.
-Ts buatannya rivalnya Google. Iya, tadi menjawabin tadi ya.
-Kusus teknologi. Apa, refill itu ya nama perusahaan. Cuma kayaknya kalau teknologi web ini paling unik deh.
-Paling unik, betul. -Gak bisa di, kalau tadi kayak contoh Android,
iPhone kan jelas perusahaannya apa ya, dan bisa strict apa, ya emang ekosistemnya di situ doang.
Cuma kalau web kan kayaknya. -Web itu komuniti.
-Even di Chrome kita bisa membuka website atau web app yang dibuat dengan React.
Ya kan, nggak mungkin kan Chrome memblokir website yang dibikin pakai React.
Karena React jelas punya perusahaan lain.
Kayaknya jadi web itu satu-satunya yang ekosistemnya random bisa kita sekali develop bisa ketemu banyak perusahaan.
-Sama aja lah, kayak kenapa Android nggak pakai golenk, padahal Java kan bukan punya dia, gitu kan.
Sama aja kan. Bukan buatannya dia, malah pakai punya yang lain.
Tuh kan jadi gontok-gontokan kan di pengadilan kan. -Iya ya.
-Iya kan, rebutan. Bisa tidak langsung belajar TS tanpa JS?
Btw basic saya C#. Sebenernya kayaknya cocok ya. -Cocok lagi.
-Iya cocok. Karena C# itu mirip. Bukan mirip ya.
-Tapi tetap harus butuh dasar JavaScript yang itu tadi. -Iya.
-Iya. Yang buat juga orang yang sama. -Iya.
-Jadi sebenarnya cocok. Cuman kalau ketemu error, biasanya kalau errornya TypeScript mungkin aman.
Tapi kalau errornya di JavaScript, di runtime, ya kita butuh tahu JavaScriptnya kan.
Terus apa yang fundamental tadi, kayak event loop, promise, asing await, callback, event loop, dan lain-lain itu ya JavaScript semua sebenarnya.
-Iya dan eventually semua kode TypeScript kita akan dipompil lagi ke JavaScript yang bisa dibaca oleh browser.
Jadi ya mau nggak mau, mesti ngerti lah, ngerti JavaScript. Cuman kalau perkara belajarnya ya kalau emang dirasa bisa dan nyaman,
belajar dua-duanya. Maksudnya nggak beneran harus blocking, nyelesain belajar JavaScript dulu, habis itu baru TypeScript.
-Iya, sambil ya. -Yang nggak wajib gitu juga, disambil pun nggak apa-apa.
Asal kita sadar bahwa tetap perlu tahu behaviornya JavaScript, apalah misalnya jenis-jenis datanya kayak gimana,
konsep-konsepnya yang kita tadi disebut, event loop, dan lain-lainnya kayak gimana, asal kita pelajarin itu barengan dengan gadget TypeScript.
-Ya. -Apa nonton ngobrolin webstrip Aris Lhasa?
-Asik, asik. Jualan. Ya ini tuh, less coding tuh, udah ada yang jawab ya. Kalau udah terbiasa dengan CSS, ini berasa kenal ya sama TS ya.
Karena yang bikinnya sama juga, orang yang sama. Tadi ada yang menjawab itu yang full stack tadi, nest.js,
ada juga yang saya baru ingat namanya adalah Adonis.js. Adonis ini adalah yang mirip sama Laravel katanya.
-Versinya Node.js? -Versinya Node.js. Versi itu dia front-end kan? Front-end, back-end? Oh, back-end, Node.js.
-Oh, back-end, back-end. -Ya, back-end. -Kalau mau ngerender, ngeretern, html, dibikin pake script juga bisa.
-Hah, oke. Eh, kita udah satu setengah jam loh, seru juga ya. -Seru juga, padahal dari sebelumnya udah farm, kayaknya nggak ada materi,
nggak belajar apa-apaan, cuma ngobrol beneran. -Iya, ini insight dari temen-temen lebih menarik ini.
Karena banyak yang udah ngalamin juga, ada yang pake, ada yang belum pake, ada yang mau belajar, gitu kan.
Jadi terima kasih ya buat diskusinya malam hari ini. Kita banyak belajar juga dari temen-temen.
Ada lagi yang mau disampaikan, Eka, Ivan? -Ada, tadi kan ngomongin error typescript tuh pas belajar.
Coba buka tuh yang di chat. Typescript.tv/errors. -Tadi udah dibuka, nah ini. Terakhir ya.
Typescript error, and how to fix them. -Nah, kita kan scroll dikit.
Nah sebel kan tuh pasti mouse over TS 2322, TS 2335, kayak ngoleksi Pokemon aja.
Jadi ini adalah penjelasannya. Kalo kepala satu, dua, empat, blablabla, terus diklik aja tuh salah satu contoh.
Oke, kalo misalkan ini. Oh, ada videonya segala. -Nah, mungkin kalo kata-katanya,
penjelasannya private modifier cannot appear on a type member. Apa itu? Kita kan ga ngerti sebel kan.
Ini dikasih contohnya yang simple, straight to the point, kita bakal lebih gampang paham.
Oke, wah ini nih, bener. -Yang masalahnya gimana, mpinterinya gimana.
Oh, menarik, menarik. -Nice. Ini nih. -Iya.
Gue mau belajar typescript begitu gue ngobrolin di sini, besok-besok langsung lebih cepat belajarnya.
Iya, tadi kan ada yang... -Besok langsung ngebujukin lead, ganti semua ke typescript.
Ada yang di awal tadi ya, yang bilang malah makin lambat ya ini kan.
Pakai malah makin lambat karena nyari typenya berjam-jam dan ya error-nya tadi ya,
ternyata udah ada yang ngumpulin nih di sini nih. Sampai berapa nih? Errornya aja berapa nih?
-Banyak. -Oh, ga banyak, engga.
Terus sampai bawah, ternyata itu satu halaman ya. 100, 219 saja.
Wajar nih, itu bukan saja. -Nah, itu tadi kayak Pokemonnya itu.
-Tigal kontrol F. -Tigal kontrol F kan, cari.
-Anggap aja collectible. Kita mengkoleksi udah ketemu semua error atau belum.
Ketemu semua bisa tuker payung cantik.
-Tuh, ada yang nungguin ngobrolin PHP loh. Kapan kita ngobrolin PHP?
-Bisa, bisa. Nanti kita undang ini Om Peter. -Bapak PHP Indonesia ya.
-Ada yang jawab tuh tentang set. -Oh, yang tadi set.
-Kalau pakai skat. -Masuk akal, masuk akal.
-Set remove duplicate value. -Iya, enak sih itu.
-Set remove duplicate value.
-Kalau udah mentok tinggal TS ignore. Haha. Sama aja kayak ini ya.
-Cuma ternyata si yang bikin project bikin ISLint rule. -Strict.
-Kalau TS ignore nih, marahin. Bisa, ISLintnya diignore, ignore satu time.
-Gak boleh push, gak boleh push. Nggak lolos. Sekarang enak, betul.
Tinggal chat GPT, pakai chat GPT ya. Ini error apa, gitu kan.
-Tapi kalau aku chat GPT-nya jawabannya bisa ngaco juga. -Iya jelas.
-Tuh, titip topik, yang belum pernah kita, ada yang implement belum.
Best practices for TypeScript in multi repo.
-Multi repo apa? -Multi repo itu lawannya mono repo, bukan?
-Kalau dari kata-katanya, ya mono satu, multi banyak.
-Cuma ini Movin bisa ditarik, jadi itu shared configuration nggak sih kan selama ini project itu ada TS config, ada ISLint config,
logikanya kalau kita pingin streamline, gimana caranya biar itu satu config yang sama, yang konsisten bisa dipakai di banyak project.
Cuma caranya gimana kita juga nggak tahu sih. Nanti kapan-kapan dibahas lah, masukin wishlist.
-Bisa ada caranya, terserah. -Disimpan ya.
-Kampannya begitu juga. -Disimpan ya untuk episode-episode berikutnya ya.
-Cuma itu topik yang seru sih. -Seru, seru.
Kita bahas mono repo juga belum kan, micro front-end juga belum kan, masih banyak.
Masih banyak, sabar, tenang, tenang. Makanya jangan lupa subscribe ya.
Katanya TS lebih safety dibandingkan JS, benar dari tadi kita ngomong dari awal.
-Safety itu type safety ya. -Safety di sini maksudnya gini ya, apa?
-Static analysis. -Static analysis, jadi misalkan menghindari kesalahan-kesalahan gitu.
Misalkan satu ditambah string 1, jadinya 11 gitu kan, atau ada typo, dan lain-lain.
Biasanya kan kalau kita tulis di JavaScript, bisa aja itu masuk ke production kan.
Dan yang menerima error itu adalah user, biasanya kita pasang sentri, pokoknya login sistem gitu kan.
Nanti kirimin errornya, oh errornya undefined is not a function atau undefined gak bisa di lowercase kan.
Ya iyalah bukan string gitu kan, nah itu kan tidak safety gitu kan.
-Makanya dengan TS dia lebih safety, maksudnya safety itu disitu bukan akuritas. -Dan selain itu safety pas static analysis kita develop.
Nah kalau di front-end nih, terutama kalau kita ngerjain front-end,
itu bisa juga safety dalam menghadapi kayak bisnis logic lah, bisnis requirement.
Kayak contoh konkret nih yang pernah dialamin.
Misalnya di awal jenis user itu cuma satu, yang daftar dari email dan password.
Jadi semua user harus ada emailnya, harus ada passwordnya jelas.
Tapi abis itu ada development baru, ada ticket baru, feature baru, user bisa daftar lewat SMS.
Phone number dikirimin OTP ya kan.
Nah kan user itu jadi berubah kan, user itu bisa jadi user yang pakai email.
Di mana email, pasti harus ada emailnya gak boleh kosongan, bisa juga user yang pakai SMS.
Nah dia gak punya field email, gak punya field password.
Nah namanya developer manusia kita bisa, mungkin di modul atau di bagian kode yang loginnya, kita tahu itu kita ngebah itu.
Tapi mungkin di halaman settings atau halaman account, ada yang kita lewat, kita lupa, kita nganggep email itu pasti ada.
Nah kalau kita gak handle itu kan bisa mengakibatkan error.
Nah dengan TypeScript, otomatis itu bakal nyala sendiri jadi error.
Jadi kita pasti mengupdate kode kita setiap ada perubahan dari business requirement.
Jadi itu secara ke langsung type safety dalam hal static analysis dalam development khususnya front-end.
Oke mantap.
Nah sambil ngobrol nih, sambil ngobrol ya, kalau teman-teman, ada waktu sedikit?
Bisa ke bit.ly/tiga-kata-ngobrolin-web, jadi tuliskan tiga kata yang menggambarkan acara ngobrolin web malam hari ini.
Kita pengen tahu feedbacknya teman-teman, ayo ditunggu sampai ada yang ngisi.
Kalau gak kita gak udahan.
Kita ngobrol terus-terus.
Terus mereka gak ngisi-ngisi.
Oh ada, udah ada yang ngisi nih, lihat tuh.
Tapi ngisinya minta di demo-in.
Ya lumayan, minimal ada yang ngisi.
Tadi siang atasan demo-in prototype, prototype ini bikin contoh aplikasi ya.
Terus ada dekan yang tanya kenapa gak pakai TS, jawabannya biar cepat.
Salah satu kelebihan dari bahasa yang dinamis itu lebih cepat ya.
Iterasinya lebih cepat, tapi belum tentu tadi, safety ya.
Dan bahkan kalau cuma buat demo sih gak apa-apa, malah enak JavaScript bisa dikopas langsung ke browser DevTools.
Kalau pengen beneran buru-buru banget ngetes suatu function misalnya.
Betul.
Terus selama ini bingung kalau nge-fetch data yang kompleks.
Tapi si penyedia data gak nyediain typenya.
Jadi harus bikin typenya sendiri, manual.
Iya, itulah salah satunya ya.
Oh bagi link-nya.
Oke, siap-siap.
Sebentar ya, link-nya itu ada di sini.
Saya kopas dulu.
Kopas.
Nah, eh kelihatan ya, jangan.
Gak apa-apa juga sih.
Gak apa-apa.
Gak apa-apa.
Paling tiba-tiba ada yang masuk stream, biar.
Oh iya.
Gak apa-apa juga.
Tapi bisa ditolak, bisa ditolak.
Santai.
Slow, santai.
TSEZ, asik.
TSEZ, mantap.
Menarik.
Terima kasih ya, mantap.
Terima kasih.
Wah, seru juga ngeliatin ini ya.
Saya telat join.
Makanya subscribe.
Terus ada itu, ada lonceng itu dinyalain ya.
Biar gak telat, gitu.
Kan bisa on-demand juga.
Kalau deklar, nonton lagi dari awal.
Pendapatnya soal masa depan you.
You ini apa?
You saya tahu.
You man.
You man.
You man, gimana jaman dulu banget.
Keburu-buru.
Keburu-buru.
Ya udah.
Gitu kan? You man, kan?
Yang logonya kayak prajurit gitu ya.
Logonya apa sih? Kayak orang pake...
Bukan playan ya?
Pokoknya logonya orang
pake seragam apa gitu?
You man sama Grand GS
pokoknya.
Grand GS.
Svelkit plus TSEZ.
Svelkit.
Svelkit.
Udah support.
Tinggal lang sama dengan TS.
Ya kita bikin dari
starter nih create new Svelkit site.
Udah ada opsi buat pake live stream,
pake ASLIN. Udah lah tinggal
pencet sekali, enter-enter aja.
Langsung diurus
oleh starternya.
Web component. Eh salah.
Bukan ini, tadi saya mau ini.
Framework.
RAS. Oh RAS.
Belum, kita belum...
Belum punya pendapat.
Belum nyobain.
Ya, lead component juga menarik nih
topiknya. Terima kasih ya, dia.
Kita udah pernah bahas component.
Kita pernah bahas, cuman gak detail
banget ke lead-nya.
Cuma base, base sekilas aja
contoh-contohnya.
Ada yang sudah...
Object-object gitu loh.
Ini lupa diparsing
ini ya.
Yang sering-seringify ini.
Kita nih login
apa sih, aplikasi e-banking.
Saldo Anda, NAN.
Object-object, NAN.
Saldo Anda, NAN Rupiah.
Oke-oke.
Ya, sudahlah. Daripada kita
nontonin terus, gak ada habisnya.
Jadi udah lewat 1 jam
35 menit. Rekor ya.
Kita berapa sih paling lama? Lumayan ya.
Masih rame aja
lagi malam-malam begini.
Udah ditungguin soalnya,
udah ditungguin.
Kita lanjut lagi minggu depan.
Terima kasih buat teman-teman
yang sudah hadir dari awal sampai akhir.
Diskusinya luar biasa seru.
Mudah-mudahan yang
diskusi malam ini bermanfaat
bisa buat bahan-bahan belajar
ke depannya dan berguna untuk
pekerjaan atau kegiatan sehari-hari.
Kita pamit. Selamat malam.
Selamat istirahat. Sampai jumpa
minggu depan.
Bye.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
22 Nov 2022
Ngobrolin Viteconf
Episode ini membahas Vite dan ViteConf yang baru saja digelar. Dimulai dari pertanyaan mendasar: kenapa kita butuh bundl...
9 Mei 2023
Ngobrolin React+Komunitas
Episode ini kedatangan beberapa penggerak Komunitas React Indonesia, dan dibuka dengan perdebatan klasik: React itu pust...
4 Jan 2023
Ngobrolin 2023
Episode awal tahun ini berisi daftar hal yang menurut Riza, Eka, dan Ivan akan menarik sepanjang 2023 — bukan ramalan, m...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .