Hai guys balik lagi bersama gua ranggopato di channel pemograman favorit kalian yaitu channel Kenapa coding nah di kesempatan kali ini kita akan membahas tutorial typesript dari awal sampai akhir seperti biasa pematerinya masih dari gua sendiri yaitu Rango Pato tutorial Ini gua bikin gratis untuk teman-teman semuanya jadi pastikan teman-teman nge-like videonya teman-teman juga post random komen di bawah dan teman-teman juga wajib nge-share video ini ke teman-teman yang lainnya agar ilmunya tidak berhenti di teman-teman semua Nah apa yang barusan teman-teman lakukan itu juga gratis ya Nah kalau misalkan teman-teman ingin berdonasi goyang kopi gua di saweria.co/kenapa coding Oke daripada lama-lama Langsung aja kita masuk ke materi tutorialnya Nah sekarang kita masuk di pengenalan typesript jadi typesript Adalah bahasa pemrograman open source yang merupakan superset dari javascript jadi dia javascript tapi dia supersetnya kalau misalkan tem-teman lihat diagramnya kayak gini ini javascript ini adalah tabesript kayak gitu ya ini tu berarti bahwa semua kode javascript yang valid juga merupakan kode typescript namun typescript memperkenalkan tipe statis ya atau Static typing dan beberapa fitur lainnya untuk meningkatkan produktivitas pengembang atau developer nah tab script ini sendiri pertama kali dikembangkan oleh Microsoft yaitu dan dia itu dirilis pada tahun 2012 nah bahasa ini dirancang untuk memperbaiki kelemahan dari javascript makanya tadi disebut supersetnya Nah jadi eh banyak kelemahan javascript ya dalam hal pengembangan aplikasi skala besar nah khususnya dalam hal penanganan tipe data dan pemrograman berorientasi objek jadi eh kelemahan-kelemahan javascript itu di perbaikilah oleh si typpt ini tapi ingat ya typpt adalah suerset dari javascript jadi basic Sema kode javascript teman-teman ya itu juga merupakan kode tabript ya Jadi kalau misalkan dia eh bisa running di javascript berarti dia juga bisa running di typescript sekarang kita bahas terlebih dahulu perbedaan dari typescript sama javascript nah kayak yang gua bilang tadi dari segi fitur tipe statis ya kalau javascript itu sendiri dia tidak mendukung tipe statis Nah kalau tabesript dia mendukung tipe statis dan deklarasi tipe itu ada di tabp lanjutnya untuk penangkapan error ya Nah error di javascript itu sendiri terdeteksi hanya saat Run time Nah ini kan jelek ya jadi waktu ah Run nih baru eh errornya terdeteksi kalau tabript errornya itu terdeteksi saat compile time Nah jadi E ini lebih bagus gitu Jadi teman-teman bisa lebih tahu terlebih dahulu errornya selanjutnya untuk enteroperabilitas ya itu kalau javascript dia digunakan langsung di browser sedangkan typesript itu sendiri dia harus dikompilasi ke javascript terlebih dahulu Nah jadi ini bedanya ya jadi eh typript itu adalah eh bahasa pemrograman yang harus dikompilasi ke javascript kayak gitu ya Nah selanjutnya dari segi Oop eh javascript itu mendukung Oop ya tapi sebenarnya ya itu dia tanpa dukungan yang secara jelaslahya yaedang kan typript itu sendiri dia memiliki fitur Oop seperti class interface dan inheritance gitu ya dia emang Eh emang Dib Ang untuk Oop ini sendiri reasonnya Makanya dari segi eh Oop ya OB oriented programming itu sebenarnya lebih bagus pakai terus selanjutnya untuk kompilasi kalau javascript ya Kak gu bilang tadi dia tidak perlu dikpilasi kalau misalkan typpt itu harus dip dulu dia ke eh bahasa induknya atau ke javascript gitu ya karena dia adalah superset dari javascript Nah selanjutnya untuk segi penggunaan ya Nah kalau javascript itu sendiri dia itu di biasanya digunakannya itu secara standar ya untuk e pengembangan web Ya tapi kalau misalkan teman-teman pakai typript ya kalau teman-teman lihat proek-proek gede itu biasanya pakai typpt atau dengan tim yang besar ya ini manajemen kodenya sebenarnya lebih bagus atau lebih baik pakai tript ya karena dia lebih jelas ya Eh dengan segala fitur-fiturnya ya Makanya eh kebanyakan sekarang-py itu kalau misalkan bikin aplikasi itu ya udah pakai tabpt langsung gitu ya contohnya sekarang kalau misalkan teman-teman familiar dengan rect ya react itu kebanyakan Eh projectproject sekarang ditanganinya pakai Tab Terus kalau misalkan teman-teman pakai vijs jugajs e itu juga kebanyakan Pro nya sekarang ditanganinya pakaip juga kalau misalkan teman-teman lihat yang di e angular angular itu basically emang typp ya itu beberapa frontend framew ya pakai typp Terus sekarang next JS sor next JS itu backend ya backend bahasa frameworknya untuk bikin backend lah Yai itu dia juga pakaip ya Pokoknya banyak ya sekarang itu emang e musimnya tab script ya Dan kalau misalkan teman-teman kerja pun ya mostly Emang TPT gitu ya di perusahaan-perusahaan gede pun pakainya tpesript oke nah terus kenapa nih kita perlu menggunakan typesript Nah jadi ada beberapa alasan kenapa developer itu lebih memilih typesript dibandingkan dengan javascript terutama dalam pengembangan Project yang skalanya besar Nah pertama dari tadi ya dia itu typing statis artinya dengan deklarasi tipe kesalahan terkait tipe data dapat ditemukan saat compile time Jadi bukan saat Run nah ini membantu menghindari bug yang sulit dideteksi terus dari segi e pengembangan berskala besar typcript sangat membantu ketika bekerja dalam tim besar karena tipe data yang eksplisit dan alat pengembangnya yang kuat membuat kode lebih mudah dipelihara selanjutnya dari segi voring Ya di typesript itu sendiri refectoringnya itu cenderung lebih mudah jadi dengan fitur seperti intellisence di editor modern ya Eh typ script mempermudah refactoring kode tanpa resiko merusak sistem yang ada Jadi kalau misalkan kode teman-teman gede ya teman-teman mau refaktor ya itu lebih gampang karena ya Intel sens-nya Enak gitu ya jadi teman-teman tahu Eh mana yang salah mana yang enggak gitu ya jadi resikonya eh kode teman-teman tetap berjalan seperti semestinya itu e dikit gitu ya Nah selanjutnya dia itu juga disupport oleh modern mmript Ya seperti yang teman-teman tahu ya tabript ini mendukung fitur modern dari mmcript sebelum diimplementasikan spinnya di semua browser Nah jadi ini beberapa alasan kenapa kita itu pakai yang namanya typt oke sekarang Langsung aja kita masuk ke materi typript playground ya nah jadi untuk bereksperimen dengan tyab script tanpa harus menginstal apapun kita bisa ke tab script playground ya Atau teman-teman bisa kunjungi dia ya di sini ya tabscriptlank.org/play ini merupakan sebuah alat berbasis web ya yang memungkinkan Anda menulis mengedit dan menjalankan kode typesript langsung di browsernya kayak gitu Nah langsung aja kita cobain ya ini tyab script playground ini Nah di sini langsung kita cobain ya ini di typesript playground kita tescriptlank.org/pl nah ini adalah contoh example kode kalau misalkan awal teman buka teman-teman buka e playgroundnya jadi di sini akan ada cons and example variab di sini bentukannya hello world ya valuenya dan dia akan conso.log si variabel kita ini nah kayak yang gua bilang tadi jadi typript adalah bahasa kompilasi ya jadi dia akan ile terlebih dahulu ke javascriptnya maka ini adalah bentukan eh typ script kode kita ini yang sudah dicompile nah ini dalam bentuk javascript ya Nah terus kita bisa running ya dari yang eh file tabript kita atau kode tabp kita ini nanti akan keluar hell nah sama kayak gini nah jadi ini adalah playgroundnya jadi teman-teman bisa coba-coba di sini ya coba-coba Misalkan ya misalkan di sini gua akan coba-coba misalkan cons nama ya nama ini kita kasih dia tipe data string ya mungkin kalau misalkan teman-teman masih belum familiar ya enggak apa-apa ya nanti kita akan bahas searnya cuman ini eh contoh aja contoh kode dari tab script ya misalkan namanya ranggo terus gua akan ada umur juga ya umur itu gua tipe datanya gua kasih number ya Jadi ini adalah contoh kode tabesript lalu kita akan consol log dengan menggunakan backtik itu adalah Hello semua saya kita ambil dari variabel nama tadi saya Rango dan umur saya sekarang pakai ini ini dari Si variabel umur nah ini waktu teman-teman running nah ini akan keluar ya Hello semua saya ranggo dan umur saya sekarang 25 kalau misalkan teman-teman lihat ya di JS filen nya ya ini yang e sudah dicompile ya Nah ini ya bentukannya jadi kayak gini Nah makanya ini yang kayak gua bilang jadi typesript Adalah bahasa pemrograman kompilasi ya Di mana dia harus dikompile terlebih dahulu ke javascript kayak gitu nah teman-teman bisa main ya di playgroundnya ini nanti kalau misalkan e teman-teman sudah e rada Ngerti tentang typp Nah karena ini masih pengenalan ya Jadi sekarang kita coba untuk eh menginstal ya menginstal typ scriptnya di eh komputer kita atau laptop kita Nah mungkin sekian untuk yang playground ini kita next materinya Nah sekarang Langsung aja kita coba untuk instalasi dari tab scriptnya Nah pertama kita bisa e instalasi dulu node JS sama NPM ya Jadi untuk memulai dengan typesript ya kita perlu menginstal node JS dan NPM namanya ini ad notde package Manager kalau notde JS ini sendiri adalah javascript runtime environment ya Jadi panjanglah ceritanya nanti eh Insyaallah kita juga akan ada materi khusus untuk node JS cuman untuk belajar tab scrip sendiri teman-teman tidak perlu Terlalu tahu banget tentang E nodejs ini nah jadi teman-teman cuma perlu tahu kalau dia ini adalah javascript runtime environment ya jadi dia eh adalah eh runtime environment dari javascript ya salah satunya jadi jadi ini membolehkan kita untuk menjalankan javascript di sisi server nah kayak gitulah intinya ya sedangkan NPM ini adalah not package manager ya jadi package- package itu biasanya Eh bisa teman-teman manage pakai NPM ini jadi itu jadi ini dua ini ya nanti ini memungkinkan kita untuk mengelola paket eh javascript ataupun typescript ya dan menjalankan dari Project typesript Nah pertama kita akan unduh terlebih dahulu note JS ya Jadi teman-teman tinggal e kunjungi aja ya itu notjs.org kalau enggak salah ya terus unduh versi lts-nya atau longterm support nah habis itu teman-teman instal aja ya Jadi untuk proses instalasi node JS itu sebenarnya E Straight forward ya Jadi tinggal ikuti aja eh perintah eh dari instalasinya aman harusnya Nah setelah itu teman-teman Eh buka eh terminalnya atau cmd-nya atau Powell kalau di Windows mungkin atau ya itulah ya e com PRnya juga itu bisa teman-teman buka nanti setelah teman-teman buka tem-eman pastiin kalau misalkans iniudah terinst caranya dengan ketik ataupun NPM untuk ngcek npmnya jadi ini akan menampilkan versi not JS teman-eman ataupun versi dari NPM teman-eman kalau misalkan instalasinya berhasah setelah ini teman-teman bisa instal nih typesript-nya Nah jadi teman-teman bisa instal typ script-nya secara global di komputer teman-teman jadi teman-teman nanti bisa ngaksesnya secara global gitu ya Nah yang perlu teman-teman lakukan adalah pakai NPM yang sudah kita instal tadi ya NPM install dasg ya ini artinya Dash Global typesript jadi typesript akan diinstal secara global di komputer teman-teman Nah setelah itu teman-teman tinggal eh cek lagi ya cek lagi Apakah si tyript ini jeran keinstall atau enggak itu di eh CMD ataupun power Cell kalau misalkan teman-teman Eh pakai Windows Terminal kalau pakai Mac atau Linux ya ketik aja tsc-v ya atau tsc-v gitu ya Nah kalau terinstal nanti teman-teman akan lihat versi typesript yang sudah diinstal Nah sekarang e kita cobain ya kita cobain dia langsung aja oke sekarang langsung aja teman-teman pergi ke website notjs.org ya ini eh website dari official E nodejs itu sendiri Jadi teman-teman tinggal instal aja ya di sini download notde JS yang lts Ya ini yang long time support jadi tinggal di-download aja nanti dia akan ke-download ya download note js-nya nanti setelah diselesai download eh langsung aja jalanin ya jalanin ini cukup pretty Straight forward ya jadi kayak eh lurus-lurus aja sih dari tata cara penginstalannya Oke kita tunggu bentar ya Nah ini Ini udah done dan tinggal diinstal aja ya Nah klik entar diinstal Nah entar tinggal ya next next next next aja ya sebenarnya Eh tapi di sini karena gua udah punya notde JS gua enggak akan e Instal lagi ya Jadi ini gua cuman eh nunjukin aja ke teman-teman kalau misalkan dia itu eh Straight forward gitu ya atau gampang Oke selanjutnya setelah itu teman-teman buka dari comand Prom teman-teman ya atau CMD ataupun Terminal kalau misalkan teman-teman pakai Linux atau Mac jadi tinggal ketik aja notde dsv ya kalau misalkan teman-teman sudah instal nanti tinggal dienter nah ini teman-teman akan dapat nih versi dari eh note JS teman-teman yang sudah diinstal di sini gua pakai versi 20.14 ya sebenarnya sekarang udah ada versi terbaru ya 2018 ya cuman itu karena masih versi 2020 aja jadi gua enggak Eh gua upgrade Oke selanjutnya untuk NPM itu sendiri tinggal NPM dasfe ya ini untuk ngecek versi dari mpm-nya Nah gua pakai versi yang 10.7 ya E kalau teman-teman awal instal ya download yang latest ini aja ya Eh sor yang lts ini aja ini long time support kok jadi aman jadi dia longter support Oke Nah setelah itu teman-teman bisa eh ke ketik NPM install DG tab script ya jadi teman-teman akan menginstall tab script ya dari si note package Manager ini ya NPM ini Nah itu secara global ya inig lalu teman-teman enter nanti typ script-nya akan keinstal ya Nah instal Eh ini karena gua Sebelumnya udah instal makanya di sini dibilangnya change one package in 3 second gitu ya Oke jadi ini udah keinstal nah cara ngeceknya nanti ya cara ngeceknya tinggal tsc-v juga ya Nah ini adalah eh version tab script yang gua pakai itu 5.2.6 oke mungkin teman-teman nanti waktu teman-teman eh lihat video ini dan teman-teman lakukan instalasinya mungkin dari segi version eh sedikit berbeda dari eh version gua yang gua pakai saat ini tapi itu enggak apa-apa ya nah Berarti sekarang sudahah selesai ya untuk instalasi typ script kita Nah sekarang kita akan coba untuk eh instalasi dari text editor kita di sini kita akan pakai vs Code oke langsung aja ke next-nya Nah sekarang Langsung aja kita set up text editor kita jadi kita akan pakai vs Code Nah kenapa kita pakai vs Code karena vs Code ini ringan ya jadi dia itu ringan open source dan dia juga memiliki integrasi yang kuat dengan typesript nah dia menyediakan fitur-fitur kayak intelence thebugging ataupun integrasi dengan Git ya sehingga eh fitur-fitur ini semua membuat vs Code ini populer banget di kalangan developer ya bukan hanya untuk Tab script aja ya tapi kalau misalkan teman-teman pakai kayak Python PHP ataupun javascript ataupun kayak framework-framework dari javascript react angular dan lain-lain yaun yang back end-nya juga gitu ya goleng dan lain-lain itu kebanyakan yang gua lihat Emang sering pakai eh teks editor Via code ya kalau misalkan yang open source gitu ya jadi tanpa lama-lama Langsung aja kita akan instalasi dari text editor vs Code kita ini pertama teman-teman tinggal kunjungi dulu eh situsnya ya atau webnya itu code.visualstudio.com ya terus teman-teman unduh ya platform vsquod-nya ini Terus tinggal instal aja nanti Ikutin dia sesuai instruksi karena penginstalannya e sama kayak note sebelumnya itu ini lurus-lurus aja gitu ya enggak ada yang sulit oke langsung aja pertama kita akan eh buka ya ini cod.visualstudio.com kalau teman-teman pakai Windows Ya udah Langsung instal di sini aja kalau enggak teman-teman bisa download ini ya Nah teman-teman bisa pilih nih pilih eh sesuai dengan OS teman-teman misalkan ini Windows ini adalah version dari eh Linux ya Ini kalau misalkan teman-teman pakai Mac Nah entar diownload gitu ya download sor tinggal di diload aja di sini nanti akan ke-download ya nanti teman-teman e ikutin aja instalasinya itu cukup pretty Straight forward tapi karena gua ini udah selesai kayaknya gua gak pengen download ya habisin kuota jadi kayak gitu tata cara eh download-nya dan tinggal diinstal aja ya ini cukup eh Straight forward ya jadi lurus-lurus aja gampang gu ya oke Harusnya sekarang teman-teman sudah punya tools tools yang akan kita gunakan di tutorial kali ini untuk vs cod-nya sama untuk eh node js-nya atau eh npm-nya yang kita pakai kayak gitu Oke jadi tanpa lama-lama Langsung aja kita masuk ke materi dari tyabesript itu sendiri nah sekarang langsung aja ya kita Cobain Eh bikin typ scriptnya di vs Code kita jadi pertama gua pengin Buka folder dulu ya atau buat folder terlebih dahulu ini adalah folder typescript ini untuk Modul 1 ya Jadi ini adalah typesript Modul 1 Nah di sini kita akan buka dia menggunakan vs Code kita ya Jadi kita buka vs code-nya teman-teman bisa bukanya pakai file dari sini terus Open folder Ya itu bisa Entar dicari aja di eh Tab script Modul 1 ini atau lebih gampangnya teman-teman drag aja ya ini ke sini Nah nanti folder kita akan kebuka ya ya di eh vs Code kita ini ini akan gua gedein Nah jadi ini adalah bentukan dari vs code-nya Nah pertama misalkan eh kita akan ada nanti file index.html ya Jadi ini untuk eh melihat dari eh typescript-nya kode typesript kita melalui kol nanti jadi ini akan gua ganti titlenya adalah tutorial typesript ya typ script eh oke dan kita akan link aja di ya dengan eh javascript kita ya Jav kita jadi ini sor ini script src ke main.js ya walaupun sekarang main.js-nya belum ada karena nanti main.jsnya ini adalah kompilasi kode dariript kita jadi ini kita akan Open dia menggunakan live server terlebih dahulu ya Oke ini udah keopen dengan live server kita kasih dia side by side Oke ini gua Z ya di Windows atau option Z misalkan pakai Mac Oke jadi ini biar e kita Akak Scroll kiri kanan kodenya itu kalau berlebih dia ke bawah gitu ya oke pertama kayak yang gua bilang tadi kita akan Buka terminal aja dari e Vi code kita teman-teman bisa di sini ya Terminal atau teman-teman bisa conttrol shift backck kalau gua biasanya memang pakai shortcut conttrol shift backck ya nanti terminalnya akan kebuka di sini gua pakai bas ya terminalnya teman-teman bisa pilih terminalnya Wak teman-teman tambahin Terminal ini Nah jadi ada B ada beberapa ya tergantung dari bawaan vs Code teman-teman Oke jadi di sini kita e sudah di dalam filennya Nah kayak yang gua bilang tadi untuk ngecek apabila typriptnya ini jalan e di laptop teman-teman itu tscdv Ya tadi kan kita sudahudah instal Harusnya sekarang versionnya Muncul ya 5.62 gitu ya Nah setelah itu di sini kita tinggal bikin file dari tyriptnya m misalkan ya Nah di sini contoh kode typescript eh basically itu adalah javascript ya cuman teman-teman bisa nambahin Nanti banyak fitur-fiturnya eh di sini kita akan coba dulu dari tulis yang bentukan javascriptnya ya J misalkan nama ya itu equs e dengan Rango ya dan kita akan console.log aja si nama ini kayak gitu ya Nah ini kita bisa save ya kita bisa save Nah terus gimana cara kita asi ini ke file javascript Nah itu bisa dengan TSC terus nama file-nya itu main.ts ya tadi oke tinggal teman-teman enter nanti akan muncul ya di sini nah ini muncul ya file dari main.js karena ini ah muncul harusnya ya ini waktu kita buka developer tools-nya itu conttrl shift E atau teman-teman bisa Klik Kanan terus inspect ya atau conttrl shift e di bagian konsol akan muncul ya konsol kita tadi itu ranggo teman-teman bisa e ini denganol terusnya atau conttrol plus conttr min jug ba kayak gitu Oke jadi ini bentukan dari javascrip yangah dikpilasi dariadi oke nah sekarang tem-eman bisa lihat ya DII ada eror Ken ya k eror katanya ini BL Mak di dikiranya kita udah tulis nama ini ada dua kali kayak gitu coba ini kita close biasanya merahnya hilang gak hilang ya gak apa-apa ya oke terus di sini e teman-teman bisa lihat ya Ini bentukannya far ya Padahal tadi kita kasih dia Led nah ini kenapa ini karena by default biar dia e kompatib dengan semua browser Ya itu dia akan pakai far ya ini adalah e old syntax Jadi kalau misalkan teman-teman belajar eh javascript yang gua jelasin sebelumnya ya kan gua ada materi javascript juga eh tutorial JavaScript itu kita bahas 20 jam tentang javascript ya gitu ya jadi ada namanya mmcript ya Jadi mmcript kalau untuk sekarang itu mmrip-nya udah mrip terbaru gitu ya atau biasanya 2016 ke atas kalau misalkan F ini masih di is5 kalauak salah jadi dia akan ng-compil-nya ke is5 nah ini nanti bisa kita rubah-rubah dengan menggunakan e eh konfigurasi dari tab script nanti akan kita lihat oke sekarang yang jadi concern gua ya Ini kalau misalkan nama kita kita ganti ya dari ranggo jadi Rango panto ini gua save Nah di sini dia enggak berubah ya konsolnya Enggak berubah nih ranggonya tetap ya dan di eh main.js kita juga tidak berubah Nah terus gimana caranya eh waktu gua save di Tab script ini ya file tab script itu dia akan langsung eh berubah ya di main.gs-nya Nah itu bisa dengan menggunakan eh yang namanya watch ya Jadi kita nge-watch dari si file-nya misalkan di sini TSC terus ini main. eh TS ya Terus teman-teman tinggal Dash W ya atau Dash watch ini singkatan dari Watch gitu ya tinggal di-enter nanti semuanya akan di-watch ya Nah ini di sini akan di-watch Nah teman-teman bisa lihat ya di sini dia akan langsung Rang go Pato ya Nah misalkan gua ganti jadi Rang gu lagi gua save nah ini akan jadi ranggo kayak gitu jadi ini kita akan ngdetect ya Atau ngwatch eh dari file dari m. ini kayak gitu terus Satu lagi biasanya ya biasanya kalau dalam Project ya ini bentukan filenya engak kayak gini ya ini index html m.js.s gak kayak gini Jadi biasanya akan ada folder yang namanya Bu ya Bu Jadi ini kayak e semua dari kode yang nanti akan teman-teman jalankan masuk ke dalam ini nah contohnya biasanya Ind html Mas ke terus eh main.gs itu juga masuk ke dalam ya masuk ke dalam Bu itu masuk ke dalam eh JS folder jadi akan ada javascript folder mungkin ya bentukannya terus ini akan masuk ke dalam sini ya kayak gitu nah biasanya bentukan kodenya kayak gini kalau misalkan teman-teman pakai react ataupun eh frameworkframework lain ya itu biasanya bentukannya kayak gini dan ada namanya src src ini adalah row code kita ya jadi kode yang kita tulis ya benaran kita tulis dari nya ak Mas kayak gitu Jadi ini adalah bentukan yang biasanya eh terjadi ya Nah ini errornya hilang ya karena kita enggak bukanya barengan kalau kita bukanya barengan itu errornya akan keluar kayak gitu Oke ini error yang merah tadi ya oke sekarang ini eh index.html-nya e karena tadi filenya kita rubah ya letaknya maka ini sekarang dia akan not ya kita akan coba buka lagi aja left servernya Open with lagi nah ini kebuka lagi ya kita buka lagi dari developer tools-nya oke nah sekarang dari eh file javaript kita kita not Fone ya karena kita enggak nemuin ya Jadi ini akan ke js/ main ya Kita save oke nah sekarang masih ranggo Ya aman tapi di sini kalau misalkan teman-teman Eh gua akan ctrol C Nah kan kita e pengennya nanti setiap dari filenya ini ya file ts-nya ini itu dia akan eh dicompile ya dicompile-nya itu ke eh file JS yang ada di sini ya Nah itu caranya gimana sekarang kalau misalkan kita ketik TSC eh Das W ya nah nah sekarang teman-teman lihat ya Ini enggak bisa ya enggak bisa di mana katanya ini terjadi nih banyak ya katanya ee munculnya nah ini ya Nah ini bentukannya nya akan keluarnya kayak gini ya Nah waktu teman-teman TSC dsw nah ini eh fail gitu ya Nah kenapa karena kita belum nginate projectnya ya Biasanya kita akan melakukan inisiasi di projectnya ini Jadi ini ak gua gedin dikit conttrol plus kali ya dari ininya jadi di sini teman-teman tinggal klik ya Eh ketik sor tsc-d Init ya Jadi ini untuk meng inisiasi dari eh apa konfigurasi file tab scriptnya jadi tinggal di enter nanti akan kebuka ya ke bikin di sini tsconfig.json nah dengan tsconfig.json ini teman-teman nanti bisa ngwat filennya nah nah ini bentukan config kita jadi sekarang kalau misalkan kita bilang tsc- ya kita akan langsung ngwat file dari typpnya nah ini akan gua enterah ini langsung ngwat fenya nah tapi kalau misalkan tem-an Perhatikan ya di sini dia akan bikin main.jsnya ini ya main.js-nya ini ada di dalam SI file src kan kita penginnya dia ada di dalam SI buil ya di dalam folder bu Nah itu caranya gimana biar kita pengen e hasil dari kompilasi kita nanti akan masuk ke dalam Bu dan di dalam folder JS Nah jadi di tsconfig.js ya itu ada namanya ini akan guarol minus lagi ya eh nah ini outar Jadi di outar ini kita akan uncomand ya uncomand out dear jadi kita akan pergi bukan dari ke slash ya tapi ke buil/ JS Nah gini ya Jadi waktu ini kita save nanti main.js kita akan pergi ke sini ini akan coba kita delete dulu ya kita delete ini akan kita delete Ya Sor ini akan gua delete Oke ini kita save Oke sekarang kita akan ngwat filenya teman-teman bisa lihat ya file change detect bentar font Zer error inemental kita akan conttrol C dulu dan kita akan ulang lagi ya tscw oke sekarang tem-eman lihat yaah m.js-nya langsung kebikin nah kalau teman-teman Perhatikan ya di sini akan jadi LED ya Jadinya tadi kan far ya kenapa sekarang jadi LED kayak yang gue bilang tadi di tsconfig.json itu ada namanya is nah ini targetnya sekarang dia akan dikompilasi eh file Tab scriptnya itu ke is 2016 gitu ya jadi di 2016 kita pakai Led Kalau teman-teman pengin e balikin dia ke far tadi ya itu pakai is5 kayak gini ini kita save kita lihat di main.js kita ya ini akan jadi pakai far kayak gitu nah tapi gua lebih suka pakai yang 2016 ya ini lumayan terbaru gitu ya nah jadi itu e untuk bentukannya lanjut lalu lanjut Selanjutnya ya kita itu pengen ya yang dikompilasi itu selalu yang di dalam main.js ya main.js sekarang kalau misalkan teman-teman bikin ya bikin kode di luarnya ini ya luar buil sama luar src ya itu misalkan di sini test.ts gitu ya Nah ini dia akan langsung juga dikompilasi ke JS kita test.ts nah ini nah kenapa kayak gini ya karena kita enggak ngespesifikasi dia di konfigurasi kita ini Nah kan kita pengin yang di eh compile nanti ya file typ script-nya hanya yang di dalam src biasanya kayak gitu ya Nah itu bisa bisa kita capai dengan namanya eh di sini ada root dear ya gua akan conttrol F root dear nah ini root dear Nah gua pengin root dear-nya ini ini akan gua uncomen ya sekarang kan dia diken ya gua akan uncen jadi kita akan pengin dia ke dot/ash yang namanya src aja jadi kita hanya fokus nge-watch yang di src aja kayak gitu ya ini kita save Oke ee sekarang kita file font error ini ada font error ni expected contain all source match by default pattern font error Oke kita lihat problemnya oke nah sekarang itu kita dapat error ya kita dapat error karena katanya eh match by default includenya itu patternnya adalah semua ya Jadi biasanya itu yang diambil itu adalah semuanya makanya ini e bisa jadi error Nah sekarang caranya ya caranya biar ini tidak terjadi ya kita akan ada namanya include ya jadi di sini kita akan koma di bawah ini ya eh di setelah ini compile option itu ada namanya include jadi ada namanya include ya Nah kita tentukan yang pengin kita include itu apa aja ya jadi kan kita enggak pengin include semuanya Nah kita eh penginnya nginclude yang dari src aja jadi di sini teman-teman definisiin src ini kita save harusnya errornya hilang nah errornya hilang Nah sekarang kita akan delete Ya dari si eh test.js yang sudah dikompilasi tadi Sekarang kita coba eh Buka terminal kita lagi ya ini TS config-nya gua hilangin dan kita ke Terminal lagi ini akan gua ctrol C ya untuk ng eh berhentikan scriptnya dan kita ulang lagi tsc- W gitu ya ini kita watch lagi Nah di sini teman-teman lihat ya Eh file test.ts kita tidak kita compile lagi jadi yang kita compel hanya yang ada di dalam main.js saja misalkan di main dalam main.js kita akan bilang e ini bukan ya home.ts ya Nah home.ts ini akan dikompilasi langsung sedangkan test.ts-nya tidak kayak gitu nah jadi ini eh adalah default setting yang biasanya dipakai ya Nah ini gua mention sedikit walaupun sebenarnya ini gak terlalu masuk ke dalam materi typpt tapi ya ini lebih ke prakknya ya prakk penggunaan darip itu sendiri ya Oke jadi ini adalah untuk teman-eman kenalan dulu ya kenalan dulu sama tabpnya sama teman-eman juga kenalan cara menetting yaetting Atet darinya kompilasinya terus kenalan sama tsconfig.json ya ini adalah konfigurasi dari tabesript file teman-teman ya yang teman-teman dapatkan dengan e sintaks MPM spasi dasd Init tadi oke kita lanjut ke next materinya Nah sekarang kita masuk di materi tipe data dasar di typescript ya Nah typesript itu memiliki tipe data dasar yang serupa dengan javascript tetapi dengan dukungan tipe statis yang lebih kuat nah sebelum kita bahas ya tipe data apa aja yang ada di typesript di sini Gua pengin mention terlebih dahulu bahwasanya typesript itu menentukan tipe data variabel itu secara yang namanya type inference atau secara eksplisit yang namanya type annotation jadi type inference itu apa Jadi kayak eh type script itu secara otomatis ya yaitu ngedeteksi nih tipe data berdasarkan nilai awal dari eh variabelnya contohnya di sini ya ini kita ada l message ya ini kita kasih dia value Hello ya Nah di sini teman-teman lihat ya ini kan string ya jadi typript itu dia bisa secara otomatis ya mengenali e tipe data dari si message ini kayak gitu ini disebut sebagai type inference jadi typ scrip yang coba mengenalinya sendiri nah itu type inference selanjutnya ada type annotation typ annotation ini kita sebagai ee user atau sebagai developer ya yang menetapkan tipe datanya itu secara eksplisit kayak gitu ya misalkan di sini let ge Ya ini pakai titik du terus tipe datanya misalkan number gitu ya Nah maka Edge ini harus atau variabel ge itu harus eh nilainya value-nya itu bertipe data number kayak gitu ya jadi ini nilainya 30 nah ini materi yang awal banget ya yang Eh gua pengin teman-teman ketahui ada namanya type inference sama type anotation jadi langsung aja ya kita cobain e dua materi ini di teks editor kita Oke sekarang langsung aja ya kita cobain yang type annotation sama type inference tadi jadi di sini kita udah ng-set up tadi ya kita udah berhasil ngset up eh Project kita atau typript tutorial kali ini Oke jadi di main.s apa itu type inference ya Nah type inference itu kayak typ scrip yang secara otomatis mendeteksi tipe data berdasarkan nilai awal dari variabelnya kayak gini ya Nah ini kan nama kita kasih nilai awalnya string Nah jadi kalau teman-teman hover di sini nah ini diap datanya string jadi ini yang secara langsung gitu ya secara langsung dia mendeteksi tipe datanya Nah berdasarkan nilai awal yang kita berikan misalkan teman-teman kasih nilai awalnya adalah eh 25 ya 25 ini gua save di sini maka tab script yang mendeteksi nih nih langsung dibilangnya LED nama itu number tipe datanya jadi waktu teman-teman nanti rubah si nama ya rubah si nama jadi string Nah itu enggak dibolehin sama typript karena katanya ya di kita lihat di problem ini ya atau di merah ini karena sulit bacanya kita lihat di problem saja katanya type string is not assignable to type number jadi karena awalnya kita udah menentukan kalau misalkan ini 25 ya kata typript ini tu number gitu ya karena dari value awalnya 25 Jadi waktu kita assign ulang dia menjadi string ya E dengan valueango ya dia bilang sini e type string is not assignable ke type number artinya tipe string tidak boleh di-assign ke variabel yang tipenya number k gitu ya Nah ini yang disebut sebagai eh type inference jadi type script yang ngdetect nih secara otomatis tipe datanya eh dari variabel kita berdasarkan nilai awal ini akan gua balikin lagi ke si eh Rango ya oke Nah kalau kayak gini dia berhasil sekarang karena di awal tab script nih dia e ngdetect nih oh ini value-nya string gitu ya langsung kita coba ha di sini tript ngdetect ini string kita rubah nilainya di sini dari ranggo jadi eh Pato mungkin ya Nah di sini dia akan eh berhasil nah ini berhasil juga ya nah jadi kayak gitu jadi eh Tab script yang secara otomatis ngedetectnya itu disebut sebagai type invers Terus apa itu selanjutnya type annotation type annotation itu Ya kita sebagai developer ya atau sebagai pengembang atau sebagai yang nulis kode nih kita yang secara eksplisit yaara ekplisit kita kasih tahu ke dia variabel Ini tipenya harus ini k gitutoh kita ada variabel yaur kita pengarisit bilang ke bahya number kayak gitu number Oke Nah di sini teman-teman masukin value dari numbernya misalkan 26 gitu ya Nah ini kita save kita coba conso.log juga ya juga di sini nih gua gedein dikit oke oke maka akan keluar value 26 ya dan kita tidak ada dapat merah ya enggak merah Enggak ada problem enggak ada sama sekali gitu ya Ee jadi aman Nah jadi ini kita secara eksplisit bilang ini number kalau misalkan teman-teman valueya teman-teman ganti di sini jadi 26 dan dia tipe datanya string ya ini string kan pakai Que atau pakai kutip du nah ini bakal terdapat error ya karena katanya type string is not assign to type number karena by default kita yang nentu dari awal secara eksplisit kita bilang nih Ini variab tipe datanya harus number nah di Sin kitaih string makanya akan terjadi eror Kak tabp itu seperti kita bahas sebelumnya ya itu e Static typingnya itu kuat Gitu ya Jadi ini gak boleh jadi kalau kita udah suatu variabel ya Secara isit kita bilang itu number Jangan teman-tem kasih valya itu string gitu ya pastikan ini number kayak gitu Nah itu dua bedanya Ya ini bisa diseb sebagai typ anot anotation Oke Sedangkan ini ya ini bisa disebut sebagai type inference sor gua lupa komennya type in eence nah kayak gitu Jadi ini untuk materi kali ini itu type inference apabila si typesript yang mendeteksi tipe datanya berdasarkan nilai awalnya type annotation kita yang secara eksplisit bilang tipe data variabel adalah number kayak gitu nah ini materinya ya Eh kita lanjut ke next materinya Nah sekarang kita masuk di materi tipe data di typesript Nah sekarang kita bahas yang tipe data string eh number dan bulean ya Nah di sini untuk string ya yang pertama string itu digunakan untuk menyimpan teks ya Jadi ini basically sama kayak di javascript ya cuman kalau di typpt ya teman-teman kalau misal kan pengin variabelnya bertipe data string ya nanti LED name ya terus titik du terus tipe datanya itu string kayak gini nah baru nanti value-nya itu John kayak gitu selanjutnya untuk number nah number seperti yang kita tahu dia untuk menyimpan bilangan baik itu bilangan bulat ataupun bilangan desimal misalkan kita ada age ya atau umur ya Nah itu caranya sama kayak tadi pakai titik dua terus tipe datanya itu number kayak gini baru nanti valueya nya masukin 25 kayak gitu nah lanjut itu adal tipe data bulean bulean ini untuk menyimpan nilai benar atau salah ya atau true eh false gitu ya nah sama kayak tadi cara mendefinisikannya misalkan let is student ya ini adalah variabel kita terus nanti titik du terus tipe datanya Ini tulisannya b o o l e a n ya bulean bacanya baru nanti value-nya bisa true bisa false gitu ya lanjut ke tipe data Aray sama tipe data t nah ini ada dua ya Nah pertama untuk Aray yaay ini sendiri adalah tipe data untuk menyimpan koleksi nilai dengan tipe yang sama contohnya teman-teman ada e variabel namanya numbers ya itu teman-teman pengen semua ya collection dari araynya ini atau setiap itemnya adalah angka gitu ya maka tem- Bik DII terus petak Nah maka semuanya akan jadi array kayak gini ini adalah array arraynya adalah array number G ya karena ada kurung petak ingat dulu ya Eh tipe datanya dulu baru kurung petaknya ya jadi artinya eh number ya di dalam Aray ini jadi semua araynya semua elemennya adalah number kayak gitu ya jadi koleksi tipe data eh yang sama lanjut untuk tupel eh tupel itu sendiri dia menyimpan array ya dengan jumlah elemen yang tetap dan tipe data yang berbeda kayak gitu Jadi itu adalah tuple contohnya di sini kita ada person ya person person ini dia bakal punya eh elemen pertama itu bertipe data string elemen kedua bertipe data number jadi makanya di sini nah ini dan ingat ya ini jumlah elemennya tetap ya Jadi kalau misalkan di sini string number ini harus string number juga jadi harus dua gitu ya kalau misalkan teman-teman bikin stringsting number nanti ini string string number gitu ya Nah ini adalah tipe data t nah ada satu lagi untuk tipe data objectek ya tipe data objectek cara bikinnya nanti akan kita bahas ya sekarang kita bahas yang lima ini terlebih dahulu ya Tadi ada string number bulean eh array sama tuple oke nah jadi sekarang Langsung aja kita cobain mereka masing-masing di vs Code kita Oke jadi di sini gua udah buka eh vs code-nya atau tekt editor kita ya langsung aja kita cobain dan di sini eh web browsernya udah kita buka pertama gua akan running dulu ya ini dengan live server Gitu ya jadi akan kebuka nih di sini dan kita akan conttrol shift E atau inspect dia di bagian konsol ini gua bisa gedein teman-teman bisa Eh tekan atau press conttrol Terus eh Mouse teman-teman yang eh scrollnya itu bisa diroll aja gitu ya Sama satu lagi bisa conttrol plus conttrol minus untuk gedeinnya kayak gitu oke mungkin teman-teman udah kenal ya tadi sama ini ya kita udah eh bikin strukturnya kira-kira kayak gini yang biasanya ya biasanya di e project-project biasanya bentukannya kayak gini walaupun nanti di Framework Framework setiap Framework itu beda biasanya bentukannya cuman Ya gua rasa ini adalah penggambaran paling cocok Oke jadi langsung aja ya langsung aja kita lihat di sini jadi sini ada m. gua dan di sini mains ya Oke jadi tadi kita bicara tentangp data nah kayak yang gu bilang tadi jadi ada beberapa tipe data yang pengin kita bahas misalkan yang pertama kita akan ada LED nama ya Ini tipe datanya adalah string sor jadi tipe data string itu bisa pakai eh double quote atau single quote ataupun backtick ya itu sama materinya kayak javascript kalau pakai backtick teman-teman bisa mengakses variabel gitu ya variabel lainnya kayak gitu entar dibantu dengan eh sintaks eh kayak gini ya dollar Sain kurung kurawal Tapi ini kalau backtik ya Jadi teman-teman bisa akses eh variabel lain di dalam sini kayak gitu atau kalau back tick Oke let's talk about eh Tab script aja gitu ya oke sekarang TP script-nya Oke jadi Tadi kita juga bahas ada type inference sama type annotation ini namanya inference ya jadi tab script yang e ngelihat sendiri atau mendeteksi sendiri tipe datanya atau eh tadi ini annotation yang kita langsung secara terang-terangan kita yang bilang atau secara eksplisit kita bilang variabel nama ini tipe datanya string kayak gitu nah jadi ini untuk tipe data string Oke jadi ini untuk tipe data Oke kita coba console.log dulu console.log itu si nama kita save dan di sini untuk jalaninnya teman-teman tscw tadi ya karena ini udah kita spesify tadi di config.json jadi tinggal klik enter dan dia akan jalan di kompilasi ya dan di sini udah akan ke compile nah di javasripnya kayak gitu Oke jadi ini adalah typp kita dan ini udah keluar ya sekarang ya E valuenya adalah Rango ya Oke jadi ini tipe data string Nah ada lagi itu tipe data number ya tapi data number sama bentukannya kayak di javascript jadi dia untuk menampung bilangan bulat ataupun bilangan desimal jadi misalkan l age ya itu umur ya itu eh tipe datanya number gitu ya terus entar sama dengan eh teman-teman bisa 25 kayak gini ya atau 25,7 gitu ya itu untuk yang eh bilangan desimal kalau ini bilangan bulat karena umur ya pasti bilangan bulat ya makanya di sini gua kasasih 25 kayak gitu Jadi ini gua bilang nah ini kita save akan keluar ranggo ini 25 kayak gitu Jadi ini tipe datanya number ini Oke kita lanjut selanjutnya ini gua conttrol B ya kalau misalkan teman-teman pakai Windows kalau di eh Mac itu ya sama sih Ma option option B lupa itulah kira-kira Oke jadi sekarang kita akan ke tipe data selanjutnya itu tipe data ee Bulian nah ini sama kayak di javascript jadi dia menentukan nilai benar atau salah gitu ya jadi misalkan kita let is merit ya is merit itu Eh teman-teman bisa true or false ya true atau false dan di sini teman-teman secara eksplisit tentuin dia bulean ya Nah ingat ya sintaks ini titik du ya titik du Terus eh apa namanya tipe data yang pengin teman-teman tentuin kayak gitu ini kita save nah ini sekarang Coba juga dari kayakitu Nah jadi iniudahah number lanjut ke tipe data selanjutnya itupp gu bilama Jav dia nilai singkatnya ya kalauay misalkan kita punya numbers ya numbers artinya ini kan banyak angka gitu ya Nah cara mendefinisikan kalau ini itu tipe data array ya titik du juga sama terus di sini teman-teman bikin number tapi setelah itu kur petak kayak gini nah kur petak buka kur petak tutup nah artinya ini adalah tip datanya Aray kalau kita lihat di sini ya n ini adalah array array yang berisikan number gitu ya jadi Isinya harus angka jadi dalam array teman-teman ini ya nih array di sini teman-teman 1,2,3,4 enggak bisa e di sini teman-teman masukin 5 string enggak boleh karena di sini akan terdetect problem katanya string is not assignable to type number jadi ini cuman boleh number doang gitu ya Nah kayak gini kalau misalkan teman-teman pengen string Ya udah ini teman-teman gua akan copy ke bawah ya copy ke bawah dan di sini kita akan kasih dia hm apa ya hobi mungkin ya hobis gitu ya kan banyak hobi dan tipe datanya adalah string makanya di sini kita akan ganti nih semuanya value-nya misalkan value-nya adalah apa ya apa ya hobi Oh hobi gua basket mungkin ya basket terus di sini catur ya catur sama satu lagi apa ya mm ikut pengajian Asik nah oke Ini gua alt Z ya biar kita enggak Scroll Klik Kanan ya makanya dia ke bawah perginya di kalau gua altz lagi dia akan ke atas gitu ya ini Scroll kiri kanan ya nah ini kalau di Windows sintaksnya altz kayak gitu Oke jadi yang 14-nya ini ke bawah 15-nya baru mulainya setelah itu gitu ya ini ni Kayak kalau misalkan teman-teman Scroll kiri kanan tuh kayak Mengganggu ya gitu intinya jadi kan bingung ya Ini apaan gitu ya Scroll sini kiri kanan kalau misalkan Z kan pakai shortcut-nya nah ini Jadi dia kita lihatnya ke bawah gitu ya lebih enak Oke kita balik lagi ke materinya Oke ini tipe data array jadi di sini teman-teman tentuin eh dia itu array-nya bentukannya number atau array-nya bentukannya string kayak gitu nah ini biasanya ya Itu cuman untuk tipe data yang sama terus gimana nanti Bang kalau misalkan tipe data array kita beda itu nanti kita bahas juga ya cuma sekarang kita stick eh ke sini dulu ya Jadi ini tipe datanya adalah tipe data yang sama kayak gini number bentukannya array jadi teman-teman Isinya angka semua gitu ya kalau string bentukannya array tem-teman isi string semua kayak gitu Oke kita coba di sini konsol ya ini kayaknya terlalu mepet ya bawahin dikit kita akan kol Sin number nah ini ya bentukannya number sedangkan kita akan konsol juga si hobbies hobbies oke nah ini bentukannya nah Oke jadi kita udah eh dapatin string number bulean sama Aray Oke lanjut ya sekarang ada namanya tipe data tuple Nah kalau di ini ada namanya tipe data tuple tipe data tuple apa sih maksud dari tipe data tuple ini Nah maksudnya gini ya ya Jadi sebenarnya ee Ini digunakan untuk menyimpan array ya jadi dia masih array juga tapi array-nya ini jumlah elemennya itu tetap dan tipe datanya itu eh berbeda kayak gitu misal nih teman-teman punya eh LED person gitu ya person nah di dalam eh array person ini teman-teman pengin menyimpan data string sama number udah dua elemen aja gitu ya du elemen aja jadi di sini teman-teman kurung petak caranya terus string gitu ya koma number baru nanti value-nya harus string sama number juga ya jadi di sini Misalkan Rango ya ini e 25 k gitu nah ini harus to sesuai ya Jadi jumlahnya ini string sama number kan dua ya ini ranggo sama 25 Nah kan Ini du juga gitu ya Nah ini harus sesuai gitu Ya baik dari Tipe datanya ataupun dari jumlah elemennya kayak gitu kalau misalkan di sini teman-teman tambahin lagi ranggo 25 misalkan di sini eh 43 nah ini akan error nih error teman-teman Perhatikan ya errornya katanya eh string number number katanya harusnya ya harusnya itu string number number Nah kita itu yang ada itu cuman string number maka di sini teman-teman harus kasih dia string juga eh sor number juga itu jadi harus sesuai jumlah elemennya baik eh dan juga tipe data dari setiap jumlahnya ini kayak ini kayak gitu Jadi ini bisa disebut sebagai tup ya Oke jadi ini materi untuk eh sesi kali ini ya kita lanjut ke next materinya ya Dan ini masih banyak banget yang bakal kita bahas Oke karena gua excited banget Langsung aja kita lihat next materin Oke sekarang kita masuk di materi tipe data ini jadi dalam typ script itu sendiri ya ada salah satu fitur yang sering banget digunakan untuk menangani situasi di mana tipe data kita tidak kita ketahui secara pasti kayak gitu nah nama fiturnya adalah tipe data ini jadi tipe ini nanti memungkinkan kita ya atau variabel kita ini untuk menampung nilai dari tipe apa saja ya jadi tipe apa saja bisa kita tampung dengan tipe data ini ini baik itu bentukannya string number array OB ataupun lainlainnya kayak gitu jadi any ini adalah tipe data khusus ya dalam typript yang secara eksplisit sebenarnya intinya Ya intinya si ini akan menonaktifkan type checking jadi kita engak akanelakukan typ checking lagi pada suatu variabel kita Nah kalau kita pengin hal itu terjadi kita kasih tipe datanya ini jadi dengan begini ya artinya nanti sebuah variabel ya yang bertipe any ya itu dapat menerima nilai apapun gitu ya tanpa typesript ini melakukan pemeriksaan jenis datanya kayak gitu nah tapi kapan kita sebenarnya menggunakan Any Nah jadi any ini enggak selalu bisa digunakan terus-terusan ya kalau misalkan teman-teman gunainnya ya udah gua enggak ini nih any aja gitu Udah tipe datanya any aja Nah itu malah jelek jadinya nanti kenapa ya nanti akan kita bahas tentang resikonya karena kayak ngapain lu pakai typ script kalau misalkan e type checkingnya enggak Lu pakai gitu ya enggak Lu gunain Ya semua variabel aja lu iniin gitu ya jadi enggak guna nantinya ujung-ujungnya gitu ya ngapain pakai Tab script ya mending javascript aja gitu oke nah sekarang kita lihat ya kapan sih sebenarnya kita menggunakan ini Oke pertama ya kita bisa menggunakan ini saat kita tidak tahu tipe data yang akan digunakan pada variabel atau nilai yang diproses ya karena dia diprosesnya nanti secara dinamis kayak gitu Nah yang kedua Eh kita misalkan e lagi melakukan migrasi nih dari javascript ke tabescript nih dan tipe-tipe tertentu itu kadang belum ditentukan ya dengan jelas gitu ya Nah biasanya waktu migration ya misalkan e teman-teman ada project Project javascript gitu ya nah teman-teman sama tim teman-teman pengin migrate ke typespt ya kadang kan ada tipe-tipe tertentu Kita belum tentuin secara jelas ya karena Ini Project ya Biasanya kita akan pakai terlebih dahulu nanti akan kita cek baru nanti kita rubah tipe datanya kayak gitu dan selanjutnya ada juga situasi di mana kita bekerja dari sumber Al misalkanan D dari apiitu ya kadang E ada tipe data dari api-nya itu yang enggak terprediksi ya yang belum terprediksi sama teman-teman gitu ya Nah kalau belum terprediksi sama teman-teman dan lain-lain itu teman-teman juga bisa pakai yang namanya tipe data ini Oke contohnya di sini kita ada function log value ya value-nya Ini tipe datanya ini kita akan conso.log si value-ya ini bentukannya karena kita tahu nanti si value-ya ini ada kemungkinan dia tipe datanya beda-beda kayak gitu nah di saat itu kita bisa menggunakan ini kita lanjut dulu ya sebelum kita cobain ya Terus apa sih sebenarnya risiko dari penggunaan en ini nah Rikonya ya penggunaan en dapat menyebabkan hilangnya manfaat utama tript kayak yang gua bilang tadi ya Nah jadi kan manfaat utama typp itu adalah keamanan dari tipenya atau type checkingnya Nah jadi karena tabp tidak lagi melakukan pengecekan tipe pada variabel bertipe hal ini bisa menyebabkan runtime error yang sulit dideteksi pada saat kompilasi Nah jadi dia sudah enggak ngecek lagi nih jadi waktu sudah kita compile nanti akan jadinya runtime Error itu kan kita bingung ya Eh gimana atau di mana errornya dan lain-lain gitu ya kita bingung gitu misalnya contohnya di sini ya Jadi pada contoh yang di samping ini ya Yang ini itu random value sebenarnya adalah string ya Nah ini kan bentukannya string ya teman-teman bisa lihat ya string nah tapi karena tipe datanya Ini ya Nah tipe datanya Ini dan di sini kita akan coba E konsol.lograndomvue. fixed ya kalau to fixed ini kan kayak di apa namanya tuh untuk tipe data number ya Jadi kita bilang dia itu dua angka di belakang koma kayak gitu ya Nah Sedangkan ini bentukannya string Nah karena dia string ya jadi tab scrip tidak memberikan peringatan bahwa method to fixet hanya bisa digunakan pada tipe number jadi ini enggak dikasih tahu nih Nah jadinya nanti akan e terjadi error kayak gitu nah kadang di e projectprject ya bentukan errornya bisa lebih parah lagi ini contoh sederhananya bentukan errornya bisa lebih parah lagi dan e kadang-kadang teman-teman juga akan sulit noti di bagian mana errornya Kenapa karena ya kalau misalkan Project itu kodenya kan banyak banget gitu ya Nah jadinya teman-teman akan no dan lain-lain ya ya gitu keamanan tipe dari ty script atau manfaat utama trip jadi hilang gitu esensinya udah hilang Nah jadi kayak gitu terus di sini gua pengen e kasih kesimpulan dulu ya sebelum kita cobain tipe data ini jadi kalau menurut gua pribadi ya itu tipe data ini itu emang sangat berguna ya sangat berguna Sebenarnya ya E pada situasientu karena dia itu fleksibel ya dia fleksibel dia gitu ya jadi dia sangat berguna pada situasi tertentu tetapi ya resiko ee teman-teman pakai tipe data ini itu tinggi banget karena dari segi keamanan ya keamanan keamanan gitu ya itu dia itu jelek banget ya jadi e tipe data ini akan menyebabkan e hilangnya keamanan tipe jadi sebaiknya teman-teman kalau misalkan pengin pakai tipe data ini ya tipe data ini teman-teman harus bijak ya menggunakannya ya teman-teman pastiin dulu sebenarnya variabelnya ini ee diketahui enggak sebenarnya value-nya nanti dan lain-lain baru teman-teman pakai tipe data Ini kalau misalkan dia emang diketahui ya jangan pakai tipe data ini gitu ya Nah itulah kira-kira eh yang bisa gua bilang ya tentang tipe data en ini Oke daripada lama-lama kita langsung aja ya cobain tipe data ini ini di teks editor kita oke let's go Oke sekarang kita cobain ya tipe data ini tadi jadi di sini gua udah set up ya set up dari e bentukan projectnya ya ini kayak sebelumnya juga sama dan di sini Kita juga eh sudah buka browsernya dan di developer toolsnya juga Oke jadi ini akan gua hide dulu kalau di Windows teman-teman bisa pencet ctrol B ya kalau di ini bisa kalau di Oke pertama kita akan running dulu dari file tab script kita kita tinggal tscdway ya karena tadi kita udah set up dari e TS confignya juga oke pertama misalkan kita akan punya variabel ya variabel variabel nama variabelnya variabel juga ya jadi tipe datanya di sini gua bilang any ya dengan kita mendeklarasikan tipe data ini sama kayak yang di slide tadi Berarti kita menonaktifkan type checking dari si type scriptnya jadi enggak ada lagi nih kita ngecek tipenya gitu ya karena ini kita udah bilang ini any gitu Jadi boleh tipe apa aja kita masukin ke dalam ini contohnya gua bilang variabel itu adalah siranggo ya gua akan console.log si variabelnya oke nah dengan kayak gini akan keluar ya ranggu di bawahnya gua pengen ya dari awalnya string gua reassign lagi ya gua kasih value ulang lagi 25 gak masalah karena dia akan langsung keluar 25 gua pengen reassign lagi si variabel ini jadi e true gitu ya ggak ada masalah dia akan keluar Nah ini enggak berlaku kalau misalkan teman-teman secara eksplisit bilang kayak string string jadi gak boleh misalkan di sini teman-eman kasih dia string gitu ya Nah yang lainnya akan terjadi error nih di sini F err error nah type number is notable notable ke string gitu ya akan terjadi error sedangkan kalau any kita nonaktifkan type checkingnya nah itu jadi ini adalah tipe data khusus untuk menonaktifkan type checkingnya kapan ini digunakan seperti yang gua Jelaskan di slide tadi kita akan menggunakan ini ketika kita butuh tipe datanya ini lebih fleksibel seperti itu Misalkan teman-teman dapat data nih dari eh api gitu ya kan eh teman-teman enggak tahu hasil keluaran bentukannya kayak gimana apanya kayak gimana dan lain-lain eh teman-teman gak punya knowledge lah tentang itu dan teman-teman pengen ini jadi fleksibel karena teman-teman pengin menampilkan aja dari value-nya Nah itu bisa jadi teman-teman bisa bikin function nih function misalkan log value gitu ya log value jadi tujuannya cuma untuk menampilkan aja hasil dari eh apa Data api yang kita dapat Nah jadi Yaudah gak masalah ini karena kita gak akan melakukan operasi atau me dengan eh menggunakan value-nya karena kita cuman pengen ngonsol aja ya cons.log dari si val-nya ini Nah itu tujuan kita Yaudah ngapain gitu ya gak ada masalah kita kasih tip Ini DII karena kita butuhnya di sini fleksib karena kemungkinan api kita bisa return string bisa number bisa dan lain-lain ya kita gak ada masalah dengan apa yang dia karena kita akan jung-ujungnya Cum cons valya gitu ya jadi misalkan kita akan Panggil log value di sini gua akan kasih dia pertama adalah ini data dari api dari ini ini misalnya Yai kita ini 389ak nah ini adalah penggunaan dari tipe data ini kadang dia butuh di case-case kayak gini itu butuh banget tipe data ini karena dia lebih fleksib gitu ya Nah itu contohnya Terus eh apa lag ya Nah ya kapan kita tidak menggunakan ini ya resiko dari menggunakan ini ini apa Nah resikonya ini cukup gede ya sebenarnya dari penggunaan ini jadi Misalkan ya misalkan teman-teman ee Pengen ya pengen gua akan kan eh kasih apa ya function gitu ya misalkan function itu adalah eh any risk ya jadi risiko dari si any ini nah jadi kita akan dapat di sini e value juga ya value itu kita kasih tipe datanya Ini dan di sini kita akan coba eh melakukan apa namanya eh method dengan CNI Nah jadi sebenarnya ya sebenar nya dalam any Ris ini value-nya ini nanti akan mendapatkan tipe string Cuman karena kita definisikan any ya karena ujung-ujungnya nanti kita akan Eh pakai yang namanya meod to fixed misalkan ya Jadi kita akan value to fixed itu Du gu ya Nah kayak gini kalau misalkan kita conso.log ya nanti ini akan gua jadiin eh conslog gu ya oke nah kita akan Panggil nih si any Ris ya kita tahu dot to fixed ini Ini cuman untuk tipe data number Jadi waktu teman-teman masukin di sini adalah e tipe datanya string ya contohnya ranggo mungkin ya Nah ini akan terjadi error nah akan terjadi error kayak gini di akan terjadi error UNC type error value. fixed is not a function Nah teman-teman bisa lihat ya di sini e akan terjadi error tapi errornya itu waktu kita udah di Run time-ya bukan waktu di kompilasinya enggak ada merah di sini enggak ada terdetect merah nah ini yang biasanya resiko dari penggunaan en jadi eh gimana ya jadi awalnya kode kita kita lihat tidak ada masalah tapi waktu di runtime jadinya terdapat error Nah ini kan kadang error jenis ini sangat membingungkan bagi developer apalagi ya apalagi kalau misalkan teman-teman kerja di Project yang gede ya Di mana itu ada banyak banget e kodenya banyak banget ininya dan lain-lain dan setiap kode berhubungan ya banyak bangetlah intinya nanti ya Nah itu akan sangat-sangat membingungkan sekali Nah makanya eh bijak-bijaklah menggunakan en ini Jadi kalau misalkan teman-teman ggak perlu en jangan pakai gitu ya jangan asal-asal pakai aja karena ya gitu karena Rikonya cukup gede karena kita enggak melihat error kita Waktu kita ngekompilasinya melainkan erornya muncul waktu di run-nya kayak gitu waktu udah e keluar nih baru entar error gitu ya Nah kan bingung gitu ya di sini perasan enggak ada apa-apa kok ini jadi error gitu ya Nah itulah kira-kira Kenapa kita harus menghindari penggunaan ini sebisa mungkin kayak gitu Oke jadi ini materi tentang tipe data ini kita lanjut ke next materinya Oke sekarang kita masuk di materi Union types dan literal types ya Nah Apa itu Union types types adalah tipe data yang digunakan ketika sebuah variabel bisa memiliki lebih dari satu tipe data contohnya di sini kita punya variabel Id Id ini bisa tipe datanya string bisa tipe datanya number nah bentukan kayak gini ini disebut sebagai Union ya Union Nah jadi pakai ee apa namanya sintaks ee garis tegak gitu ya Nah gini ini bisa sebut sebagai Union misalkan di sini teman-teman bisa ngassign nih ID teman-teman misalkan abc13 ini dalam bentuk string boleh karena kita bilang di sini string sama number terus teman-teman e pengin nanti id-nya diign jadi 123 aja ini juga boleh kenapa karena teman-teman bilang ini string atau number ini number artinya masih diperbolehkan kayak gitu Jadi ini adalah Union nah kadang-kadang teman-teman juga bakal pakai Union ini dalam bentukan array nanti bisa Union Oke nanti akan kita lihat ya di contoh oke sekarang literal types secara definisi ya literal types ini adalah tipe data yang digunakan untuk membatasi ya membatasi variabel agar hanya bisa menyimpan nilai tertentu kayak gitu misal teman-teman punya variabel status teman-teman pengin ya status nya ini kalau enggak sukses kalau enggak Failure gitu ya kalau enggak sukses kalau enggak Failure nah caranya kayak gini jadi kasih tahu aja langsung nilainya itu sukses jadi atau di sini pakai Eh ini Eh tulisannya ya atau ini ya kurang tegak kayak gini Failure gitu ya nah jadi dia kalau enggak sukses Failure gitu ya Jadi teman-teman enggak boleh nih kasih e value lain selain dari si eh sukses sama valure jadi nilainya ya atau value-ya nanti harus sukses atau Failure enggak boleh yang lain Jadi status bisanya sukses atau Failure gitu nah jadi daripada bingung kita cobain ya di di tekt editor kita atau vs Code kita Oke jadi kita udah di vs code-nya Langsung aja kita cobain Union types sama literal types jadi di sini gua akan conttrol B dulu ya untuk menghilangkan side barnya dan gua akan tsc-w ya ini untukwatch file-nya Yang tadi kita sudah atur dia di konfigurasi kita kayak gitu Oke Langsung aja pertama untuk si Union types ya jadi Union types kayak misalkan eh dia dalam satu variabel kemungkinan ada bisa dua eh lebih dari satu tipe data kayak gitu jadi misalkan kita punya LED eh ID ya Id ini akan bisa tipe datanya atau tipe datanya string jadi tinggal di sini number terus kayak gini string kayak gitu Jadi teman-teman bisa ngassign id-nya ini number atau dia string valueya jadi di sini waktu teman-teman ID sama dengan eh 123 ya itu oke gitu ya Waktu kita conso.log C Id ini Aman ini kan enggak ada merah ya gak ada merahak ada problem ya gak ada merah kalau misalkan teman-teman kasih dia id sama dengan eh apa ya ya Hm tes 1 2 3 Ya ini juga aman karena dia juga bisa string nah kayak gitu kalau tapi kalau misalkan teman-teman kasih dia ser ya Nah ini akan error ini akan error katanya type buan is not assignable eh to type string or number gitu ya jadi dia bulean enggak bisa teman-teman assign ke string atau number gitu karena di sini teman-teman tentuin dia dia number atau string teman-teman juga bisa nambahin dia lagi di sini Misalkan tig ya tig tipe data bulean itu bisa errornya tadi udah hilang lagi kayak gitu nah ini sebut Union types nah Union types itu kadang kita gunakan di array juga misalkan kita punya LED array ya kita definisikan sebagai R ya R ini kita pengin tipe datanya itu e bisa string bisa number jadi bikin array kan kayak gini ya S Kom 234 koma oke misalkan ya nah eh dengan kayak gini kan sebelumnya kita belajar tentang eh materi e type inference ya Di mana tab script sendiri yang akan mendeteksi dari tipe data kita kalau teman-teman lihat ya di sini kita hover di R ini nah akan kelihatan ya dia string number array Nah dia bisa string bisa number kayak gitu nah ini biasanya kita juga guna Union types itu di dalam eh apa namanya array jadi teman-teman tipe datanya nanti bisa string atau number ya number dan dia bentukannya array kayak gini nah ini bisa k tapi walaupun gitu ya walaupun teman-teman tidak mendefinisikan pun eh typript bisa tahu ya pakai typ inference tadi Nah kalau difinisikan kayak gini secara splisit ya atau secara type annotation ya tadi ya Oke jadi ini adalah Union types sedangkan selanjutnya ada namanya literal types literal types atau types literal ya jadi eh teman-teman secara spesifik menentukan bahwa variabel ini value-nya harus apa kayak gitu misalkan tadi kita ada status gitu ya status kita titik dua kita tentuin statusnya bisa eh suces ya value-nya atau value-nya itu BL status Nantilah Oke bisa sukses atau bisa Failure faah kar udah ada status mungkin kita ganti ya Bukan status mungk namanya apa ya status bukan apa ya ST mungk karena ada status ya sebelumnya ya Okelah gak apaapa biar hilang errornya dulu aja ini biar teman-teman tahu misalkan kita Bu ST deh info deh Oke jadi ada info itu dia bisa success ya atau Failure ya Jadi ini kayak eh apa ya literal types itu teman-teman tentuin value-nya itu maunya apa gitu ya jadi dia harus itu Jadi waktu ini kita save ya kita pengin eh ngassign si info value-nya itu Har harus si sucess nah atau si [Musik] Failure nah oke kayak gitu Ini aman gak merah ya waktu kita cons.log info aman di sini pasti aman ya itu di problemi aman tapi kalau misalkan teman-teman kasih salah gitu ya faure maka di sini akan erorure not type success or Failure nah gitu jadi harus antara ini atau ini gitu ya jadi ini lebih spesifik lagi nih valuenya ditentuin gitu ya atau di sini teman-teman juga bisa ya Engak harus string sama string ya bisa string sama true juga gitu ya itu bisa juga jadi di sini teman-teman bisa ganti dia ke true Nah bisa juga nah kayak gitu jadi ini materi tentang literal types sama Union types kayak gitu Nah kita lanjut ya ke next materinya Nah sekarang kita masuk di materi type alies Nah jadi typ script itu memungkinkan kita untuk mendefinisikan alias ya untuk tipe data yang kompleks atau biasanya tipe datanya itu panjang gitu ya jadi kita akan menggunakan keyword yang namanya type gitu jadi alih-alih menulis ulang type yang sama berulang kali kita bisa memberikan nama alias untuk tipe tersebut jadi kita akan menggunakannya bisa menggunakannya Di berbagai tempat kayak gitu misal kayak tadi ya Ee kita pengin type-nya itu ee ada namanya eh tipenya akan number sama string ya Kita kasih dia dengan ee nama ID jadi ketika kita pengin number dan string nanti type-nya ya Ya udah colen ID aja gitu ya jadi teman-teman enggak perlu colen eh titik du ya kalau itu titik du number eh garis tegak string gitu ya enggak perlu jadi tinggal titik du id aja aman kayak gitu nah ini namanya type alias gitu ya jadi kita mendefinisikan alias untuk tipe data yang kira-kira mungkin Kompleks ya atau panjang gitu ya Nah itu kita bisa gunain sintxs atau keyword type ini kayak gitu nah ini biasanya juga digunakan dalam eh teman-teman bikin objek gitu ya misal teman-teman Pengen ya kan objek itu bentukannya kayak gini ya jadi kurung kawal nanti ya ada key value ya Ada key value ya key value gitu ya kayak gitu ya terus saya pair pasangan key dan value ya ini akan gua Iras dulu Nah jadi eh setiap ininya ya ini kan eh teman-teman tentuin ya misalkan typennya adalah si user ya Kita kasih eh nama aliasnya user Nah si user ini bentukannya objek ya ini OB jadi dia kalau misalkan teman-teman assign ke type user itu nanti e variabelnya akan bertipe objek Nah karena dia bertipe objek di sini Nanti dia harus punya ID punya name sama punya is id-nya eh anya number name-nya tipe datanya string sama is actif tipe datanya bulean kayak gitu Jadi waktu teman-teman bikin user s dengan e tipe datanya si user kita ini ya yang UGD ini maka akan ada ID yang tipe datanya harus number name yang tipe datanya harus string dan is active yang tipe datanya harus true kayak gitu Jadi ini kita bisa e ini ya mendefinisikan alias untuk tipe data yang kompleks Contohnya kayak gini ya nah atau panjang gitu ya Nah atau kayak gini nah jadi menggunakan keyword yang namanya type ini kayak gitu Jadi kita ggak perlu menulis Ulang nih tipe datanya berulang kali dan lain-lain gak perlu jadi bisa gunain type alias kayak gitu dan ini biasanya juga digunakan dalam penggunaan membuat tipe data untuk objek gitu ya Oke jadi gitu kita langsung aja Cobain type alias ini di tekt editor kita atau vs Code kita Oke Langsung aja Oke sekarang kita udah di vs Code kita ya langsung aja kita cobain yang tab alies tadi Nah tadi kan gua udah bilang ya bahwa tab script itu memungkinkan kita untuk mendefinisikan alias untuk tipe data yang kompleks atau panjang ya itu pakai keyword yang namanya type Oke jadi di sini kita akan hide ini dulu ya teman-teman bisa pencet ctrol B di Windows ataupun comand b kalau di Mac ya Oke jadi di sini kita akan coba type alias ya atau tulisan bahasa Inggrisnya kayak gini Oke jadi Misalkan ya misalkan kita punya apa yam mungkin punya variabel itu user ID gitu ya user ID ini tipe datanya ya kalau dia enggak string atau dia itu number gitu ya jadi bisa string bisa number Nah ini kan kalau misalkan nanti teman-teman ee bikin ya bikin value-nya Entar jadi user ID Equals kalau misalkan dia number 123 ya kalau misalkan string dia eh bisa jadi eh tes 123 gitu ya kan kayak gitu Ya intinya ya Nah misal Nih misal kita juga punya yang namanya eh bukan user ID deh yang lain ID nah post ID misal kita juga punya nih post ID ya po ID e dia itu juga tipe datanya string atau number juga nah ini kan ribet ya misalkan ada beberapa banyak kayak gini dan lain-lain ya ini kan e lumayan panjang nulisnya ataupun kadang E bentukannya lebih kompleks dari ini ya jadiin e mungkin string number atau dia bulean ya ya kalau kayak gini ya Gimana ya sulitlah ya untuk nulisnya berulang ulang dan lain-lain ya Nah di typesript itu digunakan type alias jadi kita bisa eh mendefinisikan alias untuk tipe data yang menurut kita kompleks atau panjang gitu ya jadi di sini teman-teman bisa bikin aja eh tipe baru ya tipe data baru itu type ya dengan alias itu si ID gitu ya ID kayak gini nah si Id ini akan punya tipe datanya itu number atau e string or number ya string atau number pakai Union jadi di sini teman-teman gak perlu nulis ini lagi Nah tinggal pakai yang si ID tadi nah gini nah G Nah ini kan sangatsangatgangkan banget ya teman-teman nah ini akan gua hilangin capsocknya console.log si user ID kita nah ini aman ya Nah kalau misalkan teman-teman ganti pun dia val-ya ke number dia tetap aman juga nah jadi dia string or number ya Nah kayak gitu Jadi ini adalah penggunaan dari type AL nah typ Al ini juga sering digunakan waktu tem-an OB misal misal kita punya objek apa ya user mungkin ya jadi Pak user user user apa ya user S kan objek bikinnya kayak gini ya adair valueir value ya bukan value ke value jadi miskan dia ada ID itu Terus mungkin ada name itu Rango sama dia ada apa lagi e online G ya online itu gitu ya Oke jadi teman-teman lihat ya bentukannya di sini ya cons ID itu number name string online itu bulean Nah misalkan kita punya user user juga kayak gitu juga nah terus kan kita Peng Ya dia e ada tipe datanya ya Kita bikin typ-nya kayak gini ya akan bikin type kayak gini jadi caranya teman-teman bisa bikin type alies jadi di sini teman-teman bikin type misalkan e user dengan u-nya gede ya itu sama dengan Nah jadi si tipe data alias kita si user ini ya nanti dia akan punya ID gitu ya E name sama tadi apa onl gitu ya jadi ID itu tipe dat number ya jadi harus mengikuti ini nanti terus name tipe datanya string sama satu lagi online tipe datanya bulean gu ya Nah dengan kayak gini teman-teman masukin ini ke user Kak gitu nah ini kalau kita conso.log user Ini aman ya dan di problemsnya Gak ada problem ya Oke kita lihat dia di Running E Browser kita ya setelah kita kompile ke javascript pun aman nah dan dia Enggak ada problem juga waktu dikompilasinya jadi inilah bentukannya ya bentukannya kalau misalkan teman-teman pengin apa namanya eh bikin eh tipe data untuk objek ya tip data untuk objek pakai type elies biasanya Jadi kalau misalkan teman-teman ada user dua gitu ya cons eh user 2 Nah itu akan mengikuti lagi Jadi tinggal pakai aja T El Yes tadi kayak gitu nah Nah ini kan menggampangkan banget ya type Elias ini Nah jadi di sini eh dibilang ya kalau misalkan teman-teman kasih ini kosong ya Kosong Dibilang nih dapat problem nih ya katanya eh type is missing following properties jadi type ini karena dia ngambil eh properti dari si user ya user ini dia harus ada properti ID name sama online jadi ini harus ada nah jadi teman-teman harus ada ID eh misalkan id-nya ini dua ya terus ada name ya name-nya mungkin di sini eh Pato gitu ya dan harus ada juga eh online Nah setelah ada tiga-tiganya maka Sorry false baru dia tidak error Dan ini juga harus mengikuti ya tadi kan kita bilang id-nya harus number kalau misalkan di sini teman-teman bikin string maka akan ada problem lagi katanya type string is not assignable to type number jadi string yang di sini ya tidak eh boleh dimasukkan ke dalam ID karena ID tipenya adalah si number kayak gitu nah ini kita pakai yang namanya type alies ya nah jadi kita selain eh mempersingkat ya mempersingkat eh tipe-tipe data yang panjang gitu ya kayak gini itu kita juga bisa menggunakannya untuk ee bikin tipe ee dari objek kita kayak gitu nah objek kita ini kayak gitu nah ini sering banget dipakai ya type alies ya itu pakai keyword type oke nah gua harap teman-teman paham ya tentang e type alies ini kita lanjut ke next materinya aja Oke sekarang kita masuk di materi optionional properties Nah jadi di typesript dia itu menyediakan fitur yang memungkinkan kita untuk mendefinisikan properti secara opsional pada objek gitu ya jadi kita ee bisa pakai yang namanya opsional properties jadi properti opsional ini atau opsional properties ini adalah properti yang tidak wajib diisi pada suatu objek jadi dia boleh diisi boleh enggak ya Nah tadi kan waktu teman-teman bikin eh properti properti ya dari sebuah objek ya bikin bentukan tipenya pakai tab ini ya itu wajib diisi nah tapi dengan menggunakan opsional properties itu enggak wajib diisi boleh ada boleh enggak ya Nah caranya gimana caranya teman-teman pakai tanda tanya ya tanda tanya kayak gini nah ya jadi tanda tanya baru titik du Kayak gitu artinya ini boleh ada boleh enggak artinya propertinya ini opsional gitu ya email juga gitu ini propertinya opsional jadi waktu teman-teman bikin sebuah objek ya misalkan user 1 tipenya adalah user dari sini ya dari ini nah itu yang wajib Cum name nah teman-teman bisa lihat ya user 1 itu e sama email dia enggak ada user 2 itu email dia enggak ada tapi e ada ya karena dia ini boleh ada boleh enggak gitu ya Nah sedangkan user 3 dia name ada email ada tapi Age dia enggak ada karena e optional kayak gitu nah jadi ini bisa disebut sebagai optional properties kayak gitu nah daripada bingung Langsung aja kita cobain optional properties ini di TT editor atau PS code kita Nah sekarang langsung aja ya kita cobain dari eh optional properties tadi jadi di sini gua akan running terlebih dahulu projectnya tscdw oke dan ini akan ng-watch eh file kita ya yang di dalam src sesuai dengan yang sudah kita atur di config tadi Oke ini akan gua hide dulu di Windows teman-teman bisa pencet ctrol b kalau di ma comand B Oke jadi kayak yang gua Jelaskan sebelumnya jadi typ script menyediakan fitur agar kita ee mendefinisikan properti pada objek itu secara opsional ya jadi propertinya itu boleh diisi boleh enggak gitu ya Nah kan tadi kita belajar ya pakai yang namanya type ya jadi misalkan type user gitu ya jadi kita eh sediakan eh tipe alias untuk si user yang bentukannya adalah objek gitu ya jadi kayak gini JAdi misal si e tipe user itu dia harus punya name ya harus punya name gitu ya dan bentukannya adalah string dia harus punya e Age mungkin ya umur ya Nah ini teman-teman bisa pakai tanda tanya titik du kayak gitu ya biasanya kan titik du kayak gini aja ya kalau pakai tanda tanya titik du ini teman-teman bilang kalau ini opsional boleh ada boleh Enggak kak gitu jadi misalkan di sini number sama Ail nah Ail kita pengin juga opsional jadi boleh ada boleh tidak gitu ya Nah ini tipe datanya string kayak gitu Jadi waktu teman-teman bikin sebuah variabel misalkan user 1 dengan type aliasnya tadi si user tadi Nah jadi di sini dia yang wajib Properti wajibnya adalah name aja jadi name aja jadi name-nya wajib kalau name-nya enggak diisi maka akan keluar error ya di sini property name is missing gitu ya tapi kalau name-nya udah ada di sini Misalkan name-nya adalah ranggo ya Nah ini akan aman errornya problems-nya hilang karena yang wajib cuman name yang ge Enggak ini opsional karena kita pakai tanda tanya di sini kayak gitu Jadi waktu kita conso.log si eh user 1 ya Nah ini cuman name aja ya nah kalau misalkan teman-teman bikin eh dia ada ed-nya juga bisa Misalkan user 2 ya itu dari eh type alias si user tadi terus kita bikin yang wajib name ya name wajib jadi name-nya misalkan sini eh apa ya kutip satu aja ya biar tetap eh sama sama yang di atas eh dan kita pengin ada Edge boleh nah ini boleh katanya itu ada tan tan Tuh jadi ini boleh Nah boleh ada boleh enggak gitu ya kan kadang kalau misalkan teman-teman ya teman-teman Ee mengolah data atau mengolah apa namanya bentukan objek dan lain-lain ya itu kadang teman-teman pengen Eh kayaknya ini gak terlalu butuh tapi e dia value-nya ada kemungkinan ada tapi gak semuanya ada gitu ya engak semua data teman-teman itu punya value umur gitu nah tapi value umur itu ada Nah itu bisa teman-teman capai dengan menggunakan Opal properties kayak gini nah jadi ini Aman waktu kita user ini akan keluar Udin sama karena si ini opsional dia boleh ada boleh enggak jadi dia enggak akan merah detek Merah Nanti waktu sebelum kita compile gitu nah jadi ini adalah optional properties gitu ya jadi teman-teman bisa ngasih properti dari si objek ini opsional gitu ya boleh ada Boleh tidak Tapi kalau misalkan teman-teman kasih ini e hilangkan ya si email ini tidak pakai tanda tanya maka kedua-duanya ini akan merah karena properti email is missing karena email sekarang jadi wajib kalau misalkan kita kasih tanda tanya dia jadi opsional kita enggak error gitu ya kita boleh ada email boleh enggak gitu ya kayak gitu Oke jadi ini materi tentang optional properties kita lanjut ke next eh materinya Oke sekarang kita masuk di materi enom ya jadi enom ini adalah tipe data ya yang khusus di typesript aja Jadi kalau misalkan teman-teman cobain ini di javascript ini enggak ada gitu ya atau fitur ini sebenarnya belum ada Walaupun ada wacana ya bahwa fitur ini akan ditambahkan di javascript tapi Setahu gua sampai saat ini belum ada Jadi intinya Enum ini kayak gini ya yang paling bawah aja gua bacain ya jadi Enum memungkinkan kita mendefinisikan nama yang bermakna untuk sekelompok nilai yang konstan kayak gitu itu intinya tapi kalau definisi panjangnya kayak gini ya jadi dia adalah suatu cara untuk mendefinisikan sekumpulan nilai ya yang memiliki nama dan biasanya digunakan untuk merepresentasikan data yang terbatas dan tetap seperti kayak status arah kode ataupun kesalahan itu by definis cuman kalau misalkan teman-teman bingung ya teman-teman bisa baca yang bawah ini aja ya jadi itu adalah Enum ya Jadi kita gunain dia ya Eh untuk biasanya ya mendefinisikan e nilai-nilai kita yang konstan ya misalkan kayak arah ya Direction gitu ya jadi cara bikinnya kayak gini ya pakai keyword Enum atau SX Enum terus nama dari enumnya ya di sini kasih nama dia Direction terus kurung kurawal di sini baru masukin e bentukan darium kita Nah nanti ada misalkan kita ada up ada down ada left ada right nah by default vol nilai dari Enum ini nanti adalah dimulai dari 0 ya Jadi ini yang pertama adalah 0 yang down adalah 1 left adalah 2 e right adalah 3 Jadi kalau misalkan teman-teman bikin variabel baru itu move Ya move itu dia eh sama dengan tipe datanya adalah dari Direction J waktu kita kasih dia value direction.up dan kita console.log si move ini outputnya akan no0 kayak gitu karena nilai awal itu dia akan selalu nol gitu ya di sini kayak gitu Jadi ini untuk e kita definisiin konstannya aja ya jadi kita bisa ngcek Misalkan tem-an ngcek ya misalkan if gitu ya if sama dari variabve yaamaama Baru Jalan sesuatu gitu ya biasanya digunakannya kayu Oke lanjut lagi e miskan teman-teman ingin mendefinisikan value-nya teman-teman bisa definisikan kayak gini jadi entar up sama dengan sat ya in up-nya itu di satu nanti yang down left sama right nanti akan mengikuti atau mengincrementenkan dirinya Jadi ini akan jadi dua ini 3 ini gitu ya oke terus selain itu teman-teman juga bisa ngassign dia eh sebagai string gitu ya jadi string E6 jadi kayak misalkan di sini up itu sama dengan up kayak gini ya Terus down sama down left sama left right sama right ya ini biasanya konstan-konstan yang sering dipakai ya sering dipakai bentukannya kayak gini ya kir-kira ini konstanstan kayak gitu nah jadi ini adalah bentuk dari Enum nah Sebelum gua masuk ke vs cod-nya ya kita cobain ya Enum ini di sini Gua pengin nyampin terlebih dahulu ya banyak Pro Kra e dalam pengguna Enum dan banyak yang bilang juga kalau misalkan Enum itu ee tidak terlalu bagus dan lain-lain Ya karena dari e segi e orang yang bikin typ script ini aja bilang bahwasanya kalau misalkan dia e bisa ngulang lagi untuk e bikin bahasa typript ini dia tidak akan memasukkan enu kayak gitu nah jadi Eh ini ada satu video yang Nanti bisa teman-teman lihat ya nanti akan gua lihat lihatin tapi itu bahasa Inggris ya Eh itu adalah Kenapa kita gak usah pakai Enum gitu ya dan nanti akan gua lihatin juga e bentukan-bentukannya eh waktu kita di vs cod-nya kira-kira sedikit gitu ya karena kalau dibahas itu panjang gitu ya ini kayak semacam language debate ya jadi kayak perdebatan bahasa l ya ini fitur-fitur fitur-fitur bahasa itu biasanya didebatkan gitu ya kayak gitu Oke jadi ini materi tentang Enum ya kita langsung aja ya kita cobain dia di vs Code kita oke di sini Kita sudah buka vs Code kita ya atau text editor kita dan Tadi kita juga sudah selesai meng-set up semuanya ya Eh Dan ini juga kita sudah jalanin dia dengan live server yang sudah kita connectkan ke javascript kompilasinya seperti itulah kira-kira jadi di sini kita tinggal ketik tsc-w ya ini untuk nge-watch semua file tabpt yang ada di dalam folder src sesuai dengan yang sudah kita konfigurasi tadi di tsconfig.json kita jadi ini akan gu enter dan ini akan diw ya oke pertama gua peng ngide ini dulu tem-eman bisa pencet conttrol B ya kalau di Windows mis di ma bisa B jadi kita akan belajar tentang jadium kitaai kst yang eh terkait gitu ya yang ada hubungannya seperti itu jadi di sini kita akan bikin dulu enumnya ya misalkan di sini kita akan ada Enum itu Direction Yaum Direction di mana valuenya mungkin nanti ada up terus ada down ada left ada oke nah Ini kalau misalkan kita e coba console dlock dari si direction. up gitu ya ini kita save maka akan keluar no0 di sini Kenapa 0 karena by default ini adalah numeric Enum ya jadi by default Enum itu adalah bentukannya numerik gitu ya Jadi ini akan bernilai nol si up jadi variabel atau nilai pertama ya Yang ini elemen pertama itu akan selalu bernilai nol elemen kedua akan 1 dan dia akan diinkremen ke bawahnya gitu ya dan ini akan bernilai 3 gitu tapi kalau misalkan teman-teman pengin ngubah nilainya ya ngubahya ini kita coba down ya gua buktiin kalau misalkan dia bernilai nah ini kalau misalkan teman-teman pengubah nilai numeriknya misalkan di sini teman-eman kasih ini adalah e gitu ya maka yang di bawahnya akan mengikuti pertambahannya jadi down akan 7 left akan 8 akan jadi 9 Nah ini jadi da kita sekarang nilainya 7 kayak gitu jadi ini adalah numerik enom gitu ya Nah ini e Lucunya ya lucunya kalau misalkan teman-teman pakai ya teman-teman pakai teman-teman lihat kompilasi dari main.js-nya ya di sini ini kan kompilasi kita ya bentukannya di javascript akan kayak gini kenapa karenaum itu sendiri bukan termasuk e fitur atau sintaks dari javascript kita jadi javascript engak ada dip dataum gitu ya Ini pertama kali di perkenalkan di typript gitu ya jadi typript itu e dia pakai konsep Enum jadi kayakiru-iru dari ya kalau misalkan tahu Jadi dia e pakai konsep yang namanya jadi ini untuk e apa namanya E mendefinisikan kayak nilai-nilai konstan yang berhubungan ya kayak Direction kan ada up downitu ya kayak misalkan Ranti miskan ada AD Ada apa lagi admin member e apa lagi ya kayak gitulah kira-kira jadi itu biasanya dihubungkan atau dikaitkan dengan tipe data yang namanya k jadi di sini kita bisa misalkan pakai yang namanya let move Ya move ini kita akan kasih dia tipe datanya Nah nanti valnya akan jadi E misaltoh itu jadi gitu yaah ini ini bisa kita consol.logove kayak gitu nah ini akan nilainya 6 kayak gitu Jadi ini adalah penggunaan dari Enum terus Enum itu sendiri Ini kan numerik ya numerik en itu numerik kan Eh ada lagi dia bisa bentukannya string ya jadi string en jadi contohnya ya contohnya di sini eh ini akan gua iniinah ya akan gua copy ke bawah dan ini untuk yang Direction string ya kita ganti nama enumnya Direction string nah ini agar gua bisa lihatin ke teman-teman eh ada sedikit kekocakan ya juga sih ada sedikit menurut gua agak aneh aja ya tentangom ini eh nanti akan gua lihatin juga pertama ini adalah Direction yang untuk string misal misal ya ini up itu kita kasih nilai atas ya Eh terus down kita kasih nilai dia eh bawah dan ingat ya ap teman-teman kasih eh enumnya itu bertipe string kayak gini ya Eh value-nya string teman-teman harus kasih semua value-nya harus dikasih beda sama yang tadi Kalau yang ini kan sama dengan 6 ya kan enggak ada merah nih yang di bawahnya karena dia auto increment ke down jadi 7 left jadi 8 right jadi 9 kayak gitu tapi kalau misalkan di string ya enggak bisa di auto increment gitu ya maka eh katanya Enum member must be must have initialized ya jadi harus diinitialize Oke left akan jadi kiri eh right akan jadi Eh kanan misal kanan oke Ini gua save ya kita lihat di kompilasinya nah ini agak menarik ini sebenarnya Nah teman-teman bisa lihat ya Ini untuk eh Enum dari numerik kita tadi ini untuk Enum dari eh apa namanya string kita tadi Nah beda ya beda Bedanya apa bukan value-nya yang ini ya di ujung ya teman-teman bisa lihat ya tadi kan nilai kita itu adalah 6 7 8 9 ya untuk si eh ini si numerik Nah lihat ya Ini Direction nih entar dia ngakses ke eh dia kan Direction ini bentukannya objek nih dia ngakses ke key Direction Up = 6 terus value-nya akan dijadiin up nah aneh kan terus Direction nih dia ngakses ke Direction down ama 7 itu valu-ya jadi in down oke value jadiin left Eh ini jadi right ya walaupun nanti waktu kita akses dia akan tetap eh sama ya jadi en gitu ya tapi eh pendefinisiinnya pendefinisiannya di sini agak aneh berbeda dengan yang di string Nah kalau yang di string ini masih oke ya misalkan Direction string ya ini up ini sama dengan atas diakses di down ya Eh key-nya down e ininya jadi bawah left kiri ee right itu kanan kayak gitu nah Nah bentukannya kayak gini nah itu Ini masih oke gitu Nah kalau ini kan agak ee sedikit aneh gitu ya aneh dan Eh itu ada eh sumber ya Ini dari Eh ini materiungk kita udah ya ini cuman gua pengin bahas aja kayak ini adalah language debate ya kayak biasanya setiap bahasa pemrograman ada aja fitur-fitur yang eh sering ee bukan bermasalah sih sering dikritik lah ya kritik dari segi bentuknya dari segi dan lain-lain kayak enggak enggak sesuailah dengan eh bahasa pemrograman yang dibawanya kayak gitu nah ini juga berlaku untuk Enum ini Enum ini lumayan banyak dibet di dalam eh kayak perdebatan di dalam eh orang-orang yang makai dari typ script itu sendiri ya salah satunya ini akan gua buka ya ini video dari matth eh pokok ya ini bisa teman-teman cari ya Ini Enum ya Nah di sini dia tidak ee begitu menyarankan pengguna dari Enum ya Eh dan lain-lain Nah teman-teman bisa Lihatlah videonya ya Eh ini cukup panjang kalau misalkan gua jelasin dan menurut gua dia jelasinnya lebih bagus oke mungkin ini materi tentang Enum nih eurut gua bagus kalau misalkan teman-teman Lihat videonya jadi ini penggunaan dari Enum e kita lanjut ya ke next materinya oke nah sekarang kita masuk di materi k ya jadi k Enum adalah versi khusus dari Enum yang dioptimalkan untuk kinerja ya jadi ketika menggunakan k Enum tab script akan menghilangkan semua deklarasi Enum di hasil kompilasi dan menggantinya langsung dengan nilai enumnya Nah jadi ini untuk e menghilangkan overheat kadang ya Jadi ini kayak kinerja kita jadi lebih bagus eh langsung aja kita lihat dia di vsod kita Oke sekarang kita udah di vs Code kita ya tadi kita udah bahas yang si Enum ya Nah ini bentukan kodenya tadi Nah kalau misalkan ini gua ganti ya Ini gua ganti jadi cons Enum ya ini kan Enum kan kayak gini ya bentukannya Eh kalau gua ganti ini jadi konsenum nih hasil kompilasinya jadi beda Nah di sini teman-teman bisa lihat ya Eh kompilasinya kita akan hilangkan ini terlebih dahulu mungkin ya ini akan gua komen terlebih dahulu kita save Oke jadi dia akan langsung e ngasih value let move ama 6 Nah di sini nah jadi semua yang ada tadi itu dihilangkan sama dia nah jadi itu adalah penggunaan dari K Enum ya Jadi ini kayak meningkatkan kinerjanya l ya kalau misalkan eh teman-teman kerja di Project yang gede ya Eh itu bisa overhead gitu ya Nah itu bisa pakai yang namanya cons Enum kalau misalkan teman-teman enggak pengin e dia dari kinerjanya terganggu gitu nah jadi ini materi tentang cods Enum kita lanjut ke next materinya Oke sekarang kita masuk di tipe data unknown ya di tab script jadi unknown adalah tipe bawaan di Tab script yang digunakan ketika kita tidak tahu ya tipe data Apa yang akan kita terima Nah jadi dia hampir mirip dengan any ya tadi kan kita udah bahas tipe data any nah unknown ini lebih e hampir mirip dengan any tapi dia lebih aman dibandingkan dengan any Kenapa karena unknown ya unknown ini memaksa kita untuk melakukan pengecekan tipe sebelum menggunakan nilainya Jadi kalau misalkan teman-teman sudahah assign nih nilainya nih terus teman-teman kan Eh ada metod-metod yang bisa teman-teman gunakan ya di dalam misalkan string ada metodnya ya ada metod tersendiri kayak misalkan eupper cas lower cas ya kalau misalkan eh number adaodnya tersendiri juga ya Ada fix dan lain-lain gitu ya Nah unknown ini ya teman-teman gak bisa menggunakan nilainya ini terlebih dahulu gitu ya dalam kata lain ya unknown memberikan fleksibilitas untuk kita eh pakai tipe datanya tapi kita tidak akan ankan keamanan dari si tipe itu sendiri nah itu bedanya unknown sama any Nah nanti akan kita lihat langsung di vs cod-nya contoh sederhananya kayak gini ya penggambarannya misalkan kita punya LED data unknown ya terus kita datanya misalkan kita bisa isi di sini string ya kita bisa isi di sini number bulean ya atau Ray atau apapun itu kita bisa isi nah tapi misalkan teman-teman e di sini datanya adalah string hell ya terus teman-teman pengin akes methoder kan jadi biar dia eh tulisannya atau hurufnya Jadi huruf gede semua nah ini engak bisa Katanya nanti akan terjadi error ya errornya object is of type unknown karena dia tipenya unknown kita gak bisa akseser cas sedangkan kalau misalkan teman-teman pakai any ya pakai any di sini itu bisa Nah makanya di sini dibilang ya Eh unnown itu dia tetap memberikan kita fleksibilitas ya untuk e kasih value nilainya tapi kita tidak mengorbankan yang namanya keamanan dari tipe data kayak gitu Jadi ini tipe data unknown Jadi kalau misalkan teman-teman pakai unknown di sini teman-teman akan ngecek dulu nih eh di sini Misalkan contohnya sederhana ya if ty type of data sama sama string baru teman-teman console.log eh data do to upperce kayak gitu nah jadi teman-teman tetap eh keamanan dari Tipe teman-teman itu tetap terjaga Nah itu penggunaan dari unknown itu sendiri k gitu nah kita langsung aja cobain UN ini di vsod kita Nah sekarang langsung aja ya kita cobain tipe data unown kita tadi ya jadi di sini gua udah buka vs cod-nya dan ini adalah setupnya ya iniudah sebelumnya yagaliku A dan DII finalnya gua akan tscdw ya ini akan ngwatch semua file yang ada di dalam src kita file t scriptnya kayak gitu jadi dia akan ngcompileennya Oke jadi ini akan gua ke bawahin dulu biar enggak ganggu dan ini akan kita hideeman bisa e tekan ctrol B di Windows atau comand B di eh Mac gitu ya oke kayak yang gua bilang tadi ada namanya tipe data unknown ya tipe data unknown nah tipe data unknown ini ya dia hampir mirip dengan tipe data ini seperti yang kita Jelaskan di slide tadi tapi keamanan tipenya itu lebih terjaga jadi kita e harus ngecek e tipe datanya terlebih dahulu sebelum kita gunain value-nya contoh di sini teman-teman bisa bikin datanya itu bisa jadi e string ya datanya bisa jadi apaagi e number data bisa jadi bulean Datanya juga bisa jadi Aray ya jadiay 1,2,3 kom4 kayak gitu bisa hal kayak gini Bisa Ini sama kayak ini Ini juga gitu Ini juga gitu Oke Jadi kalau misalkan sor ini gua ganti ini ini juga sama ini engak akan terjadi eror ya Gak ada problem ya Gak ada problem nah tapi bedanya ya Sebelum teman-teman pakai ee dari value-nya ini nanti kalau misalkan tipe data unon dia enggak bisa teman-teman harus ngecek terlebih dahulu contoh di sini gua akan eh Stay di Hello Ya di sini kita akan eh coba nih di Hello ini kita akan data. to per eh case gitu ya nah ini kalau misalkan kita console.lock ya console.lock si ini Eh gua akan conttrol X terlebih dahulu conso.log data.uperc ini bisa di en nah ini eh tidak melakukan pengecekan nih di sini jadi kita enggak perlu gitu ya keamanan tipe datanya itu enggak bagus kalau pakai ini kan sebelumnya kita belajar ya kalau misalkan teman-teman pakai unknown tadi ya ini enggak boleh nah ini kita harus ngecek terlebih dahulu tipe datanya karena data ini sekarang tipenya unknown nah walaupun di sini bentukannya string ya string Kan bisa pakai metode to uple case tapi dia enggak bolehin karena di sini kita secara eksplisit bilang si variabel data itu unknown karena dia unknown ya kita enggak boleh langsung melakukan hal kayak gini Nah makanya tipe data unnon kadang lebih disukai karena dia eh typing save-nya lebih jelas gitu ya dia lebih safety lah G Ya intinya jadi caranya gimana ee nanti ada namanya tab assertion ya Ada juga Tapi sekarang kita pakai pengecekan terlebih dahulu contohnya kayak gini eh kita akan ngecek nih Eh itu If Ya if misalkan dari e type of pakai eh type off ya terus si data itu sama dengan ini eh materi javascript ya Jadi kalau misalkan teman-teman e bingung ya Ini sintaks apa bang atau keyword apa ya teman-teman harus belajar javascript dulu baru belajar typpt ya Oke kita lanjut jadi if type of data samaama dari e string misalnya dari string kita akan bilang di sinilog si ini tadi data. Nah ini akan gua haus kayak gitu kalau tidak mungkin ya El kita akan data is not string gitu yaah gitu Jadi ini waktu kita save ya ini akan keluar si hell kayak gitu nah tapi kalau misalkan datanya nanti buka ya 24 gitu ya Nah akan keluar data not makanya gua bilang ini lebih Saet jadi pengcekannya bagusitu ya darend nah daripada teman-teman pakai any kayak gitu cuman ya ada inilah ya Ada Pro consnya Ya sometimes kita butuh any kita butuh Oke tadi kita sudah bahas ya tentang sekarang gua bahas UN Kenapa nyingung karena dia mirip banget kayak gitu nah jadi ini tipe data UN di mana teman-teman bisa fleksibel menentukan E atau kasih nilai valya Tetapi dia tetap safety gitu ya tetap type safety Oke jadi ini materi tentang unnown ya kita lanjut ke materi yang selanjutnya Oke sekarang kita masuk di materi type assertion Nah jadi type assertion itu sendiri adalah cara untuk memberitahu compiler bahwa kita lebih tahu mengenai tipe data dari sebuah nilai dibandingkan dari apa yang dia inver gitu ya nah jadi tab assertion ini digunakan untuk mengubah tipe variabel secara eksplisit tanpa melakukan konversi data di runtime melainkan hanya membantu typesript memahami kode secara statis nah eh lebih enaknya lagi kayak gini ya jadi tab assertion ini dia tidak akan mengubah data aktual yang digunakan oleh javascript dia itu hanya mengubah cara typesript dalam memeriksa tipe tersebut selama proses kompilasi Oke lebih enaknya kalau misalkan kita ee lihatin contoh kodenya jadi untuk membuat type assertion ada dua cara itu Angle bracket sama S keyword nah ini gua lihatin yang pakai Angle bracket ya Nah kita ada let some value ya Ini tipenya unknown dan kita akan eh kasih dia value eh string ya tapi di sini kita kasih tipenya unknown terlebih dahulu gitu ya jadi ini eh value-nya adalah Hello ty script kayak gitu nah kayak yang udah kita bahas di materi sebelumnya bahwasanya tipe unknown ini ya kita enggak bisa pakai metod-metode kayaklerc dan lain-lainetod string lainnya itu enggak bisa karena dia unknown karena unknown tetap eh type safety-nya pengecekannya harus kita eh jelasin terlebih dahulu baru nanti kita bisa pakaiodnya tapi untuk assign value boleh gitu ya nah biasanya eh Sebelumnya kita akan pakai type guard ya type guard atau pengecekan misalkan eh if some value eh type of value string baru kita cek lnya kayak gitu-gitu ya Nah kayak yang sebelumnya Nah sekarang kita bisa langsung aja karena kita tahu gitu ya Kita kasih tahu nih ke tab script bahwa kita tahu some value ini sekarang nilainya adalah string ya jadi eh kita engak ses si dot l atau semua meod dari stringnya engak apa-apaah gitu engak apa-apa kita akses nah di contoh ini kita akan eh akses d l dan kita akan assign dia nanti ya ke dalam variabel string l yang tipenya number kayak Gu Jadi waktu kita conso.log string lnya ini Aman kayak gitu nah jadi kita kasih tahu ke typript bahwasanya tipenya ini kita lebih tahu dari dia G ya Nah kayak gitulah e penggunaannya nah ini kalau misalkan menggunakan keyword ya Ini sama juga jadi kita akanakses ya di sini kita akan pakai S string tadi pakaiet baru namanya Val terus inih tah miskan ini Nah kita ak eh dia sebagai string gitu ya Nah dia sebagai string k jadi ini tidak akan terjadi eror nah terus sebenarnya Kapan sih digunakan ini nah Sebenarnya ya con paling sering banget digunak inial waktu kita memanipulasi Dom ya Nah sini kita bahas dulu yang ini ya Jadi kita ak menggunakan dia saat bis inference tipe dengan baik ya misalkan eh ketika tipe variabel adalah ini atau unknown ya unknown nah atau saat menggunakan api atau library yang mengembangkan tipe umum ya tapi kita e yakin dengan tipe yang spesifik misalnya waktu manipulasi Dom manipulasi Dom ini sering banget sering banget kita pakai yang namanya tabertion nah ini contohnya Jadi kalau misalkan enggak kita enggak akan bisa dapatin my inputvue ya karena nanti dia akan menganggap ya menganggap ini adalah html elemen bukan html input elemen karena kalau dianggap html elemen ya kan tidak semua html elemen punya atribut value Enggak semua Nah makanya di sini eh dia akan eh kita akan bilang bahwa kita tahu kita lebih tahu dari dia ya bahwa ini adalah input elemen nah dan pastiin nanti Id teman-teman ini juga ke input elemen kayak gitu nah jadi ini adalah penggunaan dari type assertion nah Nah langsung aja ya kita cobain dia di tekt editor kita atau Visual Studio code kita eh biar kita lebih paham lagi nah sekarang kan kita udah di vs Code kita ini adalah setup yang sudah kita setting di awal tadi ya bentukannya kayak gini Oke dan ini gua udah running tscdw ya ini untuk nge-watch semua file kita yang ada di dalam src ya file tab script yang sudah kita konfigurasi di tsconfig.json kita sebelumnya seperti itu dan gua juga udah merun dia dengan browser ya ini kita Open dengan live server index.htmlnya dan dia akan ngerefer ke kompilasi kode dari main.js yang sudah dicompile dari main.ts-nya jadi kayak gitulah kira-kira ya Oke jadi ini akan kita watch lagi aja dari file tabriptnya Oke tadi kita belajar tentang yang namanya typeertion yaption Nah jadi kayak kita bilang kept kita lebih tahu tipenya dari dia nah contohnya ya contohnya kita akan nya let su value itu kita kasih dia tipe unknown ya dan di sini eh mungkin value-nya adalah Hello typesript Ya type script oke nah kita akan ada variabel baru ya atau ee bisa kita akses langsung akses langsung aja ya Coba akses langsung kita akan console.log di sini su value itu dot eh leng gitu ya leng nah ini enggak bisa ini kan problem ya problem karena su value itu tipenya unknown ya Jadi biasanya teman-teman kasih dia type guard terlebih dahulu ya misalkan eh di sini cek gitu ya if gitu ya terus some value type of type of su value equal ke string baru teman-teman tadi ya console.logvue.l Nah kayak gini baru dia keluar 18 nah ini namanya typ guard ya jadi teman-teman melakukan pengecekan terlebih dahulu gitu ya pengecekan tipe Nah kalau misalkan teman-teman sudah yakin ya Eh kalau tipenya nanti yang akan teman-teman terima itu adalah string gitu ya Eh teman-teman bisa pakai yang namanya tab assertion ya kayak yang kita bahas sebelumnya jadi teman-teman bilang aja di sini waktu teman-teman eh console.logvue ya kayak gua tahu kalau misalkan ini eh nanti adalah string ya Nah caranya tadi pakai Angle bracket Yang Pertama eh sor e apa sih namanya e sik bracket ini ya nah jadi kayak gini nah ini kita save nah ini enggak enggak apaapa nah hasilnya sama ya kayak tadi kalau misalkan ini kita hapus ini Gak boleh ya nanti akan errori object is typ UN gitu ya gak bisa Nah atau ininya kita iniin gak bisa jadi kita harus e dia dulu menjadi string kayak gitu nah ini adalah cara pertama cara kedua teman-teman pakai Tab assertion bisa pakai S jadi S string kayak gitu ya Nah Sebenarnya gua lebih prefer cara yang pakai S ini ya atau keyword S ini atau sytax S ini ya kenapa Karena kalau misalkan teman-teman pakai react ya itu e Setahu gua kalau misalkan pakaiar pakai bracket tadi itu enggak bisa gitu ya nah jadi gua lebih condrong ee pakai yang namanya S tapi terserah sebenarnya teman-teman kan sebenarnya Project engak cuman di RI aja gitu ya Oke jadi ini adalah caranya Nah ini pakai typ ex shate nah biasanya penggunaannya ya kayak misalkan unknown tadi ya Atau misalkan teman-teman ng-select elemen nih dari eh apa namanya index.js teman-teman Nah jadi misalkan di index.js ini di body kita akan ada Div ya Eh bukan di deh eh image mungkin image itu dengan eh ID kita akan kasih di Id Id itu adalah misalkan my image ya my image Nah di sini gua akan ctrol B ini biar hilang Oke dan di sini gua akan alz terlebih dahulu biar kita enggak Scroll kiri kanan ya oke caranya ini akan gua komen terlebih dahulu ee misalkan ya misalkan kita ada namanya eh bikin konstan ya konstan atau led led image LED image Element gitu ya Kita akan ambil dia dari dokumen.get Element by ID si my image tadi yang ini my image ini akan gua eh sor ini akan gua copy dan kita ambil dia di sini gitu ya Nah sekarang e kalau misalkan teman-teman hover ya di Image Element di sini nah dia mengatakan image Element ini adalah html Element kalau misalkan typpnyainver bahwa ini adalah html El bukan html image Element ya itu beda cara perlakuan contohnya teman-teman kan bisa akses e properti src yaerti src Nah di sini dibilang ya pertama n ya Jadi ada kemungkinan dia N0 Nah jadi ada kemungkinan dia N0 ya jadi ee dia itu html elemen atau N0 nah Biar dia enggak N0 ya teman-teman jelasin di sini Misalkan S eh HTM html elemen nah shml elemen Nah kalau misalkan teman-teman e bilang di html elemen html elemen itu enggak punya properti src ya Eh ini src enggak punya Jadi kalau misalkan teman-teman bilang ini bukan e n ya eh dia akan nginver dia html elemen by default yanya ini akan gua lihatin dulu nah ini html elemen jadi html elemen itu gak punya tipe src jadi di sini teman-teman akan s-nya itu itu ke html image Element Nah dengan kayak gitu teman-teman bisa ngakses src nanti mungkin bisa teman-teman ya eh dari bentukan e gambarnya misalkan di sini ini gua akan buka unsplash eh apa ya unash kita ke ini aja ini gratis enggak sih Oke kita Open dia open image in new tab oke nah Ini gua ctrl c ini akan gua close lagi aja ya Dan ini bisa kita kasih value nah sekarang kan ke render ya render dan kita enggak ada problems nih kayak gitu nah ini adalah contoh penggunaannya kalau misalkan teman-teman Eh pakai di yang namanya eh apa namanya E tab assertion kalau di Tab script kayak gitu ya kadang kan eh teman-teman pengin akses Dom dan lain-lain ya Nah inver dari typesript dia enggak tahu ya enggak tahu kan dia enggak ngelihat dari file html kita juga ya dia enggak mungkin lihat dari file html kita juga gitu ya kan bisa aja ya kan kita dapatin ini ya E documen.g Element by ID nah kita get Element by ID bisa aja elemennya input atau Div dan lain-lain ya maka dia nginvernya di awal ya gua lihatin lagi invernya itu adalah html elemen kayak gitu atau mungkin mungkin juga eh si ID dari image ini mungkin N0 juga kenapa Mungkin N0 Mungkin aja sebenarnya ini enggak ada gitu ya id-nya enggak ada Makanya di sini dia kasih inversnya itu adalah dia html elemen Atau Dia mungkin no0 kayak gitu nah bahkan kalau misalkan di sini teman-teman pakai typ-nya adalah eh html sor image Element di sini ya nah di sini dia juga pasti ini ya dibilangnya ya type html Element atau N0 is not assignable to type html elem Nah kenapa karena kemungkinannya ini bisa N0 gitu ya ini bisa N0 kayak gitu makanya di sini ini bisa Nul eh sor ini bisa N0 Nah karena ini bisa N0 makanya image elemennya ini gak bisa ngakses si src Nah makanya Biasanya kita pakai yang namanya Tab assertion di sini bahwa kita tahu kalau misalkan ini adalah html image elemen kayak gitu nah sehingga kita boleh untuk mengakses src dan kita tahu ini nilainya bukan Nul kayak gitu nah jadi ini e pengecekan type safety di e typ script-nya jadi pengecekannya tetap ada dan kita juga bisa pakai Nah dari properti src-nya Nah jadi penggunaan kayak di Dom itu sering banget ya sering banget pakai yang namanya type assertion ya assertion kayak gini tapi gua lebih suka pakai type assertion yang kayak gini ya daripada Eh pakai bracket ya Ya gitulah menurut gua lebih enak aja dilihat kalau misalkan tyertion-nya pakai keyword S ini Oke jadi ini materi tentang type assertion kita bisa lanjut ya ke next materinya Nah sekarang kita masuk di materi struktur kontrol di typesript Nah jadi ya di sini gue cuman pengin bahas aja atau jelasin aja ke teman-teman bahwasanya materi struktur kontrol di typ script itu sama aja dengan yang di eh javascript G ya Jadi ini sama gitu ya jadi struktur control atau control flow ya biasanya ya eh di javascript itu dan di typescript itu sama karena Eh typescript pada dasarnya dia emang supererset dari javascript ya Jadi ini berarti semua fitur dan sintaks dari javascript d D digunakan di dalam typp ya tanpa perubahan kayak gitu Nah jadi di typp sendiri dia tidak ada menambahkan fitur-fitur untuk mengatur strukturrol ya atau control flow di ehabp itu sendiri jadi kayak misalkan if El Ya switch for Loop ya loop dan tratch ya ini diimplementasikan dengan cara yang identik di kedua bahasa ini Jadi kalau misalkan tem- lihat ya untuk stat ya ini kan if Else ya Nah ini di javascript juga gini dip juga gitu ya ini kalau ya Eh sor switch nah ini di typ gitu di javascript juga gitu ya Nah kalau ini beda ya Yang ini kan apa namanya ini teman-teman masukin tipe data ya Ini bukan STR kolnyatur krolnya yang ini yangtch nah jadi sama yang diop juga S juga gitu kalau misalkan teman-teman lihat ya Ini for loopnya Nah ini kan sama dengan si javascript gitu ya di typript ini juga sama kalau lo atau du itu juga sama Nah jadi gua cuman pengin kasih tahu ke teman-teman kalau misalkan teman-teman nyari entar yaah ini kok strukturol gak ada ya E if else dan lain-lain kenapa gak ada dibahas Bang Nah ini Ini alasan dia gak perlu dibahas karena dia sama diabp sama javascript Nah jadi make teman-emanajar ip dulu ya baru entar enak belajarabripnya kayak gitu nah ini yang juga sama untuk penanganan kesalahan atau error handling jadi di javascript sama dengan di typcript kayak gitu nah sekarang kita akan masuk di materi function dalam typript Nah jadi function atau fungsi dalam typript bisa difinisikan dengan tipe data pada parameter dan nilai kembali atau bisa disebut value yaai kali ini Nah berikut adalah contohnya jadi misalkan teman-teman punya function ya namanya Grid gitu ya dia akan menerima parameter name nah di parameter name ini teman-teman eh Tentukan tipe datanya misalkan di sini string gitu ya Nah untuk menentukan tipe data dari return value teman-teman bisa titik du ya setelah kurung ini ya setelah buka kurung ya atau setelah e parameter ya tu e titik du baru eh tipe data dari return value-nya ini adalah string ya contohnya nya jadi function Grid ini wajib Mer return stringnya di sini return Hello plus name-nya maka waktu kita consollog Grid ya Elice itu akan jadi Hello Elice kayak gitu nah jadi ini adalah bedanya dengan javascrip ya kalau javascript kan teman-teman enggak eh mendefinisikan dari Tipe datanya Nah tipe data dari e kembaliannya kayak gitu Oke jadi ini e adalah function dalam typript ya kita coba ain ya ini untuk e basic dari si function ya fungsi dasar gitu ya kita cobain dia di tek editor kita Nah sekarang kita Cobain aja function tadi ya kita udah di vs code-nya dan ini setup kita sebelumnya ya Jadi ini adalah bentukan setupnya harusnya teman-teman udah sama ya dengan ini ya jadi di sini kita akan eh running aja ya DSC ya ini untuk ngwatch semua file tab script kita di dalam src ya karena kita ah ngatur tadi yang config.jsonnya kalau misalkan teman-teman bingung teman-teman bisa ee balik lagi ke modul awal kita kayak gitu oke nah jadi ini akan nge-wch dan ini akan gua eh hide gitu ya di Windows teman-teman bisa pencet conttrol b kalau di Max teman-teman bisa pencet comen B ya Nah jadi di sini kita langsung aja bikin function ya kalau misalkan di dalam javascript ya itu biasanya teman-teman bikin function kayak gini ya function Grid gitu ya dia akan menerima name dan setelah itu sorry e teman-teman akan bilang di sini Misalkan return Hello name gitu ya back Hello terus dari-nya kayak gitu nah dan di sini teman-teman akan panggil si functionnya ya consl misalkan di sinien tem-ih Rang ya Nah kalau di javascript kayak gini ya Nah kalau di typesript ini akan mendapatkan problem atau error ya Walaupun waktu kompilasi itu berhasil ya kan ini sudah di comppel-nya cuman waktu kita eh tulis ini ini akan terdapat problem ya katanya parameter name implicitly has any type ya jadi karena kita tidak mendefinisikan type di sini ya maka kita eh secara implisit si name ini akan bentukannya adalah any kayak gitu jadi di sini teman-teman jelasin ke dia misal name ini adalah string kayak gitu ya Nah nanti baru e dia akan bentukannya string Nah karena ini string ya Dan kita returnnya string ya by default ya atau secara inference ya typ scrip akan menentukan tipe dari return kita adalah string k gitu ya Nah jadi di sini Kita juga bisa secara implisit bilang kalau misalkan ininya string kayaku atau dari scrip sendiri boleh juga gitu ya cuman biasanya Emang ee waktu teman-teman bikin function itu ee teman-teman yang jelasin kalau misalkan tipe kembaliannya ini ST kayak gitu nah nah jadi ini adalah cara bikin function di typesript kayak gitu Oke jadi ini materinya kita lanjut ya ke next materinya Nah sekarang kita masuk di parameter opsional ya nah jadi kita itu bisa mendefinisikan parameter opsional di dalam sebuah function ya jadi e parameter ini enggak wajib untuk diisi dalam function-nya gitu ya jadi kita akan menambahkan tanda tanya setelah nama parameternya contohnya di sini kita ada function Grid ya Di mana dia ada name sama Edge Nah kita pengin edge-nya ini e opsional gitu ya jadi e waktu function ini dipanggil dia Boleh masukin Edge boleh enggak nah kayak gitu Nah mungkin kodenya di sini ya terserah teman-teman Sebenarnya ya bentukan kodenya cuman di sini kita bikin kalau misalkan -nya ada ya kalau ada kita akan Hello name your eh kita akses edge-nya tadi Years gitu ya misalkan name-nya adalah Bob ya ini ed-nya 30 maka jadi Hello Bob You are 30 years old gitu ya kalau misalkan ag-nya ini enggak ada yang kita return adalah Hello name-nya di jadi eh jadi dia jadinya Hello Bob kayak gitu nah jadi ini bisa sebagai parameter opsional Oke jadi langsung aja kita cobain dia di text editor atau vs Code kita Nah sekarang kita udah di vs cod-nya ya Nah tadi kan kita udah berhasil bikin function di typesript ya jadi dengan mengasih e tipe data untuk parameternya dan juga tipe data untuk return value-nya Nah sekarang kita cobain yang materi parameter opsional tadi ya Nah jadi parameter opsional di sini teman-teman tinggal masukin aja yang pengin teman-teman kasih misalkan namanya gitu ya dan tipenya adalah string Nah sekarang akan terjadi error ya karena function kita ini kita Panggil function Grid Nah kita cuman kasih satu argumen sedangkan di sini ada dua ya ada dua ada name sama jadi untuk bikin si -nya ini jadi opsional ya teman-teman tinggal pakai tanda tanya Nah dengan kayak gini errornya akan hilang Kenapa hilang karena sekarang kita boleh masukkan parameter boleh tidak gu ya Nah seperti itu Nah e oh ya untuk e penggunaan katanya Ya apa kalimat yang gua gunakan e gua bilang ini parameter ya Cuman waktu kita hapusanya erornya adalah argumen Nah kenapa kayak gitu ya Ini udah sempat gua singgung di tutorial JavaScript gua E kalau misalkan teman-eman masukin diu fun itu namanya parameter ya yang di sini namanya parameter cuma waktu teman-teman Panggil ini bisa disebut sebagai argumen gitu ya kayak gitu Jadi ini kayak e ininya istilahnya istilah yang digunakan e yang biasanya digunakan gitu ya jadi di dalam sini disebut parameter ya Cuman waktu kita masukin value-nya waktu kita Panggil yang siangg ini ini disebut sebagai argumen ya argumen untuk si parameter name kayak gu Nah jadi jangan bingung ya dengan istilahnya Nah jadi Edge ini sekarang kita bikin dia opsional karena kita bikin dia opsional ya kita tentu kalau misalkan teman-teman masukin sebuah parameter di dalam function teman-teman juga harus pakai ya misalkan di sini teman-teman cek nih kalau misalkan -nya ada ya -nya ada teman-teman eh mungkin return sesuatu yang lain ya kalau enggak baru teman-teman return Hello name misal kalau misalkan dia edge-nya ada ya artinya Dia ee dimasukkan sebagai argumen ya teman-teman akan return itu gua akan pakai backtik ya di sini Jadi ini Hello Eh sama ya Sama kayak tadi pakai name juga cuman di sini kita tambahkan misalkan your eh e eh your age itu H dari parameter Age terus di sini years old gitu ya Nah kayak gini Jadi kalau misalkan -nya ada yang di kayak gininya Jadi kalau misalkan teman-teman kasih di sini Rang terus 26or ininya akan gua kasih tipenya number ya Oke jadi waktu kita save ini ya nah jadi sekarang hell Rango old ya kalau misalkan6 inius maka yang gitu nah jadi ini biasa sebenarnya digunakan parameter opsional ini di eh sebuah function kayak gitu oke Ini kan gua balikin lagi jadi 26 Oke jadi ini materi tentang parameter opsional di function eh dengan menggunakan typesript kayak gitu kita lanjut ke next materinya Nah sekarang kita masuk di parameter default ya Nah parameter default adalah parameter yang memiliki nilai awal jika tidak diberikan argumen gitu ya Jadi kalau misalkan teman-teman enggak masukin ya waktu manggil function-nya Ya udah dia ada nilai defaultnya nah contohnya kita ada function Grid ya di sini kita kasih dia name Eya itu tipenya string dan kita kasih nilai default-nya adalah gest Jadi waktu eh si function Grid ini dipanggil dan kita tidak memberi argumen ya di dalam Sin ini itu kita akan Eh masukin nilai dari name-ya itu adalah gest kayak gitu jadi di sini kita akan return Hello name ya Nah di sini yang kode awal ya yang di sini kita console.log gre aja ya jadi kita enggak masukin argumen nih argumen name Nah jadi akan keluar Hello gu karena value-nya akan jadi G ya jadi by default dia G kalau misalkan teman-teman kasih valuenya ya dari argumennya ini ya teman-teman kasih nilai itu Misalkan gre masukin argumennya Charlie ya maka yang keluar akan Hello Charlie kayak gitu nah jadi ini adalah parameter default jadi teman-teman bisa kasih eh parameter dari sebuah functiontion kita nilai awal ya atau nilai default nah nilai default ini dipakai Kalau nantinya eh kita enggak kasih nilai nih di dalam eh waktu kita panggil function-nya kayak gitu Oke jadi langsung aja kita cobain ya di vs Code kita Nah sekarang kita masuk di materi parameter default ya jadi ini udah di vs code-nya kayak yang gua jelasin di slide sebelumnya ya parameter default adalah parameter yang memiliki nilai awal Nah karena dia memiliki nilai Awal jadi nanti waktu kita panggil si eh function-nya ya dari Parameter tersebut kita boleh kasih dia argumen atau enggak kalau misalkan kita enggak kasih argumen nilai awalnya yang akan jadi value-ya nah contoh sederhananya ini akan gua hapus terlebih dahulu dan yang ini akan gua komen misalnya jadi kita akan bentukannya kayak gini jadi di sini kita akan coba kasih e default value ya ke parameter name ini jadi di sini gua akan kasih default value-nya adalah String G ya Nah ini kita save sekarang kode kita berjalan seperti kayak tadi aja ya di sini tetap hell Rang go outputnya cuman di sini teman-teman bisa e Panggil function tanpa menggunakan argumen ya karena kalau misalkan kayak gini akan keluar Jadi sekarang kalau misalkan teman-teman tidak memasukkan value ya atau argumen untuk si name ini maka dia akan secara default akan dianggap sebagai G value karena ini adalah nilai awalnya jadi selama tidak ada argumen maka dia akan e masuk si nilai dari defaultnya ya jadi kayak default value ya Jadi kalau gak ada value lain Yaudah inialah sebagaiaultnya kayak gitu Nah kalau yang conso.log Grid Rango ini ya karena kita masukin nih e argumen Rango maka si gas ini tidak berlaku lagi ya jadi name ini akan menjadi si Rango jadi hell Rango kayak gitu Jadi itu materi tentang parameter default sama satu lagi gua pengin bahas ya parameter default itu biasanya sisipkan di akhir gitu ya disisipkan di akhir Terus misalkan kayak tadi yatonya contohnya kalau Mis kan Ini enggak di akhir ya di awal gitu ya kayak tadi kita akan ada tadi ya E itu dengan tipe number tadi ya dan dia opsional kayak gitu ya Nah ini akan gua uncomen lagi sor eh kita uncomment Oke Nah kalau sekarang kayak gini gimana gitu ya kan Di sini ada ya -nya opsional gitu ya Nah ini kan dia di gitu ya kalau misalkan teman-teman peng masukin dari umurnya ya Panggil umurnya misalkan di sini ya di sini kan 26 gitu ya umurnya nah ini akan dibilang error katanya typ number is not typing jadi 26 ini akan dianggap sebagai si name nah kayak gitu jadinya kan kita pengin ya name ini jadi gitunya ini 26ah kan tem-an kayak Gu yaah Jadi cara- function-nya masukin di sini undefine baru 26 kayak gitu maka baru akan keluar Hello gest your AG 26 years old kayak gitu Nah kalau misalkan teman-teman tidak menempatkan e parameter ini di akhir Nah jadi e usahakan tempatin dia di akhir gitu ya kayak gitu itu kegunaannya biasanya Nah jadi teman-teman bisa menggunakan undefine nanti kalau misalkan teman-teman engak nempatin di di akhir Karena sekarang kita juga ada e apa namanya parameter opsional juga nah karena kita ada parameter opsional juga ya parameter opsional juga disarankan juga di akhir kadang ya kayak gitu jadi ya gitu jadi di sini teman-teman bisa pakai undefine Ya untuk manggilnya kayak gitu sama untuk parameter opsional juga ya kalau misalkan teman-teman engak ada parameternya teman-teman bisa pakai undefine aja gitu ya Nah karena di sini per ini ya ini akan disebut sebagai parameter satu akan mewakili ini gitu ya jadi posisinya ngaruh kayak gitu nah jadi ini tentang eh parameter default di typesript ya Nah kita lanjut ya ke materi yang selanjutnya Nah selanjutnya kita masuk di materi void dan never di dalam function ya Nah void itu apa void adalah tipe return ya yang digunakan ketika fungsi tidak mengembalikan nilai ya jadi dia tidak mengembalikan nilai atau tidak ada return-nya nah contohnya di sini kita ada function log message ya artinya function ini kita gunain untuk ngconso.log si message-nya aja kan enggak ada return ya di sini ya Nah karena enggak ada return maka tipe datanya ya tipe returnnya bisa disebut sebagai void kayak gitu selanjutnya ada yang namanya never never itu digunakan untuk fungsi yang tidak akan pernah kembali atau berakhir ya jadi dia fungsi ini enggak selesai ya Nah Contohnya fungsi-fungsi kayak gini adalah fungsi eh yang selalu melempar error ya atau Loop tanpa akhir Nah ini kan enggak selesai ya fungsinya atau function-nya jadi teman-teman eh bisa eh definisikan tipe return return-nya itu adalah never kayak gitu Jadi ini tentang e void dan never Nah sekarang kita cobain dia di Visual Studio code kita nah sebelumnya tadi kita udah nyobain yang namanya parameter default ya Nah sekarang kita bakal cobain void dan never ya di vs Code kita ini Jadi ini akan gua komen terlebih dahulu ya karena ini masih di modul yang sama ya modul function gitu ya oke terus di sini ada namanya tadi E itu void sama never ya Jadi ada void sama never jadi di bawahnya ada never Oke pertama kita bahas void terlebih dahulu ya void itu sendiri adalah tipe return ya ketika fungsi kita atau function kita tidak mengembalikan nilai Apun contoh di sini teman-teman bikin function ya function-nya adalah log e message gitu ya jadi ini cuman untuk nglock si message-nya jadi kita akan menerima eh misalkan parameter message tipenya adalah string gitu ya nah jadi karena kita eh penginnya cuman nglock message-nya aja ya jadi di sini kita cuman console.log si message gitu ya Nah ini kan kita belum e definisikan ya tipe returnnya ya karena kita enggak ng return ya tapi by default ya kayak yang gua bilang tadi tab script itu ada namanya tab inference ya jadi tab script sendiri yang mendeteksi kita itu sebenarnya merurn apa Nah di sini teman-teman bisa hover di log message ya Nah teman-teman lihat ya log message itu menerima parameter message bertipe string dan return value-nya adalah void kayak gitu nah kayak yang gua bilang tadi ini adalah sesuai ya dengan definisi void tadi jadi ketika kita tidak meeturn sesuatu di dalam function maka tipe returnnya adalah void Nah teman-teman bisa biarin typ script yang secara inference e mengetahuinya atau teman-teman bisa cara eksplisit bilang di sini kalau ini void gitu ya Nah kayak gitu Jadi ini adalah tipe return void Nah Nah selanjutnya untuk never ya Nah kayak yang gua bilang tadi ya never adalah tipe return ya yang digunakan apabila function kita ini ya itu tidak pernah eh berakhir kayak gitu contohnya teman-teman punya function Ya functionnya itu namanya throw error ya Throw error jadi kita akan dapatin properti message ya dan string Nah di sini Kita bisa pakai eh tipe return Nah karena di sini kita mengasumsikan ya fun ini ya katanya ya e dia tidak akan canot haveable end ya nah jadi kita akan THR error aja di sini jadi new error Nah errornyaal si mage dengan kayak G problemnya hilang ya karena kita sudah menyesuaikan dengan tipe return ini nah kayak gitu jadi inialah tipe di mana FSI kita ya itu tidak akan mencapainyau ya jadi dia tidak pernah berakhir nah kondisi ini juga kadang waktuoping ya ses yangangetak berakhnyaah pai tipe return eh never kayak gitu nah jadi ini eh materi tentang return void sama return never di typesript Oke jadi kita lanjut ya ke next materinya Nah selanjutnya itu ada materi arrow function ya jadi arrow function adalah cara yang lebih singkat untuk menulis fungsi ya Jadi ini sering banget digunakan dalam eh callback statement ya jadi callback function kalau misalkan teman-teman lihat video gua yang javascript ya Sebenarnya gua juga udah bahas tentang arrow function ini gitu ya Dan callback itu sendiri gua juga udah bahas gitu ya jadi make sure teman-teman eh nonton terlebih dahulu eh video atau tutorial JavaScript kita ya atau setidaknya teman-teman Ngerti tentang javascript baru teman-teman belajar typescript ini ya jadi teman-teman enggak ada Miss Oke kita lanjut lagi ya jadi dia adalah cara yang lebih singkat untuk menulis function ya atau fungsi nah dia itu sering digunakan dalam callback atau ekspresi sederhana ya jadi Contohnya kayak gini nah ini adalahrow function Ini kalau misalkan gua jadiin function ya berarti ini jadi function function itu multiply gitu ya nanti ada di dalamnya parameternya x tipe number gitu ya terus y Ini tipenya number juga gitu ya baru di sininya tipenya number juga ya jadi di siniw ini lkur awal ini kita bilang return eh X dikali dengan y kayak gitu nah jadi ini adalah bentukannya Nah ini bisa kita singkat ya dengan menggunakan kayak gini nah jadi eh kira-kira LED multiply sama dengan ya di sini teman-teman masukin parameternya ya parameter dan tipe datanya parameter dan tipe datanya baru nanti titik du di sini ya setelah kurung ini ini adalah return-nya Nah di sini kita akan eh x * y ini pakai arrow ya sama dengan Terus eh bracket kurung ya eh bukan eh besar besar eh bentuk e sintaks sama dengan ya makanya disebut row function ya Eh terus baru X Dik dengan y Nah karena X Dik dengan y ini cuman satu statement aja ya jadi teman-teman bisa langsung x * y kalau misalkan nanti bentukannya banyak statement itu bisa pakai kurung kurawal biasa gitu ya Eh baru entar eh bentukan kodenya baru nantti returnnya kayak gitu Oke kita cobain ya dia di vs Code kita biar lebih enak aja menjelaskan Nah sekarang kita udah di vs cod-nya Langsung aja kita cobain row function tadi jadi cara membuat function menjadi lebih sederhana ya ini akan gua hide terlebih dahulu ya untuk setup kita ini dan sidebarnya teman-teman bisa pencet conttrol B di Windows kalau misalkan teman-teman pakai Mac bisa pencet comen B ya Nah misalkan ya misalkan ee teman-teman pengin bikin function multiply ya jadi di mana teman-teman akan mengkali parameter awal sama parameter yang keduanya gitu ya jadi a * b misalkan Kalau misalkan teman-teman bikin pakai cara biasa ya bakal kayak gini ya pakai keyword function terus di sini eh parameternya misalkan A Ya A itu number gitu ya terus B itu juga number gitu parameternya terus return-nya di sini Nah misalkan tipe data return returnnya adalah number nanti kurung kurawal baru di dalamnya ini adalah function teman-teman misalkan teman-teman akan ngr return a di* dengan b ya Nah ini kan biasanya teman-teman bikin function kayak gini Jadi waktu teman-teman console.log ini misalkan 3,4 hasilnya akan 12 ya Sor multiply 3,4 nah Maka hasilnya di sini akan 12 Nah ini kan cara biasa dalam membuat function ya Jadi ini bisa teman-teman singkat dengan pembuatan arrow function ini akan gua komen terlebih dahulu jadi kita akan coba Bikin arrow functionnya ya jadi di sini Misalkan cons multiply gitu ya Nah caranya kayak gini ya sama dengan terlebih dahulu baru kurung di dalam sini lalu di sini kurung panah ya kurung e seperti tanda panah baru di sini kurung awal kayak gini Jadi ini adalah cara eh sederhana dalam membuat function ya atau bisa disebut sebagai arrow function ini udah kita bahas juga waktu kita belajar javascript ya Nah cuman kalau di typript seperti biasa kita definisikan tipenya misalkan di sini kita akan ada parameter a ya parameter a tipenya number gitu ya terus ada parameter B tipenya juga number ya tadi kita akan ng yang namanya number juga Nah kayak gini nah dengan kayak gini nanti teman-teman valya itu a ya Nah ini ya ini dengan ini keilak kelihatannya Ini sama ini itu sama jadi sama aja ya Sama aja Jadi kalau misalkan kita save ini ya sekarangnyaa misalkan di kode teman-teman itu cuman sederhana kayak gini ya langsung Return satu kode gitu ya itu bisa teman-teman singkat caranya ini enggak perlu ya jadi return ini enggak perlu jadi teman-teman enggak perlu return di sini dengan caranya kurung kur awal ini juga teman-teman hapus kayak gini nah ini Jadi lebih singkat jadi hasilnya tetap sama 12 kita enggak dapat problem ya problem enggak ada Jadi enggak ada error dan lain-lain karena di sini eh kita bisa menyingkatnya dengan kayak gini kalau misalkan kita cuman ada satu blok kode Ya tapi kalau misalkan blok kodenya di sini Misalkan return a di* b ya sebelum return a di* b misalkan teman-teman a-nya ditambahin dulu ya A = A + 1 gitu ya atau ada kode-kode lain ya itu ggak bisa pakai yang sint tadi S Tadi teman-teman bisa pakai kalau misalkan e balikannya cum aja ya sederhana aja bisa langsung a * b kayak Git Nah jadi ini adalah materi tentang arow function di typesript ya Oke kita next materinya Nah sekarang kita masuk di materi overloading dari function ya jadi function overloading atau overloading eh fungsi nah overloading ini memungkinkan kita mendefinisikan beberapa fungsi dengan nama yang sama tetapi tipe parameternya itu berbeda gitu ya jadi dalam tab script kita bisa mencapai ini dengan mendefinisikan beberapa signatur fungsi misal contohnya ya contohnya di sini kita akan membuat fungsi yang dapat menambah dua angka atau menggabungkan dua string ya jadi di sini kita bikin nih Eh kalau misalkan dia function combine-nya ya itu a-nya number b-nya number maka akan keluar tipe data return-nya itu number kalau misalkan nanti a-nya string b-nya string kita akan e ngeluarin dia string kayak gitu Nah jadi waktu kita bikin function combine-nya teman-teman bikin any ya di sini any dan b-nya any dannya any ya di sini teman-teman akan cek nih cek E type-nya atau ini juga bisa dipakai unknown yaown karena kita pakai type guard ya di sini nanti akan kita return a + b ini a + b kalau misalkan ini string ini string ya kalau ini number ini number kayak gitu nah jadi ini adalah Eh pakai yang namanya function overloading ya overloading jadi kita membuat e fungsi yang dapat menambahkan dua angka atau menggabungkan dua string itu pakai namanya function overloading Oke Langsung aja ya kita bikin fun overading ini di t editor kita atau vs kita Nah sekarang kita udah di vs cod-nya ya jadi langsung aja kita cobain overloading function tadi Nah jadi kayak yang gua bilang tadiungk yatuk mendefinis yang sama tapi tipe parameternya berbeda kayak gitu itu bisa disebut sebagai overloading function nah misal ya misal di sini Kita akan punya ini akan gua conttrol B dulu ya conttrol B dan ini akan gua jalanin terlebih dahulu untuk e typpnya gitu ya Oke ini setupnya teman-teman sudah paham lah ya ini waktu di awal kita udah set up dan ini kitaudah buka dia di live server untuk tek.html-nya Oke jadi langsung aja pertama kita bakal bikin function ya misalkan kita bikin function namanya combine ya Jadi ini Eh biar cocok aja ya Jadi ini untuk mengkombinasikan gitu ya misalkan eh function pertama itu kita akan dapatin a ya dengan tipe number dan b dengan tipe number dan nantinya kita akan ng-return ya ng-return yang tipenya number kayak gitu nah ini adalah function combine selanjutnya kita bakal ada function combine lagi itu dengan tipenya Tapi ini jadi string ya sorry jadi ini semuanya akan gua jadiin string di sini Nah setelah itu yang di bawahnya baru kita jelasin ya Eh function combin kita ini jadi di sini function combine Mah tadi Po ini jadi dia tipenya sekarang gua kasih En dan b juga en ya dan di sini implementasinya kayak gini nah jadi kita mendefinisikan beberapa fungsi ya ini beberapa fungsi ya namanya sama ya dengan tipe parameter berbeda kayak gitu nah ini disebut sebagai overloading function atau fungsi overloading gitu ya atau overloading fungsi Oke jadi di sini teman-teman bisa e jelasin misalkan di sini teman-teman cek ya if misalkan type of dari si A Equals ke number gitu ya Eh dan b juga number gitu ya dan di sini dan eh type of dari si B itu Equals juga dengan number kayak gitu jadi di sini return-nya adalah a + b ya A + B nah kalau misalkan dia eh string ya string Jadi ini akan gua copy Eh ini number akan gua ganti jadi string nah return-nya a + b eh plus string mungkin ya plus ini string gitu ya Nah jadi gini bentukan dari ee overloading function kita Nah jadi sekarang ya Sekarang waktu kita coba di sini eh console.log ya console.log dari si combine ya combine itu 10,20 misalnya maka ini akan merurn number ya Nih teman-teman lihat ya Ini a number B number ini number nah plus S overlad gitu ya Nah sedangkan kalau misalkan teman-teman masukin string ya masukin string misalkan di sini eh hello terus di sini adalah wall gitu ya mungkin ini wall Kak gitu ya maka ini waktu kita save ya Ini teman-teman lihat ya gua hover di sini ini string ini string ini string plus S overload ya overloadnya Nah kayak gitu nah jadi ini bisa disebut sebagai overloading function kayak gitu nah jadi kadang kita eh pengin ya mendefinisikan fungsinya mungkin namanya sama ya tapi kita pengin e tipenya itu beda gitu Ya tipenya beda Nah kalau misalkan tipenya number sama number perlakuannya kayak gini gitu ya kalau misalkan nanti tipenya string sama string perlakuannya kayak gini dan ini bentukan balikannya kayak gini kayak gitu nah ini disebut sebagai eh function overloading atau overloading fungsi kayak gitu Nah mungkin ini materinya kita lanjut ke next materi Nah selanjutnya kita masuk di materi function callback ya dengan menggunakan type safety Nah jadi callback eh adalah fungsi yang dilewatkan sebagai argumen ke fungsi lain ya dan dipanggil pada waktu tertentu nah seperti yang gua jelasin sebelumnya bahwasanya kita udah bahas tentang callback ya Secara definisi itu di javascript ya Jadi ini gua cuman bilang aja kalau misalkan function callback itu bisa menggunakan type safety di typesript gitu ya jadi dengan typ script kita bisa menambahkan type safety pada callback kita nah ini ini untuk memastikan bahwa tipe data yang digunakan itu sesuai dengan yang kita harapkan kayak gitu contohnya di sini ya Eh Kita akan punya function proses data nah proses data kita akan nerima argumen data sama callback-nya ya jadi data tipenya adalah number gitu ya terus callbacknya callbacknya di sini eh Kita tentukan ya bahwanya dia ya Ee fungsi si callback ini ya itu dia punya eh tipe eh parameternya number dan returnnya adalah void kayak gitu Jadi waktu kita Panggil nanti si callback-nya ya kita pastiin Eh bentukannya kayak gini kayak gitu nah dan di sini keluarannya karena kita enggak return apa-apa tipe data returnnya adalah void gitu ya karena kita akan data for each kita akan eh panggil si callbacknya di sini Nah jadi di sini teman-teman tinggal e pakai ya proses datanya Ini misalkan FSI callbacknya di sini kita pakai function ya Jadi ini item number kita akan consolog aja itemnya dikali dengan kayak gitu nah teman-teman bisa lihat ya tipe data dari si callback kita ini ya callb atau function callbacknya ini ya Nah ini sesuai dengan ini Nah jadi kita menerapkan type safety pada callback kita jadi dengan menambahkan tipe pada parameter callback ya nih tipenya ya kita memastikan bahwa fungsi callback akan menerima Eh nilai yang bertipe eh number dan dia tidak merurn apa-apa ya void kayak gitu Jadi ini adalah kegunaan dari eh type safety pada callback ya Nah langsung aja ya kita cobain dia eh menggunakan eh vscod kita atau text editor kita Nah sekarang kita udah balik di vs cod-nya ya langsung aja kita cobain tentang callback tadi ya Nah jadi callback itu adalah function yang dijadikan parameter atau argumen di function lain contoh di sini kita punya function mungkin ya punya function itu proses data ya Jadi kita punya function proses data dan DII kita ak mendatkan paramet rupa array yang bentukannya adalah number gitu ya Nah terus kita akan punya callback kita atau function callbacknya Nah di sini teman-teman bisa tentuin nih bentuk dari callback function teman-teman misalkan callback function teman-teman bentukannya Dia mempunyai parameter eh item dengan tipe number gitu ya terus dia eh balikannya itu adalah void ya artinya Dia tidak memiliki Return statement kayak gitu Nah kayak gini Jadi ini akan gua kasih Nah kayak gini jadi teman-teman akan punya callback function gitu ya Eh ini callback dengan eh yang punya parameter item ininya number dan dia void kayak gitu Nah jadi di sini itu untuk callbacknya sekarang untuk si eh proses datanya proses datanya misalkan juga void gitu ya Nah di sini kita tinggal looping aja ya data ini kan array ya data do for each ya mungkin ini cara kita memprosesnya ya Jadi untuk setiap for-nya kita akan panggil aja si eh callback mungkin ya Jadi kita akan panggil si callback kayak gitu nah jadi kayak gini aja Oke jadi di sini teman-teman tinggal Eh pakai nih si callbacknya JAdi misal di sini e nama function callbacknya mungkin function apa ya function log item mungkin ya l item jadi dia harus punya eh item dengan number ya ininya dan dia balikannya adalah voidu ya Jadi ini void Oke dan di sini karena di void kita akan consl aja ini si item di dengan du G ya nah jadi waktu kita panggil si proses data ya proses data Kita tinggal panggil aja nih masukin pertama adalah eh array dari number kita J di sini Aray dari number misalkan 1,2,3,4 gitu ya kom5 Nah selanjutnya adalah untuk yang callbacknya callbacknya kita akan pakai log item J di sini tinggal log item kayak gitu Jadi ini kita save sekarang akan keluar 4 eh 6 8 10 ya nah jadi ini adalah function callback kita dan kita memanggilnya dengan typ safety ya Jadi kita pastiin ya callback kita ini memiliki eh parameter item dengan tipe data number dan dia itu juga balikannya itu void kayak gini nah ini namanya adalah callback dengan type safety yang bisa kita lakukan di typript nah kadang ya kadang teman-teman bikin function callback itu kan bentukannya sederhana kayak gini ya kalau bentukannya sederhana kayak gini teman-teman bisa bikin function aja di sini langsung aja gitu ya jadi langsung aja bikin di sini bentukannya jadi Item gitu ya number gitu terus di sini nah jadi bikin function langsung aja nah tanpa perlu teman-teman kasih nama jadi tinggal aja conso.log item dikali dengan 2 nah ini kita save hasilnya tetap sama nah ini kita langsung pakai function aja J function ini sering banget ya Dipakai kalau misalkan ya bentuk saksnya sederhana fnya sederhana Yaudah Pak langsung gitu ya kayak di kita ini kayak gitu nah jadi ini materi ini di lanjut ke next materi Nah sekarang kita masuk di materi object oriented programming atau bisa disebut sebagai Oop ya Nah typesript itu memperluas kemampuan dari javascript ya jadi kayak yang gua bilang sebelumnya ya typesript adalah superset dari javascript ya jadi basically dia adalah javascript cuman dengan fitur-fitur yang eh ditambahkan seperti itu Nah jadi dia memperluas kemampuan JavaScript dengan menambahkan fitur-fitur dalam Oop itu sendiri ya sebenarnya di javascript itu udah banyak ada banyak fitur ya kayak class inheritance dan lain-lain itu ada di eh javascript ya cuman dia enggak terlalu ketat gitu ya enggak terlalu ketat beda dengan penggunaan dari tab script jadi tab script ini sendiri Memang eh salah satu keuntungannya adalah oop-nya itu lebih kuat Gitu ya Jadi kalau misalkan teman-teman lihat bahasa pemograman ataupun framework ya dari eh javascript ya itu kayak angular Ya itu kan pakainya typ script ya Nah karenapa karena angular itu kalau misalkan teman-teman pernah belajar angular ya kalau teman-teman lihat angular struktur kodenya ya itu Oop banget ya Nah makanya dia pakai tabript karena kalau javascript dia kurang mendukung untuk Oop itu sendiri gitu ya jadi dengan Oop biasanya ya pengembangan aplikasi itu menjadi jadi lebih terstruktur modular dan mudah untuk dikelola makanya Oop itu adalah salah satu konsep yang sangat penting ya Nah mungkin buat teman-teman yang kurang paham tentang Oop itu bisa eh lihat course gua ya atau tutorialnya itu di YouTube Itu tentang javascript ya jadi tutorial JavaScript kita ada sesi Oop di situ dijelaskan banget tentang Oop itu sendiri mulai dari pengertiannya eh kosakata-kosakata pentingnya dan lain-lain lainnya kayak gitu Oke kita lanjut ya Nah pertama kita akan masuk ke materi kelas dan konstruor ya Nah kelas itu sendiri adalah blueprint ya untuk membuat objek ya Jadi biasanya teman-teman kan bikin objek misalkan Eh pakai kurung kurawal ya misalkan di sini LED eh objek 1 gitu ya nanti pakai kurung kur awal ya kurung kur awal entar bikin properti titik du value gitu ya properti value properti value gitu ya Eh sor ke value ke value gitu ya Nah misalkan teman-teman ada objek lain nanti e objek du gitu ya objek du bikin lagi kayak gini ya Nah daripada teman-teman bikin kayak gini Mending teman-teman bikin aja blueprintnya ya dari blueprint ini teman-teman bisa cetak objeknya sebanyak Apun yang teman-teman inginkan kayak gitu dengan value yang berbeda-beda seperti itu Jadi ini adalah kegunaan dari kelas itu sendiri gitu ya sedangkanstror yastroralah ya khusus yang digunakan untuk menginisialisasi objek baru ketika kelas diinstansiasi Oke ini akan gua Iras dulu ya Nah kata-kata instansiasi Eh ini teman-teman Eh gua rasa perlu tahu gitu ya makanya gua kasih tetap namanya instansiasi instansiasi itu kayak teman-teman bikin objek dari kelas gitu ya jadi eh teman-teman bikin objek kayak ini ya cons product E new produ kan ini dari kelas ya ini namanya Instance nah gitu jadi namanya Instance makanya gua bilang ini ketika eh kelas di instansiasi gitu ya nah jadi Eh ini sering banget keluar kata-kata kayak gini Oke jadi ini adalah pengertian dari kelas sama konstruktor jadi awal kelasnya ini ya awal si produk satu ini di eh instansiasi dari kelas produk ya Jadi konstrutor ini yang main duluan makanya kita bisa mengate ya Eh valnya itu dengan menggunakan construor k jadi laptop sama 15 ya ini akan masuk ke dalam sama baru nanti kita akan akses properti ini ya name sama pr menggunakan Dar sini sama dengan name yang di yaama yang di kah kita inisialisasi dia dengan menggunakan konstruktor karena ini adalah metod awal yang EE dipanggil waktu menggunakan kelas kayak gu nah ini adalah properti ya ini method ini method intinya method itu bentukannya kayak function Ya itu bisa disebut sebagai method kalau misalkan e properti ya bentukannya kayak gini nah ini properti ini P ini m ini m ya gu jadi ini adalah class dan Constructor Nah langsung aja ya kita cobain e class dan Constructor ini di vs Code kita Nah sekarang Langsung aja kita cobain class dan Constructor tadi jadi di sini kita udah ada di setup projectnya ya Jadi ini sama kayak sebelumnya ya setup projectnya dan di sini gua juga udah buka browsernya dari e web server yang kita running di index.html Nah di sini kita akan TSC daswat ya dasw ini untuk ng-watch semua file yang ada di src kita sesuai dengan yang sudah kita atur Eh pada awal materi tadi di tsconfig.json-nya nah ini gua akan pencet konttrol B untuk nge-hide dari sidebar-nya Oke jadi langsung aja kita bikin eh CL tadi ya kas atau blueprint dalam membuat objek ya nah jadi kita bisa menggunakan si S atau keyword class ya dalam membuat objek misalkan di sini nama kelasnya adalah produk ya atau nama blueprintnya adalah produk produ ini akan punya name ya dengan tipe data string ya Jadi ini adalah propertinya terus kita akan punya price itu dengan tipe data number gitu ya Nah setelah itu teman-teman akan inisialisasi ya akan inisialisasi dia menggunakan kstr nah kayak yang gua bilang tadi construor merupakan suatu metod khusus ya yang digunakan untuk e menginisialisasi objek baru ya Ketika nanti kita e bikin objeknya bikin Instance dari si kelas produc ini jadi di sini kita akan menerima e parameter name itu string dan di sini kita akan menera parameter PR itua Jadi tem bikin objek ya bikin objek jadi di sini kan bikin objek nanti ya misalkan prod one gitu ya ini sama dari new e produk gitu ya kan dimasukkan argumennya jadi ini misalkan laptop ya terus valnya adalah 1500 ya Nah ini ya akan masuk sebagai name ya ini akan masuk sebagai PR se nah jadi di ini kita akan eh inisialisasi dia nah inisialisasi yang property name sama press ini Jadi teman-teman tinggal dis.name ya akses ini ya dis.name itu Equals dengan name yang kita dapatkan dari eh Instance yang kita bikin gitu ya lanjut ini sama ke bawah gua akan copy ke bawah aja dan ini akan gua ganti jadi price kayak gitu nah ini dis.name sama ini kita dapat error Problem apa nih type string is notignable to type number Oh ya di sini kita bikinnya string ya di sini number harusnya ini juga number gitu ya Nah kayak gitu nah jadi ini adalah CL dan Constructor n jadi dengan bikin kayak gini teman-teman bisa bikin banyak nanti e apa namanya bisa bikin banyak objek dari ini misalkan ini produk S gitu ya Nah kita bikin produk dua gitu produk dua mungkin bukan laptop ya apa ya handphone mungkin ya handphone nah kita bisa bikin produk 3 gitu ya karena ini blueprint bentukannya jadi dia cetakan gitu ya jadi kita bisa cetak banyak-banyak objek kita nah nah teman-teman bisa hover di sini ya produk ini dari produk kayak gitu mungkin yang ketiga bukan handphone apaagi ya handphone eh Mouse mungkin ya oke k kayak gitu nah ini kita bisa akses nih nanti misalkan teman-teman bisa akses name sama price-nya jadi di sini kan tadi ada eh produk satu ya produk satu nah teman-teman bisa akses kayak objek biasa ya kayak objek biasa bisa akses produ.1.name gitu ya Nah teman-teman bisa akses maka akan keluar laptop ataupun teman-teman bisa lihat dari bentukan dari produk satunya nah ini bentukannya objek ya ya makanya objek di mana dia ada property name sama laptop eh sorry property name sama property price ya name itu value-nya laptop price value-nya 1500 ini sama untuk produk 2 produk 3 juga sama nanti akan bentukannya juga objek kayak gini dengan value-ya yang ada di dalam sini kayak gitu Jadi ini adalah eh materi tentang k sama Constructor sama satu lagi gua pengin bilang ya ini kan disebut sebagai ee apa namanya properti ya properti ada satu lagi itu meod properti itu bisa disangkutkan dalam data ya namanya kalau dalam eh konteks nyatanya gitu ya ini adalah data G ya data jadi kayak misalkan produk nih teman-teman punya eh produk handphone gitu ya datanya kayak mungkin nama handphone-nya misalkan eh mungkin sor Bukan ini ya E bentuk nyatanya itu produk gitu ya produk Mung nama dari produknya laptop ya Eh terus price-nya adalah 1500 dan lain-lain gitu ya itu bisa disebut sebagai data atau properti jadi dia bentukannya eh value gitu ya ada yang bentukannya meod kalau bentukannya meod itu sor bentukannya function itu bisa disebut sebagai method gitu ya contohnya produk teman-teman ini ya kayak laptop ya laptop itu bisa dihidupkan Nah nanti dia akan hidup dan lain-lain Ya itu kan function gitu ya untuk nya itu bisa disebut sebagai metod dia contohnya di sini Misalkan display produk ya kita eh nama method kita adalah display product Nah jadi di sini kita akan display aja produknya ya karena di sini gua akan conso.log aja ya conso.log ya sorlog Nah ini kan e display produ ini kayak gua bilang tadi ya dia itu method yaod bentukannya ya ini function kan teman-teman Gak perlu create kayak gini ya function gak perlu kayak gitu ya jadi bentukannya kayak gini aja gitu ya kalau misalkan bikin method gitu ya dan dia adalah bentukannya function ya function kan Nah karena di bentukannya function teman-teman di sini dia tidak Mer apa-apa ya Kita cuman conslog maka balikannyaalah void ya kita biasakan untuk menulisnya ya Nah karena kita pakai gu ya Nah jadi di sini kita akan cons adalah produk ya misalkan eh produknya kita ambil dari si data propertinya nah cara manggilnya itu pakai disk ya sama kayak di sini nah jadi teman-teman akses dia itu dis.name ya itu teman-teman akan eh panggil aja dis.name terus produknyan sama price-nya itu gua akan kita Panggil dari disice nah price kayak gitu Jadi waktu kita panggil si ini ya kita lihat ya produk S nah dia punya name laptop sama 15 DII ada Prototype ya ini ada construor Sama display prod nah nah ini kita bisa panggil disaynya ini akan gua keah dan di kan produc 1.display product ini akan gua save Oh ya karena ini bentukannya e function ya function dan dia kalau misalkan di dalam kelas bisa disebut sebagai method gitu ya Maka jangan lupa kurung buka kurung tutupnya untuk ngejalanin si meodnya Nah maka akan keluar produk eh laptop price 1500 Oh ya di sini kita udah console.log kita console.log lagi di sini makanya balikannya undefine ya jadi di sini kita enggak perlu console.log lagi karena dari metodnya itu sendiri ah ngekonsol nah jadi akan keluar produk laptop price-nya 1500 kayak gitu atau di sini kita bisa dua kali dolar ya biar 100 nah ini nah kayak gitu Jadi ini materi tentang kelas ya Dan kita belajar juga tadi tentang konstruor itu adalah method khusus ya teman-teman lihat ya bentukannya sama k ini ya Nah metod khusus untuk e menginisialisasi dari eh objek kita nah ketika dia di instansiasi kayak gini nah ini namanya Instance ini kita melakukan instansiasi ya Nah Oke jadi ini materinya kita lanjut ke next materi dari Oop lagi Ya Nah sekarang kita masuk di materi inheritance ya jadiherit mungkinkan kita untuk membuat kelas baru ya yang mewarisi properti mewarisi properti dan metod dari kelas lain Nah jadi kelas yang mewarisi bisa disebut sebagai subkas ya atau kelas yang diwarisi bisa disebut sebagai super kayak gitu jadi Misalkan ya misalkan e teman-teman tadi ada kelas produk ya kelas produk nih kel produk nih Nah teman-teman bikin kelas baru ya kelas baru itu adalah elektronik ya dia extend ke produk artinya elektronik nanti dia akan punya yang namanya eh properti dari sini name sama price jadi di sini harusnya ada name sama price ya Nah cara manggilnya itu pakai super ya pakai super di sini di kstruornya Nah jadi waktu teman-teman terima dari sininya diinate di sininya Ya name price sama warranty misalkan ya jadi dia bisa masukin di sini name press warranty kayak gitu jadi dia akan ambil yang ini ini diambil nih Nah jadi di sini e dengan super name ini sama dengan dis.n sama name gitu ya Dis sama price kayak gitu jadi dia memanggil kstruor dari supernya kayak gitu Nah selanjutnya eh waktu display prod Kita juga bisa memanggilod dari super kita itu pakai e sintaks super lagi ya super.display produ ya kayak gitu nah jadi kayak mewarisiah Ya semua metod ataupun eh properti dari si produk ya sekarang juga ee dipunyai oleh si elektronik kayak gitu karena dia mewarisi Nah jadi elektronik merupakan subklas dari si produk sedangkan produk merupakan super CL dari si elektronik kayak gu atau bisa disebut sebagai parent class juga ya atau ini bisa disebut sebagai children class juga ini sebenarnya penamaannya aja jadi ini tentang inheritance atau pewarisan di typpt itu sendiri Oke jadi daripada lama-lama langsung aja ya kita cobain ini di t editor atau Visual Studio code kita Nah sekarang kitaudah balik di vs Code kita ya Nah sebelumnya tadi kita jugaudah cobain ya tentang class Constructor dan method di vs code-nya Nah tadi kita juga udah bahas tentang yang namanya inheritance atau pewarisan ya di slide kita tadi Nah sekarang kita cobain ya inheritance atau pewarisan Ya inheritance ini yang memungkinkan kita untuk membuat kelas baru ya tapi kita bisa mewarisi properti atau meod dari kelas yang lain contoh di sini kita akan bikin kelas baru ya mungkin ini akan gua hapus dulu ya ini akan gua hapus atau gua komen aja ya gua komen dan kita akan ee bawahin dia ya ke bawahin aja dan di sini Kita akan punya yang namanya class product nah di mana dia akan ada name sama price ya Nah gua pengin bikin kelas baru mungkin elektronics ya jadi kelasnya namanya electtronics kelas itu namanya elek Tronik gitu ya atau elektronik deh karena dia singular ya Nah di sini kita akan pengin mewarisi ya mewarisi meod ataupun properti dari si produk ini jadi nanti si elektronic ini bakal punya name juga dia bakal punya price juga eh terus kita akan coba ngdisplay dari Produknya juga ya pokoknya kita pengin ini diwarisi gitu Ya diambil gitu ya daripada kita tulis ulang gitu ya kita tulis ulang kayak gini ya kita ambil copy Terus tulis ulang kan ee itu namanya bukan pewarisan Ya itu namanya copy paste Nah kita pengin ini diwarisi dari si produk ini nah jadi ini akan menjadi subknya Sedangkan ini menjadi super knya atau bisa disebut parent classnya ya ini Child classnya terserah ya itu eh penyebutan aja sih Eh Oke tapi gua lebih suka ini sub CL ya ini super CL karena nanti ada metod super juga oke langsung aja kita cobain misalkan di sini kita akan extens ya jadi caranya pakai keyword extens jadi kita akan extens dari si produk artinya si elektronik ya akan mewarisi semua yang ada di produk kayak gitu Nah jadi di sini eh misalkan berarti kita nanti bakal ada name sama price ya oke ya Jadi kita akan nerima name sama price juga nah pertama Karena kita terima name sama price Mungkin gua akan tambahin eh satu properti lagi ya jadi di sini gua akan bilang ini warranty ya nanti itu dia tipenya number ya dan di sini kita akan coba initiate aja ya Eh inisialisasi aja dengan menggunakan Constructor Ya seperti biasa Nah karena kita nanti akan ngambil dari eh name sama price juga jadi di sini kita akan dapatin name sama price juga waktu ini di instansiasi ya jadi name dengan tipe string terus price dengan tipe number dan selanjutnya nya adalah warranty dengan tipe number juga kayak gitu Nah langsung aja kita assign dia Jadi pertama dis.name ya Nah ini kan bisa kita ambil langsung ya dari si ininya name sama price-nya jadi tinggal super aja ya Jadi ini super kayak manggil aja ya konstruor dari yang atas ya jadi super terus name koma price kayak gitu Nah jadi super ini teman-teman Panggil konstruor dari si produk ya ini waktu gua ya Nah tem-eman lihat ya Nah dan dia menerima du parameter ya arumen name sama Pri name pru nah lanjut ke yang warantantant itu sendiri Kak gitu bin kelas elektronik ya yang EE dia itu ee punya ya yang dia itu eh mewarisi dari si produk nah ini kita coba save ya kita coba Bikin objek ya atau Instance dari si eh elektronik ini ya misalkan di sini kita bikin cons elektronik 1 mungkin ya Jadi ini new dari kelas kita tadi elektronik ingat ya kita expected tiga argumen ya di sini ada name ada price ada waranty Nah mungkin name-nya pertama apa ya Smartphone mungkin ya Jadi ini Smart ya terus Price dari smartphone berapa ya 1000 mungk ya ini 1000 1000 nah terus warantnya dia ada du ya Nah kayak gini Jadi ini kita save waktu kita si electronik 1 ya Nah kita lihat ya Nah di sini dia mewarisi ada name ada price ada warranty bahkan kita juga ada meod-nya ya metodnya dari si eh ini kita Nah lihat ya Ini ada dua Prototype ya Jadi waktu kita Prototype ini ada Prototype lagi ini adalah bawaan dari si eh apa parent classnya atau super class nah di mana ada display produ ini Nah karena dia ada display produ Jadi sebenarnya kita juga bisa manggil method-nya di sini jadi kita panggil si display produ Nah karena di display produk kita enggak nerima apa-apa ya nerima argumen apa-apa jadi di sini Kosong gitu ya kayak sebelumnya juga sama nah kayak gitu jadi Oh kayaknya kita enggak perlu consol.lock ya karena ini juga udah ngeekonsol ya kalau misalkan sekarang kita konsol lagi akan keluar undefine ya karena kita dua kali konsol jadi kita panggil aja Nah maka akan keluar produknya smartphone price-nya adalah 1000 kayak gitu nah kayak gitu jadi teman-teman juga Bisa nambahin metod baru misalkan metode barunya namanya apa ya display elektronik misalkan ya display elektronik ya elektronik Nah berarti ini e teman-teman pengin dia ada parameter atau dia ada apa gitu ya terserah teman-teman di sini gua gak Pengin ada parameter ya jadi dia ggak ada parameter tapi e balikannya juga enggak ada return ya jadi gua akan ngekonsol aja di sini makanya gua kasih dia tipe return-nya void kayak gitu ya Nah di sini di display elektronik mungkin kita akan conso.lock ya itu dari warranty-nya jadi di sini Weny Jadi ini akan ngambil dari eh dia Dis do warant itu kayak berapa tahun gitu ya warantnya misalkan 2 tahun warnya ya jadi 2 tahun ya Nah ini kita coba save dan teman-teman bisa panggil ya bisa panggil di sini electtronic display display elektronik Nah maka akan keluar warant 2 tahun kaku Nah misalkan nih misalkan- juga bisa ngambil metod yang ada di sini ya terus dijalanin di sini Nah itu bisa sama kayak sebelumnya pakai akses Dis aja gitu ya Eh sor bukan akes disk akes Super sama kayak ini kita kan manggil Constructor nih di sini pakai super ya jadi di sini tinggal pakai super aja jadi super terus di sini display prod kayak gitu nah dengan kayak gini teman-eman bisa akses nih si display prodnya Nah jadi ini akan gua e hapus ya hapus Nah sekarang harusnya tetap sama ya keluarannya cuman ini kan dari line 8 ya ini LINE 17 Sekarang kita coba save nah ini LINE 8 ini sekarang Line 18 cuman Line 8nya dari sini kayak gitu Ini manggil ke ngfer ke Line 8nya mana dia oh dimain.js-nya L 8 ya ini Sor It's OK Oke jadi kayak gitu jadi teman-teman panggilnya di sini ya si super. disisplay produknya di Running di sini kayak gitu Misalkan kita ke bawahin ya maka ini duluan ya nanti ini akan ke bawah nah ini di bawah nah jadi ini dipanggil ya Dipanggil dari si e superkas kita kayak gitu nah jadi ini materi tentang inheritance kita tadi ya atau materi pewarisan gitu ya nah Nah mungkin ini untuk materinya kita lanjut ke next materi dari Oop lagi Ya Nah sekarang kita masuk di materi public private protected dan read only modifiers Nah jadi apa itu modifiers Ya modifiers digunakan untuk mengatur visibilitas properti dan meod ya di dalam kassas yang kita bikin jadi tab script menyediakan beberapa modifier ya Ada public ada PR ada ada jadi setiap Eh modifier ini ya itu visibilitasnya itu berbeda gitu ya kayak gitu Oke jadi pertama langsung aja kita lihat ke public ya public modif nah atau bisa disebut sebagai default ya Jadi kalau misalkan tem tidak mendefinisannya maka dia adalah publ kayak gitu jadi Eh ini adalah properti atau meod yang ditandai dengan keyword public ya atau tanpa modifiers jadi nanti kalau misalkan teman-teman masukin keyword public atau tidak menggunakannya satu keyword apapun ya itu teman-teman artinya variabelnya atau properti atau method-nya itu nanti akan dapat diakses dari mana saja kayak gitu contoh ya contoh kalau misalkan teman-teman pengin modifiernya public ya jadi di sini Misalkan name ya property name ini teman-teman kasih public di sini atau misalkan teman-teman enggak kasih Apun itu juga by default public ya karena dia secara default akan selalu public kayak gitu nah jadi eh di sini teman-teman ya Bisa ya akses si x.name ya bahkan setelah di dibikin objek atau dari instancenya si X gitu ya nah jadi ini public example ini bisa diakses kayak gitu Nah kita lanjut ya kita tengok bedanya Ya nanti Nah sekarang ada private ya Nah private itu bikin eh meod atau properti hanya bisa diakses di dalam kelas itu sendiri ya Jadi waktu teman-teman pengin akses nih ya misalkan di sini eh ada private ID number ya jadi misalkan X nanti ya ini kan sudah di Instance ya X did ya Nah itu enggak bisa diakses kayak gitu karena dia private jadi hanya di dalam kelas itu sendiri kayak gitu nah biasanya kalau misalkan teman-teman tetap ingin mengakses bisa pakai ee bikin metode baru ya bikin metode baru kayak gini baru nanti akses dis.id-nya Lanjut Ya lanjut dulu Nah misalkan ada yang namanya protected ya protected ini serupa dengan private ya tetap ya properti atau meod ini nantinya akan bisa diakses oleh turunannya jadi misalkan kita akan ada namanya parent ya akan ada properti protected dari parent property misalkan di sini ya ini kita kasih visibilitasnya Nah ini bisa kita akses di parent kita di sub kita gitu ya Nah kayak gitu kalau miskan priv iniakisanti akan kita C dips code-nya ya biar teman-teman ngerasain ya Apa itu eh masing-masing modifierers lanjut ada read only ya read only nah modifier read only ini menjadikan properti hanya bisa diinisialisasi saat deklarasi ya atau di dalam konstruor jadi dia tidak bisa diubah setelah itu Nah misalkan di sini eh teman-teman punya ee bentukannya kayak gini ya Jadi teman-teman instanciate ya ini 2.0 ya Jadi waktu teman-teman xsion di sini akan jadi keluar 2. nah tapi waktu teman-eman rubah yaionnya di sini Jadi 3. ini akan eror Kara gak bisa Nah karena tem-eman bikin ini ya jadi dia cuman bisa diaksesjaion itu cuman bisa diakah diudahak inst cuman bisa diakses karena property version itu cuman bisa diakses enggak bisa teman-teman ubah nah kayak gitu Jadi ini akan error ya kalau misalkan x.vion = 3.0 Nah jadi ini kita cuman bisa ng-read aja Nah tapi di sini kita bisa Bang ini kan jadi 2.0 ini kan 1.0 awalnya itu emang bisa karena dia bisa waktu diinisialisasi ya ini kan inisialisasi nih atau dideklarasi ini kan deklarasi Nah itu bisa tapi kalau misalkan teman-teman rubah di sini kayak gini bentukannya itu enggak bisa karena dia cuman read only kayak gitu Nah langsung aja ya kita cobain modifiers ini di text editor atau vs Code kita setiap masing-masingnya Nah sekarang kita cobain ya modifier tudy masing-masingnya Nah tadi kan kita ada namanya public ya Ada private ada protected sama ada read only modifiers Nah pertama kita bahas yang public dulu jadi public itu adalah modifiers di mana setiap properti atau method kita ya itu dia nanti bisa diakses di mana aja kalau misalkan kita pakai public modifiers Jadi kalau misalkan kita pakai public jadi ini bisa diakses di mana aja nah dan by default semua properti atau semua method itu tulisannya publ ya jadi teman-teman Engak harus e tulis di sini publ kayak gitu Tapi biasanya Emang eh secara terang-terangan ya secara eksplisit kita bilang ini publ kayak gitu Jadi ini adalah hal yang lumrah dilakukan kayak gitu jadi misalkan ini public ini lumrah dilakukan tapi boleh tidak dilakukan kayak gini boleh juga kayak gitu ya nah jadi ini disebut sebagai public modif Jadi kalau misalkan dia public ya kalau misalkan dia publ teman-teman bisa akses dia di mana aja gitu ya Nah kayak contohnya di sini teman-teman kan akses disk.name ya property dis. nameame di dalam kelasnya itu boleh enggak ada problems ya enggak ada problems Nah misalkan teman-teman pengin juga ngeakses dia di dalam display elektronik itu juga boleh ya kita coba console.lock itu dari disk.name Nah Enggak ada problem ya Enggak ada problem dan di sini keluar smartphone ya Nah gitu jadi aman tidak tidak masalah gitu ya kalau misalkan dia diakses di dalam subkelasnya itu juga boleh kalau misalkan teman-teman pengin akses dia di luar sini ya console.log terus elect eh kita bikinnya bikin objek baru aja ya mungkin dari si produk jadi di sini gua akan copy yang ini ya copy gua naikin ke atas gitu ya oke dan ini gua akan hilangin komennya kita akan consol dlog produc 1.name nah ini juga boleh gitu ya Nah kayak gitu Jadi ini juga boleh jadi dia bisa diakses ee di dalam instance-nya atau di luar objek itu sendiri ya Eh Sor di luar kelasnya Kita juga bisa akses dia di dalam eh apa namanya kelas dari eh subkasnya ya Ini console.log diskname nah dis.name itu juga bisa kita juga bisa akses dia di dalam kelasnya itu sendiri nah itu disebut sebagai public Nah contoh di sini kita rubah ini menjadi eh private gitu ya private nah ini kita akan mendapat error errornya Apa karena private itu hanya boleh diakses di dalam kelasnya jadi kita cuman boleh akses property name ini ya di dalam ini aja gitu ya di dalam kelas ini aja Nah sekarang kita akan dapat error di sini enggak boleh katanya ya property name ini is private only accessible Within class product jadi dia hanya boleh diakses di dalam kelas produknya aja Ini kan kelas turunannya ya ini kelas turunannya ini kelas elektronik yang mewarisi si produk jadi ini enggak boleh langsung diakses di sini enggak boleh jadi ini kita komen ini enggak boleh lanjut selanjutnya ini lagi Ya Nah di sini Kita juga dapatin error nih Katanya property name is private and only accessible Within class product sama kayak tadi jadi ini hanya bisa diakses ya di dalam kasnya aja jadi di sini juga tidak boleh kayak gitu Jadi ini disebut sebagai private gitu ya jadi ini private jadi khusus di dalam SI kelas kita ini aja kalau enggak nanti bakal error gitu ya ada problem Nah selanjutnya ada property eh atau modifier stadi protected nah protected protected ini sama dengan private ya jadi kita enggak boleh ngakses dia di luar ini enggak boleh nih Nah ini akan error ya karena property name is protected and only accessible eh Within class product and subclass Nah jadi dia boleh di dalam subkelasnya jadi ini enggak boleh ini kan di luar subkelas ya jadi dia boleh di dalam kelas produk dan di dalam subnya subnya tadi elektronik kan subnya Ya nah dia exens dari produk jadi elektronik adalah sub berarti kita boleh akses di sini Nah gak merah kan Ya nah boleh keluar smartphone Nah gak ada problem gitu ya nah jadi ini bisa disebut sebagai protect Nah selanjutnya ada yang namanya itu only oke nah only itu sebenarnya hampir sama kayak public ya jadi dia bisa diakses ya bisa diakses di mana aja dia bisa diakses gitu ya tapi read only itu kita hanya eh ngread aja dari propertinya ini jadi dia enggak bisa kita ganti gitu ya Nah ini boleh nah ini boleh nih boleh nih si laptop boleh nih cuman pengin kita rubah nih kan ini kan bentukannya objek ya harusnya kan kita bisa merubah produk 1.name ya itu Equals ke misalkan eh eh apa ya tadi kita kasih laptop ya di sini mungkin kita kasih di sini adalah eh apa mungkin mirip laptop komputer gitu ya komputer nah ini enggak bisa karena katanya cannot assign to name Because it is a read only property jadi dia hanya bisa read only Nah jadi kalau dia itu read only ya dia itu Nah ini kan read only ya dia itu hanya bisa kita rubah di dalam ee sini aja waktu kita nginisialisasi awal gitu ya jadi di situ aja kita enggak bisa ngubah ee dia di luarnya Nah itu disebut sebagai read only nah ini enggak boleh ya Enggak boleh Nah jadi kalau misalkan ini public ini boleh ya public boleh ya kalau publ nah ini boleh nih nah kita jadi produk 1.n-nya jadi komputer ya Jadi waktu ini kita copy kita kebawahin di bawahnya ini jadi yang awalnya laptop Dia sekarang komputer ya waktu kita konsol. l kayak gitu cuman kalau misalkan dia read only itu ya cuman dibaca aja ya Jangan dirubah gitu ya jadi pastikan teman-teman ngasih value di awalnya ya waktu teman-teman instansiasi ya di sini instansiasi di sini teman-teman udah betulinstansiasi dari value-nya kayak gitu karena nanti teman-teman enggak boleh lagi ngerubahnya karena dia udah read only kayak gitu nah jadi ini modifiers modifiers eh yang ada di dalam eh Tab script ya atau Oop itu sendiri Oke jadi ini materinya kita lanjut ya ke next materi masih dari Oop ya atau konsep object oriented programming oke nah sekarang kita akan belajar materi shorthand initialization ya jadi tab script memungkinkan shorthand untuk menginisalisasi properti langsung dari parameter kstructor ya jadi tanpa mendeklarasi properti di luar kstruor Nah jadi langsung aja di sini public name string ya private number itu langsung ya tadi kan teman-teman harus e bikin lagi di luar Ini ya jadi name ya entar tipenya string ya Terus eh ininya public gitu ya tapi itu enggak perlu sebenarnya kalau misalkan teman-teman pakai SH ya initialization Jadi ini kayak cara lebih gampang lah untuk menginisialisasinya ya jadi langsung aja aja masukin visibility-nya di sini kayak gitu Jadi ini adalah SH initialization nah daripada bingung langsung kita cobain dia di vs Code atau Tex editor kita Nah sekarang kita masuk di materi shth initialization ya Nah sebelumnya waktu kita ngeinisialisasi dari kelasnya ya Jadi waktu kita bikin objek atau Instance dari sini ya Nah ini kan kita inisialisasinya kayak gini terus di dalam kelasnya sendiri Kita bikin dari propertinya Nanti baru kita inisialisasi dia di dalam konstructor Ya nah tapi kita bisa melakukan short hand initialization ya Jadi ini bisa kita hapus sebenarnya nah Lalu bagaimana caranya kita bikin eh properti di dalam SI produk ini jadi langsung aja di dalam konstructor ini teman-teman ini bisa langsung dianggap sebagai dari eh propertinya kayak gitu caranya gimana caranya teman-teman Eh masukin aja modifiers-nya langsung di sini nah jadi public ini price-nya jadi si name udah eh sorry public name-nya Ya name-nya udah enggak ada problem ya sekarang yang ada problem adalah si price-nya ini jadi teman-teman kasih juga public di sini Nah kayak gini Jadi ini sama ya dengan yang tadi dengan yang kita lakukan tadi di sini sama ini sama ini sama ini akan gua komen Mungkin biar gak hilang ya kita ganti lagi ini ke nah ini sama Nah jadi jangan kaget kadangkadang teman-eman dapatin modifiernya itu di dalamstrornya ini ya di parameterstr karena apa Karena itu adalah cara singkatnya cara singkat atau shnya untuk melakukan inisialisasi pada properti kita yang ada di k kita kayakituah jadi ini yang iniak tetap jalan ya tetap jalan seperti yang sudah kita tulis sebelum-sebelumnya kayak gitu Jadi ini adalah materi tentang short hand initialization ya Di mana kita menginisialisasi eh kasnya ya itu lebih gampang ya jadi kita langsung masukin modifierersnya ke dalam parameter di dalam Constructor method kita kayak gitu oke mungkin ini materinya kita lanjut ya untuk eh nextnya itu masih di materi Oop Nah sekarang kita masuk di materi polimorfism di Oop typesript ya jadi polimorfism itu memungkinkan metode yang sama yang sama digunakan dengan cara yang berbeda pada kelas yang berbeda jadi polimorfisme bisa dicapai dengan method overriding ya Eh itu mengubah implementasi metod dari superklas di subklas misal punyael an ya ini bentukannya terus tem-eman bakal punya Do ini ke Anya dari Anim k jadi misalkan tem-an peng bikin baru jug ini itu bisa Buk sat gitu ya doknya bentuk dua ya dengan metod yang sama kayak gitu Jadi ini bentuknya beda kayak gitu Nah ini bisa disebut sebagai polimorfism gitu ya atau banyak bentuk Nah langsung aja ya kita cobain dia di tek editor atau vs Code kita Nah sekarang kita udah di vs code-nya lagi atau text editornya Langsung aja kita cobain Ya materi tentang polimorfism tadi di sini jadi ini setup-nya Ya setup-nya seperti yang sebelumnya jadi sama ya jadi pastiin teman-teman nonton eh video yang bagian awal di mana kita melakukan setup ya untuk eh project ini dan ini gua juga udah buka dari browsernya yang udah gua open dari live server di Index html-nya lalu kita juga buka developer tools-nya yang bagian konsol Oke jadi kita masuk ke materi polyorphism ya ya atau kita bisa sebut dia dengan banyak bentuk gitu ya jadi di mana dia memungkinkan metode yang sama digunakan dengan cara yang berbeda pada kelas yang berbeda kayak gitu Contohnya kayak gini contohnya Kita akan punya kelas animal ya kelas animal ini mungkin punya metod eh sori dia punya method itu adalah make sound Ya ini ma sound jadi ini adalah meod-nya Nah mungkin metodya ini kita conso.log aja itu adalah ehgeneric animalound jadi kayak suara animal lah nanti jadinya nah di mana kelas kedua kita akan bikin kelas lain ya kelas lain atau kelas kedua itu adalah kelasnya mungkin do ya kelasnya Do ini ak atauwarisi sema yang ada di animal animal nah kayak gitu Jadi sekarang waktu teman-teman bikin ya bikin mungkin di sini eh Instance ya atau objek itu namanya cons Apa ya Eh dog cons apa Eh Apa nama anjing pitbull gitu ya Pitbull gini enggak ya tulisannya mungkin oke terus Pitbull ini akan ngambil new dari si doc kita nah ini kita gak perlu masukin parameter instansiasinya ya E karena kita enggak ada melakukan inisialisasi DII Oke jadi dengan kayak gini kita kan bisa ngakses pitb. maon ya ini bisa diakses maka akan keluar some generic animal animal Nah kita bisaoverride ya overriing dari ini jadi misalkan tem teman pengin bikin metod maon juga di sini ya maon juga eh terus teman-teman bisa consol.lock itu Misalkan apa ya Eh bark gitu ya Eh bark atau wof woof itu juga boleh wof wof De ya wof wof Oke jadi sekarang yang keluar adalah woof wof bukan si some generic animal font bukan kode ini tapi kode ini Kenapa karena kita udah overriding nih kita udah ubah implementasi dari yang awalnya maxon itu keluarin ini ya sekarang maxon akan keluarin ini untuk yang di dok kayak gitu nah ini disebut sebagai polimorfism banyak bentuk Nah jadi ini kan bentukannya beda ya bentukannya beda nanti kalau misalkan teman-teman bikin lagi kelas kucing ya itu bentukannya juga beda makanya disebut banyak bentuk misalkan cat dia akan extens juga ke animal terus di sini teman-teman Pengen ya E kalau sekarang kalau misalkan kita definisikan cnya ya sini gua akan e kucing misal kecil aja kucing itu sama dengan New dari cat gitu ya Nah sekarang waktu kita akses si kucing kita salah in kucing Oke kucing ya ini akan keluar nya some generic animal e animal sound Nah di sini teman-teman juga pengen si cat ini punya bentuk lain juga dari si method maon ya makanya teman-teman bisa maon di sini ya Eh terus conso.lognya adalah apa ya kalau cat itu miau ya miaum miau miaw miau gitu ya Nah dengan kayak gini sekarang bentukan dari eh maonnya adalah miamiau makanya ini disebut sebagai polimorfism di mana dia banyak bentuk kayak gitu nah jadi ini materi polimorfism di typesript ya kita lanjut masih di materi Oop eh kita lanjut ke nextnya Nah selanjutnya kita akan masuk di materi Static methods and properties ya jadi eh kelas itu sendiri dapat memiliki meod ataupun properti yang yang statis ya Jadi tidak terikat pada instance-nya atau waktu kita bikin objek ya tidak terikat dia jadi kita bisa akses langsung ya pada kelas itu sendiri kayak gitu nah misal ya tadi kan teman-teman misalkan punya kelas kalkulator ya teman-teman akan bikin dulu ya misalkan eh k e c gitu ya Eh calk nanti akan dari new eh si kalkulator ini gitu ya Nah kan kayak gitu biasanya tadi ya Nah baru nanti kita bisa ngakses dari metod e Calculate area gitu ya Nah sekarang kita bisa langsung aja dari kelasnya calculator.calculate are ya bisa kalau misalkan teman-teman tambahin statik di sini kayak gitu Jadi teman-teman dengan menambahkan langsung statik jadinya Bisa kayak gitu nah jadi ini eh adalah materi Static method dan propertis Nah langsung aja kita cobain dia text editor atau vs Code kita Nah sekarang kita di vs code-nya Langsung aja kita cobain Static method dan properties tadi jadi ini adalah setup yang sudah kita bikin sebelum-sebelumnya ya Jadi kalau misalkan teman-teman eh Miss dalam setup ini bisa balik lagi ke modul sebelumnya kayak gitu Oke jadi ini akan gua hide dengan pencet ctrl B ya kalau di Windows kalau di Mac teman-teman bisa pencet comand B oke Nah jadi kita akan bahas Static meod dan properties dalam e Oop ya jadi kelas itu sendiri dapat memiliki metod dan properti yang statis artinya dia tidak terikat pada instancenya atau pada objek yang eh dibikin dari kelas tersebut kayak gitu jadi dia hanya terikat pada dirinya sendiri misal ya misal teman-teman punya kelas E kalkulator ya kalkulator oke terus dia nanti akan punya eh mungkin di sini akan punya statik ya statik e pi pi yang statik itu number ya Jadi kita kasih dia pi-nya statik ya jadi dengan kita kasih p-nya statik kita kasih value-nya adalah 3,14 ya Jadi kita kasih defaultnya 3,14 jadi teman-teman e gak perlu pakai kstror nanti ya gak perlu pakai kstror terus di sini kita kasih juga statick di eh misalkan kita pengin ngcalculate area ya jadi akan ada metod Calculate area nah Calculate area ini akan menerima parameter radius ya nanti waktu dia dipanggil dan bentukannya number gitu ya Nah terus di sini returnnya itu juga akan number di mana Nanti kita akan Mer return di sini kita return adalah eh apa ya disp ya karena ini kita bikin statik ya kita ini kan bikinnya stak kalau tadi tem- aksesnya itu harus gitu ya Nah karena kita bik stak kita bsesnyaulatorah ini tapi kalau misalkan tem- gak bikin ini stak kayak G ya Nah ini Gak boleh ya katanyaak teman-teman bikin ini statik jadinya eh si kalkulator ini punya si Pi kayak gitu Nah jadi di sini kita akan kali dia dengan radiusnya ya radius terus kita akan kali lagi dia dengan eh radiusnya gitu ya jadi ini kan menghitung luas area ya kan dia eh Pi r^ ya V r^rat Oke dengan kayak gini teman-teman bisa langsung Panggil nih jadi consol.log ya panggil si metod ini karena teman-teman kasih statik ya di sini Jadi teman-teman panggil aja metodennya pakai kalkulator ya dari kelas ini terus dot Calculate area Nah kayak gini dan masukin misalkan radiusnya 5 gitu ya Nah ini teman-teman save akan keluar 78,5 ya dan di sini kita gak ada dapat problem ya tapi kalau misalkan ininya teman-teman enggak bikin statik ya Nah ini enggak boleh Nah katanya ini property Calculate area not on type of calculator jadi ini enggak bisa teman-teman harus eh jalankan instance-nya dulu kayak misalkan bikin objek dulu ya misalkan e gitu ya C Itu sama dengan New kalkulator baru masukin 5 di sini ya eh Oh enggak perlu masukin l new calkulator karena kita enggak ada nginisialisasi ya waktu kita panggil aja Jadi waktu kita panggilnya bakal kayak gini k log Calculate area baru masukin l Nah ini baru 78,5 kayak gitu atau ini 6 deh biar beda Oke Nah kayak gini jadinya kalau misalkan teman-teman engak bikin statik jadi dia harusodnya dipanggil harus dengan instancenya ya ini instancenya atau objek yang dibikin dari kel ini kayak gitu nah tapi kalau teman-teman definisikan statik ya stak nah teman-teman definisikan statik di sini dia akan eh boleh kayak gini nah kita boleh langsung kayak G Nah jadi ini namanya Static method dan properties di dalam sebuah kelas ya Nah kita lanjut ya ke next materinya Nah sekarang kita masuk di materithers and set ya jadither and Nah jadi jadi gther eh dan setters adalah metode khusus yang digunakan untuk mengakses dan memodifikasi properti secara terkendali ya Jadi mereka digunakan untuk menyembunyikan detail implementasinya jadi misalkan teman-teman punya properti private ya itu Ed ya nah kita kan pengin ngget si edge-nya ini ya jadi teman-teman bikin di sini gather ya jadi get Ed itu ininya number nanti akan _ Nah itu untuk nggetnya untuk ngesetnya ya atau mengubah nilainya itu teman-teman pakai set ya set terus ent teman-teman akan nerima argumen ya new nanti teman-teman rubah aja gitu ya rubah aja dari si nya kayak gini nah kayak gitu Jadi nanti tem-an waktu peng dapetinnya Yas akan dipanggil yang Edge dari si get ini Nah kalau misalkan ee teman-teman juga pengin misalkan eh nge-set edge-nya ya ya Ah pers.edge kayak gini ya 30 langsung aja persen. Edge nanti dia akan nge-set edge-nya di sini kayak gitu nah jadi ini materi gatherthers dan setters Nah langsung aja kita cobain dia di vs Code atau text editor kita biar lebih lebih kelihatan ya bentukannya Nah sekarang kita udah di vs code-nya ya langsung aja kita cobain gers dan setters tadi jadi ga dan setters itu adalah metod khusus yang digunakan untuk mengakses dan memodifikasi properti secara terkendali ya jadi itu definisinya tadi jadi biasanya itu mereka itu digunakan untuk menyembunyikan detail dari implementasinya Nah misalkan ya misal kan di sini kita akan bikin kelas baru ya bikin kelas baru eh oh ya sebelumnya ini adalah setup kita ya kalau misalkan teman-teman bingung ini tadi Eh waktu di awal kita sudahah set up projectnya kira-kira kayak gini ya Jadi ini biar bentuk bentuknya hampir mirip sama Project real biasanya ya Project real biasanya bentukannya kayak gini Oke Langsung aja kita cobain geers dan setter tadi jadi kita akan ada kelas itu mungkin person ya Jadi ini person nah terus kita akan ada properti propertinya kita kasih nilainya itu adalah private di sini ya jadi dia hanya diinisialisasi di awalnya aja jadi dia ggak bisa diakses di luar ataupun di dalam e kelasnya e kelas turunannya Nah jadi misalkan di sini akan ada properti private itu adalah ya ini number gitu ya terus di sini akan ada constror untuk si -nya ini ya kita akan nerima eh und Dan ini juga bentukannya number gitu ya Nah di sini kita akan inisialisasi ya dia jadi dis. sama ya Nah atau teman-teman juga bisa ini pakai e shth initialization ya Eh cara pendeknya langsung aja di sini bikin private nah ini juga sama sama kayak tadi oke jadi di sini eh kita pengin ya kita pengin properti ini ya dia itu kan private ya artinya dia gak bisa diakses dari luar ya Jadi kalau misalkan kita bikin sebuah eh Instance ya atau objek dari si k person ini misalkan di sini 1 ya itu sama dengan New dari di person terus di sini e ag-nya Kita masukin eh berapa ya Eh 20 mungkin ya 20 20 tahun gitu nah kan di sini kita engak bisa akses si property-nya ini ya conso.log person1 ini engak bisa ya karena katanya eher is private ya jadi only accessible with class person jadi dia hanya bisa diakses di dalam kass ini aja gitu ya Nah kita bisa pakai gatherers dan setters gitu ya geers Dan setters untuk eh apa namanya eh mengakses ya kayak mengembalikan eh properti ini lebih terkontrolah Ya jadi misalkan di sini Kita akan punya e get gitu ya get di sini gua akan kasih dia ya tapi gak pakai unders ya Ini nah jadi dengan kayak gini caranya jadi nanti kita akan dapetin ini adalah number ya ininya jadi di sini teman-teman tinggal return aja return misalkan kayak gitu nah dengan kayak gini teman-teman sekarang bisa akses si ini ya tapi engak gini caranya Caranya adalah dengan menggunakan yang namanya eod kita tadi ini pakaier tadi Nah dengan Ger tadi tapi tadi enggak pakai und ya kayak gitu Jadi ini akan gua komen ya Nah ini caranya kayak gini Enggak ada problem ya aman jadi ini waktu kita save akan balikannya akan 20 keluar 20-nya kayak gitu nah ini namanya gathers nah biasanya teman-teman juga bisa e mengimplementasikan hal-hal lain ya mungkin di sini bukan number ya mungkin di sini string gitu ya Eh string atau di sini teman-teman can balikannya ini pakai eh kurung kurawal sor stringnya pakai backch ya jadi dis. di sini eh years old gitu ya Nah maka akan keluar 20 years old gitu ya nah jadi ini implementasiimplementasinya ini disembunyikan jadi teman-teman tinggal panggil gernya aja kayak gitu nah Lalu ada namanya setters ya setter ini kayak ng-set dia ya ngset dari si edge-nya ini karena sekarang kan teman-teman enggak bisa akses ini ya und Edge ini kan teman-teman enggak bisa akses Jadi waktu teman-teman coba ganti ya person 1 e ya Nah ini edge-nya private enggak bisa diakses jadi teman-teman enggak bisa assign jadi 20 jadi 22 misalkan ya enggak bisa karena ini private ya private eh dan dia hanya bisa diakses di dalam kelasnya Nah jadi di dalam kelasnya ini kita akan bikin sebuah setter jadi ini untuk nge-set value-nya jadi misalkan teman-teman set eh -nya ya jadi di sini teman-teman kasih dia nama Sorry kasih dia nama Edge mungkin teman-teman akan dapatin sebuah eh parameter dari edge-nya ketika dia dipanggil mungkin ini eh set -nya new Edge ya dapatin parameter new Edge dan dia tipenya number gitu Ya tipenya number jadi di sini nah dengan kayak gini teman-teman akan set si ed-nya tadi misalkan e set dia dis. sama dengan si new kita kayak gitu nah jadi ini sekarang kalau misalkan teman-teman pengin ng-eset si property private kita ya udah pakai Eh ini aja nah Cara pakainya sama kayak yang tadi ya sama kayak yang tadi kan kalau tadi teman-teman pengin eh ng bentar ngukar und Edge kan kayak gini ya und = 22 kan kayak gini ya Nah kalau misalkan teman-teman pakai set sama juga kayak ini Jadi tinggal panggil aja nama setternya Jadi bukan Manggilnya bukan kayakgil function ya panggilnya kayak kayak gini tadi Nah kayak gini Jadi ini tinggal dihapus nah udah nah sekarang -nya jadi du ya kita akan cons yang di bawahnya ya ini diahnya jadi kita nah awalnya kan 20 ya setelah kita perbarui 22 jadi ini jadi 22 kayak gitu nah jadi ini jadi 2 old kayak gitu nah biasanya akan ada kayak sama kayak yang di sini tadi ya akan ada implementasi eh yang pengen kita lakuin ya dalam dis ya misalkan di sini kita cek misalkan ya kan umur itu gak mungkin minus ya umur gak mungkin minus jadi kita akanetnya kita akan ngecek terlebih dahulu ya Jadi kalau misalkan If Ya if eh new e yang dikasih dari setternya itu besar dari 0 ya baru kita akan melakukan dis. ini kalau tidak kita akan console.log aja ya Jadi kalau enggak kita akan else eh di sini mungkin kita akan conso.log itu adalah eh apa ya invalid mungkin ya invalid gitu ya jadi di sini e setternya ya Eh kita akan ngecek nih ya Ada implementasi yang kita lakukan ya dalam si edge-nya ini jadi dia enggak boleh asalign ya Jadi kalau misalkan dia -2-3 gitu ya kita akan console.log aja gitu ya jadi di sini kita akan coba ya kita akan coba masukin di sini Misalkan Min T gitu ya kita save maka akan keluar invalid age ya dan waktu kita conso.log yang Age tadi dia akan tetap 20 years kayak gitu Jadi kita masukin detail implementasinya tapi orang-orang gak perlu tahu ya orang yang pakai CL person ini gak perlu tahu dia cuman perlu tahu aja kalau misalkan dia ada properti cara ngambilnya kayak gini ya cara ngesetnya kayak gini nah ini kan sama kayak ngeset properti biasa ya Ini nah tapi ini pakai set ini juga kayak manggil properti biasa tapi ini pakai gather kayak gitu nah jadi ini materi setter dan gather di typ script eh Oop Oke kita lanjut ke next materinya Nah sekarang kita masuk di materi abstrak class ya jadi abstrak class adalah CL yang tidak bisa diinstansiasi langsung ya Jadi teman-teman enggak bisa nginstaniate nih dari eh animal ini Nah instanate ini kayak gini ya instan inst instansiasi jadi abstrak CL itu biasanya hanya digunakan sebagai template ya untuk kelas turunan jadi ini template aja gitu ya Jadi DO ext animal ya jadi animal ini adalah template aja untuk gitu ya jadi nanti kelas turunannya ya itu harus mengimplementasikan metod abstrak yang difinisikan di abstrak kelas nah jadi di sini ya kita akan bikinod abstak nya adalah MaxOne ya ini buukannya Nah nanti ini wajib Ya wajib ada di dalam doc karena doc sekarang ngektend si animal kayak gitu Nah itu adalah penggunaan dari abstrak kelas biasanya Nah jadi kelas turunannya yaitu doc ya ini harus mengimplementasikan ya mengimplementasikan metod abstrak yang didefinisikan di abstrak CL dari eh parent-nya atau animalnya jadi ini harus di ee implementen gitu ya harus diimplementasikan kayak gini contohnya nah kayak gitu Jadi ini materi abstrak CL Nah sekarang langsung aja ya kita cobain dia di Tex editor atau vs Code kita Nah sekarang kita udah di vs code-nya ya Jadi kita akan bahas di sini tentang abstrak class jadi kayak yang gua Jelaskan sebelumnya abstrak kelas adalah kelas yang tidak bisa diinstansiasi secara langsung ya jadi teman-teman enggak bisa bikin objek dari kelas tersebut gitu ya karena kelasnya abstrak nah terus gunanya untuk apa gunanya sebagai template aja untuk kelas-kelas turunannya Oke jadi langsung kita cobain ya pertama ini adalah set up Project kita ya teman-teman Eh gua harap sudahudah familiar ya dengan setup ini karena kita udah nyobain dia eh nge-set up-nya di modul pengenalan di awalnya ya di awal-awal tadi jadi kalau misalkan teman-teman Miss di sana balik lagi aja dia videonya di awal Oke jadi ini akan gua pencet comand b atau ctrol b ya kalau di Windows comand b kalau di Mac ya biar untuk nge-hide ini atau teman-teman juga bisa geser kayak gini juga bisa cuman gua biasanya pakai shortcut Oke jadi di sini kita cobain abstrak clasnya misal kita punya CL animal gitu ya CL animal dan di sini Kita akan punya eh method misalkan itu adalah make sound gitu ya make sound metodnya nah metod ini akan balikannya adalah void ya lnya kayak gitu Nah jadi di sini ini adalah metod teman-teman yaodnya kayak gini Nah di sini kita gak Pengin ya gak Pengin e jadi kelas animal ini kita tidak menggunakannya untuk instansiasi gitu ya jadi kita hanya gunainnya itu untuk e bikin E turunan ya turunannya nanti akanlnya ke Anim gitu ya jadi semua di dalam SI Anim itu harus ada di dalam kelas yang baru atau kel subnya Jadi kita gak Pengin ada misalkan bikin animal 1 sama dari new animal kita gak menggunakannya kayak gini nah ini kan kitaikin Instance ya inst dari si animalakukan instansas Nah kita gak bakal melakukan ini kita cuman menjadikan si ini ate aja gitu ya jadi kita pengin dia jadi template misalkan di sini Kita akan punya kel doc ya jadi k itu dog dog ini akan menjadi turunan dari si animal nah dan kita pengen karena dia jadi turunan dari animal ya dia harus ada metod ma-nya sendiri di sini Nah itu bisa kita capai dengan abstrak k jadi kita bikin abstrak di sini ya abstrak dan Dan ini juga abstrak kayak gitu Nah karena kita bikin abstrak di sini ini akan gua iniin ya jadi bentukannya kayak gini ya jadi karena kita bikin abstrak animal ya dan dog ini ngeextens ke animal artinya dia turunan dari animol dia harus punya abstrak method-nya ini jadi kita akan dapat problem nih non abstrct method doc ya di kelas doc ya does not implement inherited abstract member nah Ma gu ya Jadi kita harus meng e implementasikan si MaxOne ini mau tidak mau kayak gitu jadi di sini harus ada MaxOne jadi ini MaxOne ya dan tipenya harus sama kayak gini Nah misalkan di sini maxonnya konsol karena ini void ya kita engak ngurn jadi consol.log itu Misalkan bar gitu ya nah jadi do kita harus punya kayak gini nah ini adalah kegunaan dari e abstrak k jadi dia tidak digunakan untuk melakukan instansiasi ya Dan Dia Eh hanya digunakan sebagai template kayak gini jadi setiap kelas ya nanti misalkan ada cat gitu ya setiap kelas yang eh menjadi turunan dari si animal kita tadi dia harus punya metod Eh ini ada tulisan yang salah ya ini extens harus punya metod ma ya misalkan nanti akan ada metode lain gitu ya itu teman-teman bisa kayak gitu Jadi ini disebut sebagai abstrak class jadi di sini harus ada ya harus ada maxon ya Jadi tinggal bikin nih maxon Nah harus ada kayak gitu Jadi ini memastikan aja setiap kelas yang menjadi turunannya dia akan punya abstrak maxon ini kayak gitu itu adalah fungsi dari eh abstrak kass jadi dia sebagai template gitu ya kan kalau misalkan template ya ya bentukannya harus kayak gitu ya mau isinya nanti gimana ya isi isinya ya atau isi kodenya atau implementasinya gimana terserah Pokoknya templateennya harus ada gitu ya Nah kayak gitu jadi dia sebagai template Jadi kalau misalkan teman-teman instansiasi langsung ya kayak tadi ya misalkanimal 1 gitu ya itu sama dengan New dari animal nah ini akan merahakan problem karenaate inst of abst karena gak bisa diate instancenya ini gak boleh karena tujuannya hanya sebagai template ya sebagaiate sebagailate Yang mana nanti setiap abstrod harus di harus diimpl kayak gitu nah jadi ini materi tentang abstr Nah mungkin sekian ya materi ini kita lanjut ke next materinya nah Sekar kita Mas di Mater interf di typp yaah jadi dalam typesript itu sendiri ada namanya interface interface ini digunakan untuk mendefinisikan bentuk atau shape dari sebuah objek ya jadi interface mendeskripsikan properti dan tipe dari suatu objek nah serta ini bisa mencakup meod Ya nantinya eh dan dengan interface kita dapat memastikan bahwa objek kita itu memiliki struktur tertentu kayak gitu ya struktur yang tepatlah intinya nah jadi ini adalah kegunaan dari interface ya Nah sebelum kita masuk gimana cara membuat interface dan lain-lain ya teman-teman kalau misalkan teman-teman Perhatikan ya ini sebenarnya mirip dengan konsep tadi Eh kita bahas yang namanya type alies ya jadi type Ali kita bisa mendefinisikan type ya itu atau membuat tipe itu pada sesuatu-sesuatu yang kompleks misalnya kayak objek ini juga sama gitu ya sini gua bakal coba balik terlebih dahulu ke slide type alies kita mana dia type alies hm ini nah ini ya Jadi ini namanya type alies ya Nah ini kita menggunakan dia dalam objek juga ya ini type user ini cons user eh tipe datanya ke type ini ya baru nanti eh bentukannya Nah ini sebenarnya hampir mirip ya dengan type alies bahkan kalau misalkan kita lihat di documentation dari tab script-nya ya Ini adalah documentation dari tab script-nya nah ini gua highlight ya ini difference between type alies and interface Nah di sini dijelasin sama dia bahwa type aliies dan Interface are very similar gitu ya dia eh miriplah ya Mirip gitu ya dan di banyak kasus ya kamu bisa memilih antara eh menggunakan antara ini atau eh sor tas atau interace itu secara ya secara bebas gitu ya Nah karena saking miripnya Nah karena all feure on interf ya karena semua hampir semua fitur di interface available di typ atau di type nah ini The Key distin ya yang membedakannya itu kalaup itu can ya dan dia tidak bisaahkan ya sedangkan interface bisa ya jadi dia interface selalu extendable contohnya ya ini contoh pembuatan interface ya Nah ini eh walaupun kita belum eh belum masuk ya ke membuat interface cuma di sini Gua pengin jelasin terlebih dahulu gitu ya Eh interface sama type alies karena ini banyak banget dibat di dalam eh typesript ya banyak perdebatan antara tabe alies atau interface nih yang bakal dipakai kayak gitu Nah nanti akan gua jawab juga perdebatannya cuman di sini gua cuman bilang e perbedaan utama ya antara interface sama Tabs kalau interface kayak gini ya misalkan teman-eman bikin interface window ya interface window terus teman-teman bikin lagi interface window ini boleh kalau misalkan pakai interface jadi adding new f to existing interface inih nah ini boleh sedangkan gak boleh nanti akan bilang dupate ya miskan Tem tem bikin type window di sini dengan eh bentukannya di sini ada title gitu ya nanti type window TS nah ini enggak boleh bikin tye window lagi ini TS di sini nah ini Jadi akan ada error duplicate gitu ya sedangkan di interface itu boleh kayak gitu Jadi ini nanti akan ada dua Eh bentukannya dua tipe datanya jadi di dalam window akan ada title sama ada TS kayak gitu jadinya Jadi dia menggabungkan nah kayak gitu nah jadi ini perbedaan yang paling mencolok menurut gua ya selebihnya menurut Gua hampir sama tyab elies sama interface Oh ya satu lagi satu lagi kalau tab alies ya itu kalau misalkan teman-teman lihat ya di slide ini ya Nah di ini kan gua slide show deh nah kita bisa pakai tipe data primitif ya Nah ini tipe data primitif ya Nah ini primitif kalau eh interface itu cuman objek aja bentukan kayak gini aja kalau objek kalau interface kalau tab alas dia bisa kayak gini bisa yang primitif kayak gini ya string number ini bisa pakai typ gitu ya nah jadi sebenarnya banyak banget Dib pakai interface atau pakai yang namanya typ nanti akan kita bahas sekarang kita masuk dulu ya ke konsep dari interface tadi ya konsep dari interface tadi jadi ini gua cuman peng ngjelasin dikit ya memaparkanahedikit ke teman-eman ya sebelum kita Mas ke materi interfnya bahwa dia ya dengan e type ya walaupun ada sedikit perbedaan tadi yang sudah kita bahas kayak gitu Oke jadi eh kita lanjut ya ke interface ini fokus dulu ke interface nanti akan gua lihatin perbedaannya dari interface sama E tab alies terus kira-kira teman-teman pilih yang mana dan lain-lain nanti akan kita bahas Oke jadi sekarang kita masuk ke materi membuat interface Nah tadi teman-teman sudah sempatelihat sintaksnya sedikit ya Nah ini cara bikin interface ya sor ini Pennya mana Nah jadi cara bikin interface tinggal pakai keyword interface terus nama interface-nya contohnya user di sini terus kurung kolawar eh Baru Entar namanya di sini interface-interface-nya Sorry eh tipe data yang pengin teman-teman masukin misalkan name string ya E number is admin bulean ya Nah kayak gini tapi ingat ya interface tidak bisa ee pakai tipe data primitif nah kayak misalkan Kalau misalkan type ya type kan Misalkan teman-teman type eh apa ya Eh type status gitu ya status gitu ya kayak tadi itu kan bisa di sini eh sama dengan misalkan dia dari string eh atau number gitu ya number ini boleh kalau misalkan pakai type nah tapi kalau interface enggak boleh n kayak gitu jadi ty itu boleh kayak gini boleh pakai kurung kur awal baru masukin nanti ya buknya ya ke obj objek git-gitu ya bisa sedangkan interf itu tidak boleh jadi dia emang khusus untuk tipe data objek gu ya nah jadi ini cara bikin sebuah interface jadi nanti objek teman-eman ya misalkan di user ya user ini bnya user ya Dan ini 25 is admin false gitu ya jadi dia menerapkan semua yang sudah kita tentukan di sini strukturnya kayak gitu karena di sini kita bilang user 1 tipenya adalah eh dari interface eh user kita kayak gitu Nah langsung aja kita cobain ini di eh text editor atau vs Code kita Nah sekarang langsung aja ya kita cobain pembuatan dari interface ya Nah di sini gua sebelumnya sudah nge-set up project ini ya ya Jadi kalau teman-teman Miss di sini teman-teman bisa ulang lagi ke video awal kita di mana kita nge-set up projectnya ya Jadi intinya di sini gua udah bikin setupan projectnya dan file-nya eh file tab script semuanya akan kita masukkan di src ini ya nanti kita akan running dia menggunakan TSC dsw ya Dan ini sudah kita atur di tsconfig.json kita sehingga kita cuman eh perlu nge-watch-nya aja gitu ya jadi kita akan nge-watch semua file tab script di dalam src itu intinya nah terus kita juga Eh ada index.html ini sudah kita kaitkan dengan main.js ya Nah main.js merupakan kompilasi dari main.js ini ya danah di sini kita udah running dia dengan menggunakan live server dan kita buka dia di browsernya ini nah ini kita juga buka konsolnya ya artinya ini developer tools konsolnya jadi teman-teman bisa klik terus inspect ya nanti bisa ke konsolnya atau conttrl shift e kalau misalkan Eh shortcut-nya kalau di Windows kalau di eh Mac itu comand option e kayak gitu ya Oke jadi langsung aja ini kita running terlebih dahulu dan dia akan nge-watch file kita ya oke dan ini gua akan hide dia kalau di Windows pencetnya comand B ya eh ctrol B kalau di Mac itu comand B Oke jadi langsung aja kita bikin sebuah interface ya jadi misalkan kita akan bikin sebuah interface Sorry interface namanya interface kita adalah user ya terus kita kurung kurawal kayak gini nah ini bentukan cara pembuatan interface kayak gitu ya terus teman-teman masukkan properti-properti yang akan diterapkan di interface ini misalkan kita ada property name itu tipenya string gitu ya terus kita ada properti Edge tipenya number gitu ya number terus kita ada properti is admin itu bulean Nah kayak gini jadi nanti setiap eh objek yang mengimplementasikan interface user kita ini dia wajib memiliki name sama is admin gitu jadi di sini Misalkan kita punya objek ya itu user sat ya dia akan mereferensikan ke interface kita ya atauimplement interface user kita ini Nah jadi di sini kita akan sama dengan kurung buka kayak gitu ya Nah di sini kita akan dapat problem ya kalau misalkan teman-teman enggak Eh masukin ya mengimplement name at sama is admin ini harus ada karena kalau enggak kita akan dapat problem katanya Ya ini e yang kita bikin ini ya ini missing flowing properties from type user ya itu name sama is admin jadi harus ada name di sini name-nya Misalkan eh jondo ya dengan ranggo terus nah terus akan ada age ya -nya mungkin e tipenya number ya Ini du du gitu ya terus is admin gitu ya Nah ini eh is admin true ya Nah kayak gini Jadi ini adalah penggunaan dari interface kayak gitu tuh jadi kita sudah berhasil membuat interface ini ya kita berhasil membuat interface yang menstruktur dari objek kita ini nah kayak gitu nah jadi ini bentukan dan cara pembuatan interface Nah jadi waktu teman-teman console.log user ya console.log user 1 ya Nah ini akan keluar nih ya name eh dan lain-lainnya Nah di sini eh yang unik ya kita lihat di main.js kita ya ini adalah kompilasi kodenya Nah di sini teman-teman Perhatikan ya teman-teman perhatikan bahwasanya interface tadi tidak ada ya di main.js kita nah ini akan gua gedein mungkin ya jadi kita bisa ngelihat ya kiri kanan Nah ini nah ini kan file javascript kita ya Eh file tab script kita ini file javascript yang dikompilasi dari file tabript ini ya teman-teman Perhatikan ya bahwa kita gak ada Interface di sini nih ggak ada nih Nah jadi emang interface ini ya semacam pembantu aja diript jadi dia tidak dip ke dalam kode kita ini kode javascripnya kayak gitu Nah itu catatan aja ya sebenarnya dari gua bahwa interf itu sebenarnya dia tidak dikompilasi gitu ya ke dalam file javascripah kayak gu nahungk ini yaentan ke next materinya Oke sekarang kita masuk di materi properti opsional di interface ya jadi interface itu juga mendukung yang namanya properti opsional ya yang menggunakan tanda tanya jadi eh sama ya Sama kayak sebelum-sebelumnya ya Jadi kita pakai tanda tanya baru nanti titik dua di sini ya baru tipe datanya Nah artinya ya artinya kalau misalkan kita bikin kayak gini ya ini kan ada name to string itu number is admin opsional dan tipenya bulean ya Nah jadi di sini is admin boleh ada boleh enggak jadi waktu teman-teman bikin user misalkan ya ada user du gitu ya jadi di sini teman-teman Boleh masukin name e wajib ya masukin name boleh masuk wajib masukin dan boleh atau juga boleh juga opsional intinya admin Opal jadi boleh tem-eman isi boleh tidak gitu ya Nah jadi ini disebut sebagai properti opsional di interface Nah langsung aja kita cobain dia di text editor atau vs Code kita Nah sekarang langsung aja ya kita cobain properti opsional tadi Nah Jadi intinya ya properti opsional ya kita menentukan ya di dalam interface ini kan semua propertinya itu wajib diimplementen oleh eh objek yang mengimplementasikan interface itu sendiri kayak gitu ya Nah itu wajib jadi name sama is admin itu wajib diimplement kayak gitu karena kita ng-refer ke interface ini Nah kan kadang ya kadang kita pengin ada properti yang mungkin menurut kita ya Eh itu enggak perlu diimplementen tapi boleh diimplementen gitu ya jadi kayak opsional aja gitu ya kayak misalkan is admin gitu ya is admin ini ya opsional ya jadi eh user itu sendiri boleh ngasih tahu dirinya admin atau enggak itu opsional gitu ya jadi caranya di sini teman-teman Kasih tanda tanya di sini nah kayak gini ya kalau misalkan is admin ini gua komen ya atau gua hilangkan ya sekarang kita save nah ini gak ada problems ya ini gak ada problems nih nah Kayak gitu tapi kalau ya yang kita komen ya ini akan problem ya karena property is missing gitu ya karena ini require nah jadi ini harus diisi nah kecuali is admin nah is admin ini sudah menjadi properti opsional karena kita sudah kasih tanda tanya di sini nah jadi kayak gitu itu jadi di dalam struktur sebuah objek kadang Emang ada yaang ada eh kita pengin kasih tahu ke dia kalau ini tuh opsional gitu ya Jadi boleh ada boleh enggak gitu ya Jadi kalau misalkan kita bikin E user 2 ya di sini gua akan bikin user 2 dan namanya akan gua ganti jadi e bu Diman gitu ya umur 21 Nah di sini kita kasih is admin itu boleh Nah jadi boleh dikasih is admin boleh juga tidak kayak gitu ya contoh yang di sini nah jadi ini tentang properti opsional di interface Nah sekarang kita masuk di materi metod di dalam interface ya Jadi selain properti ya interface juga bisa mendefinisikan metod nah kayak gitu misal teman-teman ada user tadi ya interface user ada name is admin gitu ya Nah ini kan tig ya Nah teman-teman pengen nambahinodod g gitu ya jadi eh di dalam user nanti harus ada function atau method Grid ya dan dia itu balikannya string kayak gini nah itu wajib ya jadi di sini teman-teman eh punya eh user 3 ya misalkan ya user 3 ini dari Si user ini jadi akan ada name Ed ya is admin optional ya ini boleh ada boleh enggak Eh dan di sini ada Grid gitu ya ini adalah method-nya nah ini di return-nya juga string kayak gitu nah Nah jadi ini penggunaan meod di dalam interface kayak gitu Nah langsung aja kita cobain dia di vs Code atau teks editor kita Nah sekarang kita udah di vs Code kita ya langsung aja kita cobain method tadi ya Jadi selain property ya ini kan properti ya Kita juga bisa mendefinisikan method di dalam interface kita nah method itu dia adalah function di dalam objek ya Jadi kalau misalkan teman-teman pengin masukin function di dalam objek itu bisa disebut method ya jadi di dalam eh sini kita pengin nanti akan ada meod ya waktu objeknya mengimplementen si user ini kayak gitu jadi di sini misal kita akan ada meod GD ya nah jadi cara tulis metodnya kayak gini Nah di sini kita akan dapat merah ya di awal kenapa atau problem ya katanya ya E Which type annotation ya jadi sekarang kan tipenya akan jadi any Nah jadi Eh ini akan implicitly has and any return tabe ya Jadi kita jelasin di sini tab-nya kita mau apa eh Tab return-nya jadi di sini gua bakal return dia sebagai string kayak gitu ya Dan ini merahnya hilang Nah sekarang kita akan dapat merah di user 1 user 2 ya kenapa ini akan gua hapus dulu us duanya Kenapa merah karena method ini harus diimplementasikan ya Nah jadi di sini kita harus mengimplementasikan si grid-nya kayak gitu ya karena kita sudah tulis dia di dalam dalam interface kita Nah di sini kita wajib ng-return string ya return string misalkan di sini gua akan return Hello there ya nah nah jadi gred Mer return Hello there ya ini method-nya jadi kita berhasil membuat metode di dalam SI interface dan kita juga berhasil mengimplementasikannya kayak gitu Jadi waktu kita console.log ya console.log si eh user 1 D Grid ya jangan lupa karena bentukannya metod teman-teman harus panggil ya kayak gini kurung buka kurung tutup ya ini kita save maka akan keluar Hello kayak gitu nah jadi ini adalah metodnya kita berhasil bikin metodennya dan kita berhasil juga mendefinisikannya di dalam SI user ini nah jadi ini materi tentang meod di dalam interface ya Oke kita lanjut ya ke next materinya Nah selanjutnya kita masuk di materi menggabungkan interface atau interface merging ya nah jadi typesript itu memungkinkan penggabungan interface dengan nama yang sama kayak gitu ya jadi properti dari semua deklarasi interface yang memiliki nama sama akan digabungkan nah misal teman-teman punya pertama ada interface person ya Di mana ada property name gitu ya nanti teman-teman bikin lagi interface-nya person juga bikin lagi interface-nya person juga di mana dia ada berarti ini digabungkan Ya intinya Jadi intinya nanti properti dari si e person itu akan ada name ya name sama ya Nah nameennya tipenya ini ya string ya string gitu ya sama nya tipenya number ya number kayak gitu nah jadinya ini digabungkan ya Jadi kalau misalkan teman-teman bikin person ya di sini dia tipenya ke person artinya dia harus punya dua ini ya karena ini bukan properti opsional ya jadi artinya dia harus punya property name sama property E ini ya jadi wajib gitu ya kayak gitu jadi karena kita udah ngmerge ngmerging dari interface-nya nah kayak gitu ini disebut sebagai interface merging ya Nah Oke jadi daripada lama-lama langsung aja ya kita cobain interface merging ini di dalam vs Code atau text editor kita Nah sekarang kita udah di vs Code kita ya langsung aja kita kerjain interface merging tadi jadi tab script itu memungkinkan penggabungan interface ya Jadi kalau misalkan ada interface nih namanya sama gitu ya nanti e dia itu akan digabungkan kayak gitu Misalkan ya sekarang kan interface kita ini ada user ya kita pengen bikin Eh ng-merge ya interface user ini jadi kita akan bikin interface baru dengan nama yang sama kayak gitu ya nah Nah jadi ini dibolehkan di Tab script Nah jadi misalkan kita pengin ada properti name H is admin apa lagi ya mm mungkin di sini adalah status mungkin ya status dan dia adalah bulean bulean kayak gitu ya bulean oke nah Ini boleh ya ini boleh di typ script ya jadi eh nanti si user ini ya user ini waktu teman-teman lihat ya Di sini dia itu harus punya yang namanya ee apa namanya name harus ada terus ada is admin Grid sama eh status gitu ya maka di sini user satu sekarang akan error kenapa karena properti status ya is missing ya ini enggak ada nah jadi dia harus mengimplemen si status juga kecuali kita bikin di sini opsional kayak gitu nah jadi ini akan digabungkan ya sekarang interface user kita Nah jadi ini dengan ini digabungkan jadi user itu sekarang dia harusnya punya name punya admin sama yanganya status k gu Nah jadi ini bisa diseb sebagai interingah jadi ini tidak eror ya kalau di iniak erah jadi di ini tidak erorah miskan Pak di sini gua cuman mention sedikit aja jadi ini boleh di dalam eh penggunaan Interface di Tab script ya jadi interface dengan nama yang sama propertinya ini akan digabungkan kayak gitu nah kayak gitu ya jadi ini materi tentang eh interface merging atau menggabungkan interface kita lanjut ya ke next materinya Nah sekarang kita masuk di materi pewarisan di dalam interface ya atau bisa disebut sebagai inheritance gitu ya nah jadi interface itu dapat mewarisi dari interface lain menggunakan kata kunci extens ya mungkin teman-teman familiar ya karena sebelum ini kita belajar tentang kelas ya Nah karena kita belajar tentang kelas kelas itu juga ada yang namanya inheritance ya atau nginherit gitu ya mewarisi Nah jadi interface juga ada pewarisan atau inheritance gitu ya misalkan teman-teman ada eh interface person gitu ya Di mana ada property name sama ada property Age nanti teman-teman akan ada interface employee ya Nah dan Interface employee ini ya dia itu hampir sama dengan interface person nanti dia akan ada name juga akan ada e juga ya cuman dia ditambah mungkin dengan employee id di sini nah jadi daripada kita bikin ulang ya ini ya kita warisi aja dia warisi aja eh employ ini dari Si person Nah karena kita mewarisi artinya nanti ya di sini itu ada name sama ada juga gitu ya Nah karena ini mewarisi extens Nah jadi waktu teman-teman bikin eh variabel ya Eh Misalkan m ya atau objectj m dia itu eh tipe datanya employee ini ya employee ini artinya dia harus ada name harus ada harus ada employee ID kayak gitu jadi karena si eh employee akan mewarisi semua properti dari person nah properti person kan ada name sama Edge ya Dan ini bukan opsional ya ini wajib gitu ya ini wajib ini juga wajib dari sini kayak gitu Jadi ini disebut sebagai pewarisan interface atau inheritance di dalam Suatu interface kayak gitu Nah langsung aja kita cobain dia di vs Code atau teks editor kita Nah sekarang kita ah di vs code-nya lagi atau teks editornya lagi langsung aja kita cobain ya tadi yang namanya pewarisan di dalam interface atau bisa disebut sebagai inheritance gitu ya Nah ini kan kode sebelumnya ya kode sebelumnya mungkin gua akan komen aja ya jadi gua akan ctrol A dan di sini gua akan eh ctrol/ash ya untuk menjadikan semuanya komen ya kalau teman-teman pakai mactrol itu sama dengan sama eh comand kayak gitu ya kalau teman-teman pakai pakai Mac Oke jadi kita akan membahas tentang pewarisan di dalam interface ya jadi interface itu dapat mewarisi dari interface lain ya dengan kata kunci extens jadi dia hampir sama sebenarnya dengan Eh kalau misalkan sebelumnya kita belajar tentang Oop ya Nah itu sama kayak extens di Oop Nah itu Mirip gitu ya contoh di sini kita punya interface itu person gitu ya person dan di ini properti dari persennya adalah name dengan tipe data string mungkin ya Terus eh seperti biasa ya ada umur ya itu tipe datanya number gitu ya Nah misalkan di bawah ini kita akan punya interface baru ya interface baru itu employee Nah kita pengen si employee ini ya dia akan punya name juga ya dia akan punya e juga atau pokoknya hampir miriplah sama person nanti ya properti-propertinya Nah kenapa kita enggak mewarisi aja jadi di sini kita warisin aja nih pakai extens nah kita warisin aja dari si person nah kayak gitu Jadi sekarang si employee ini ya dia akan punya name sama juga karena dia mewarisi ya Nah terus di sini teman-teman tambahin aja hal yang spesifik dari employee yang tidak dipunya oleh person Misalkan ya misalkan di sini employee ID gitu ya employ ID kan kayak gitu nah ini gua akan kasih tipenya number ya Nah jadi waktu teman-teman pakai si interface employee ini ya dia akan ada property name ge sama employee ID yang harus diimplementen kayak gitu contoh kita akan bikin cons eh employee 1 gitu ya Ini dari sori ini kita eh type-nya akan ng-refer ke si interface employee kita Nah jadi waktu ini kita sama dengan kita jadi eh bikin objeknya ya maka di sini akan terdapat problemnya adalah Eh ini ya ini enggak Nah ini teman-teman Lihat ya ini type yang ini ya type is missing ya the following properties from the employe kayak employee ID name sama jadi di sini teman-teman harus punya name ya mungkin name-nya kita kasih di sini adalaho ya terus oke terus di sini dia harus punya Age juga tadi dengan e bentukan number mungkin jondo umurnya 32 mungkin ya terus di sini employee ID itu adalah 10098 kayak gitu ya nah jadi ini kayak gini nih sekarang nih Nah teman-teman bisa Perhatikan ya tadi si employee itu dia punya property name sama juga ya waktu kita impl dari interface employee ini nah jadi ini ut sebagai pewarisan ya atau bahasa kerennya inheritance gitu ya jadi dia nginherit ke eh properti yang diwarisi kayak gitu nah biasanya kalau misalkan di dalam kelas ya ini bisa disebut super class ini bisa disebut subclass Ya nah tapi kalau misalkan dalam interface kadang itu juga bisa disebut sebagai super interface atau parent interface ini bisa disebut sebagai eh sub interface atau Child interface nah kayak gitu nah jadi ini adalah materi tentang pewarisan eh di dalam interface ya Nah kita lanjut ke next materinya Nah sekarang kita masuk di materi index Signature nah index Signature ini ya memungkinkan pembuatan objek itu memiliki properti yang lebih dinamis kayak gitu ya misalkan kita punya student score ya ini ada student score Nah di sini teman-teman bisa tentuin ya key-nya ini ya kan dia e bentukan objek itu kan key sama value ya key-nya ini ee tipenya itu string apa number gitu ya Nah misalkan di sini stud name ya kita punya stud name itu dia eh bentukannya string jadi nanti eh waktu kita bikin objek ya dengan interface student score ini ya maka di sini key-nya akan bentukannya elist ya terus Bob ya Charlie ya Nah ini kan string ya Nah sedangkan nanti ee e value-nya akan jadi number ya kayak gitu Jadi ini bisa disebut sebagai index Signature contoh lainnya di sini kita punya eh student scornya itu by ID ya jadi berdasarkan ID jadi di sini ini kan student name ya ini student ID nah ini tipenya number sekarang Nah nanti dia akan punya value number Jadi waktu kita bikin scor di sini ya dengan eh ngrefer ke interface student score by ID ya Nah yang ini jadi di sini teman-teman bisa lihat ya ini key-nya ya key-nya Ini adalah number ya Nah kayak gitu nah jadi ini bisa disebut sebagai index Signature J ini memungkinkan pembuatan objek kita itu memiliki properti yang lebih dinamis gitu ya nah jadi langsung aja kita cobain dia di text editor atau vs Code kita Nah sekarang kita udah di vs code-nya lagi atau tek editornya lagi Ya Nah sekarang kita akan bahas tadi yang namanya Ind Signature ya index Signature jadi index Signature ini memungkinkan pembuatan objek yang memiliki properti yang lebih dinamis kayak gitu ya jadi teman-teman bisa nambahin aja propertinya Terserah teman-teman asalkan rulesnya sesuai ya dengan yang udah teman-teman terapkan di interface-ya Contohnya kayak gini ya kita akan bikin interface itu mungkin nama interface-nya adalah student score ya Eh student score by gitu ya Nah di dalam sini kita akan bilang ke dia setiap properti kita ya key-nya itu harus string dan di sini kita akan bilang ke dia lagi Eh tipenya juga harus string ya atau value-nya juga harus string jadi setiap objek nanti yang ngeimplementen interface ini ya nanti dia harus memiliki key-nya string dan value-nya juga string kayak gitu contoh di sini Kita akan punya k e mungkin Apa ya nama objeknya student score aja ya stud score ini kan student score by name ya sekarang student score aja ya jadi studen score jadi kita akanfer ke tipe data stud score by name dan di sini kita akan bilang ke dia ini kita sama dengan lupa ya sama oke nah sekarang indek objek gak yaak miskan Pak sign iniah ya kalau misalkan teman-teman pengin menambahkan properti dia harus bentukannya string ya di sini Kenya string misalkan di sini adalah Budi ya Budi dia punya tipe data itu adalah e sor punya value atau skornya 90 gitu ya Nah kayak gini Oh I sor ini harusnya number ya number kayak gitu nah Jadi intinya kayak gini jadi setiaperti teman-an bentuk harus kayak gini nah jadi kan terserah teman-teman aja nambahinnya berapa ya makanya disebut sebagai ee membuat objek yang memiliki properti dinamis Nah jadi kan ini dinamis banget ya teman-teman nambahin nama propertinya terserah teman-teman value propertinya terserah teman-teman gitu ya Eh terus e banyaknya juga terserah teman-teman makanya disebut sebagai eh pembuatan objek yang memiliki properti dinamis itu didukung oleh index Signature ya karena Emang dinamis banget Nah misalkan di sini ada Yanto ya Yanto itu eh berapa ya E nilai Yanto 78 ya kayak gitu nah ini kan dinamis banget ya asalkan Ini tipenya harus string ya ini string gitu Ya nah tapi ya tapi di sini kalau misalkan teman-teman bikin number pun ya itu gak ada masalah kenapa karena by default dari tabript itu ya dia bilang e kalau misal akan dibikin kayak gini ya dia itu akan ngconvert ini sendiri ya ini akan dijadiin string sama dia sendiri kayak gitu ya jadi kayak gitu sebenarnya kecuali teman-teman bikin di sini number ya maka ini akan error ya katanya object literal May only specify non properties ya and Bu does not Exist In eh type gitu ya jadi Budi ini enggak masuk nih ke dalam sini Jadi teman-teman harus masukin number misalkan 100 kayak tadi ya Yanto juga gitu Yanto akan gua ganti jadi 1002 gitu ya Nah nanti ini bukan student score by name ya mungkin studen score by ID lagi ya kalau kayak gini ya Nah kayak gitu nah jadi ini eh yang disebut sebagai index Signature ya oke Nah jadi gini Nah tadi kan gue jelasin ya kenapa kalau misalkan dari string ini 1001 itu bisa kenapa ya walaupun ini number ya ya by default dia dia akanbilang kalau misalkan ini string ya kayak gitu jadi dia akan eh ngonvert sendiri kayak gitu ya Jadi dia sama kayak gini dia akan melakukan kayak gini sendiri kayak gitu nah jadi itu sebenarnya yang terjadi gitu ya nah nah jadi ini materi tentang index Signature di mana kita bisa membuat objek yang memilikierti dinamis ya dengan Ind sign kayaku nah mungk aja materinya kita lanjut ke next materi masih mungkin ya masih tentang interface Nah sekarang kita masuk di materi interface untuk function types Nah jadi interface ya itu juga bisa digunakan untuk mendefinisikan tipe pada function kayak gitu jadi misalkan kita punya interface add ya nanti akan kita terapkan ya Add ini ke dalam sebuah function misalkan ya Jadi nanti teman-teman bikinnya kayak gini nah bikin kurung kurawal kayak gini baru entar dalam kurung ya ini adalah parameter yang akan diterima oleh function yang ngimplemen si interface ini ya Terus eh ini juga parameternya terus ini adalah return-nya Nah di sini kita pakai e row function ya Jadi nanti ada cons add ya Jadi ada function add dia mengambil tipe dari si interface ini ya nah Nah nanti di dalamnya akan ada ab ab kayak gitu ya ini AB ini adalah Eh parameternya parameternya ini nah yang ini sedangkan return-nya adalah number ya Nah ini kan return-nya number ya ini cuman disingkat aja ya Karena dia satu blok kode jadi eh block return sama kurung kur awalnya enggak ada kayak gitu jadi interface dalam eh function types jadi kita bisa menggunakan interface untuk mendefinisikan tipe di dalam function ya gitu Nah langsung aja kita cobain dia di text editor atau vs Code kita Nah sekarang kita udah balik lagi di vs Code atau text editor kita ya jadi kita langsung aja cobain interface untuk function types tadi jadi interface itu juga bisa digunakan untuk mendefinisikan tipe function contohnya di sini Kita akan punya interface untuk function add nanti ya jadi di sini gua akan kasih add-nya gede nama interface-nya dan di dalamnya kita akan bilang ke dia kalau misalkan kita melakukannya ini untuk function ya jadi nanti kita akan punya parameter a di dalam function-nya dan parameter B di dalam function-nya terus kita akan ngr return number gitu ya a-nya ini number b-nya number dan return-nya juga number kayak gitu nah jadi cara ngeimplementen ini gimana Jadi biasanya ini digunakan untuk rrow function ya jadi misalkan kan kita punya row function add ya Ini a-nya kecil ya dan kita akan ngrefer ke interface add kita jadi di sini kita ak refer ke e type add interface-nya ya lalu di dalamnya teman-teman tinggal pakai a b itu eh return ya return eh sori kurung kawal return a ee karena dia add ya a + b gitu ya Nah kayak gini nah jadi waktu kita conso.log ya conso.log si add-nya itu Misalkan [Musik] 2,7 ya harusnya ini akan jadi 9 dan kita enggak dapat problem apapun ya kalau misalkan teman-teman lihat ya di sini eh ini adalah number b adalah number ya dan return-nya juga number gitu ya ini menyesuaikan dengan interface kita Nah karena ini cuman satu blok kode Ya seperti biasa yang kayak gua Jelaskan sebelum-sebelumnya ini ini bisa dihapus kayak gitu Jadi tinggal a + b ya nah jadi ini penggunaan dari interface untuk function types ya Nah kayak gitu Nah mungkin ini materi tentang interface ya selanjutnya mungkin kita akan membahas tentang perbedaan eh type alies dengan interface Kapan digunakannya interface Kapan type alies dan lain-lain dan ini debet yang sangat panjang ya ini debat yang selalu diajukan oleh pengguna-pengguna typ script gitu ya Eh kayaknya interface sama type alias sama dan lain-lain makanya akan gua bahas gitu ya jadi langsung aja kita masuk ke section dibat-nya ya interface versus dari type alias Oke lanjut ke next materinya Nah sekarang kita masuk di materi interface versus type Ali Nah materi ini opsional ya Jadi teman-teman boleh lihatnya atau misalkan teman-teman skip juga boleh ya karena ini hanya perdebatan aja ya Jadi kalau misalkan teman-teman lihat di komunitas typesript ya ada yang ng-prefer kita pakai interface ada yang ngpr ng-prefer pakainya type alies kayak gitu ya nah jadi sebenarnya ini pun sudah dibahas di dalam dokumentasi dari tab script ya yang kayak yang gua Jelaskan sebelumnya di materi interface jadi ini udah dibahas Sebenarnya ya sama si eh dokumentasi tab script itu sendiri ya karena dia sangat-sangat mirip gitu ya dan di banyak kasus teman-teman bisa milih teman-teman pengin pakai interface atau teman-teman pengin pakai Tab alies kayak gitu Nah jadi di sini gua udah eh bikin semacam catatan ya catatan markdown ya markdown Eh versi gua eh interface versus type alas kayak gitu ya Oke jadi kita lihat dulu pertama kita lihat dulu ya bahas dulu Ini yang dari dokumentasi resmi dari tab script-nya ya jadi di sini ini akan gua gedein dikit ya mungkin nah 125 Okelah mana dia tadi interface nah ini difference between type alas and interface ya Ini udah kita bahas tadi gua pengin ulang lagi ya jadi di sini dibilang bahwa type alies dan Interface are very similar ya jadi dia hampir mirip banget gitu ya dan di banyak kasus kita bisa e pilih ya antara eh interface atau tab alies secara bebas gitu ya jadi and in many case you can choose between them freely gitu ya terus almost all feature of an interface are available in type ya Nah ini Ini kata kunci menurut gua ya Jadi hampir semua fitur di interface itu ada di type Al cuman perbedaannya ya perbedaannya di sini dibilang kalau misalkan eh sebuah eh ties ya itu enggak bisa eh canot beopen gitu ya to add new properties ya kalau itu bisa Contohnya kayak gini ya kalau misalkan kita punya interface window di sini ada title dan di sini kita bikin lagi interface window itu boleh jadi ini akan digabungin nanti propertinya sedangkan kalau type itu enggak boleh mungkin itu menurut gua yang kekurangan dari type ya tapi kadang ini juga bisa jadi kelebihan dari tab Al kayak gitu ya Oke sekarang kita bahas ya eh Tab Al sama interface Ini pertama yang pengin gua bilang kalau misalkan typ elies itu teman-teman bisa pakai type primitif ya jadi typ alies itu bisa type string eh ya kayak gitu bisa kalau tab jadi tab primitif bisa kayak string Union number Nah itu bisa jadi gak harus OB ya kalau interface bentukannya harus obj Kak gitu ya terus Dar perbedaan saks juga nahab pakai sama sedangkan interf enggak Oke untuk Lebi jelasnya di sini eh nanti teman-eman ada apa di deskripsi ada linknya nanti ya di sini ini adalah link repo kita ya dan ini adalah setiap modul Ya ini gua lengkap gua bikinin modulnya untuk teman-teman ya dari Modul 1 nanti ya sampai ke modul 24 ya pokoknya Tentang pembahasan kita tadi semuanya udah ada sama di sini gua selipkan ya ini interface versus tab elas nah teman-teman pilih branch yang ini nanti teman-teman lihat ya di sini ada eh interface versus stepelies.md ya ini markd file jadi teman-teman klik aja nah ini di sini gua bahas tentang debat penggunaan interface atau tab Ali ya jadi kayak yang gua Jelaskan sebelumnya ya eh Tab elies sama interface itu hampir sama bahkan di sini dibilang Eh kita bisa pilih ya antara keduanya ini secara bebas gitu ya karena dia hampir sama Jadi apa yang kita lakukan tadi ya di interface itu juga bisa kita lakukan di Tab alas contoh tadi kita bikin interface ya bentukannya kayak gini kita masukkan ke sebuah objectek user nah ini juga bisa tas juga bisa ya Nah kayak gitu tapi yang interface tidak bisa interface tidak bisa yang eh bentukan primitif ya bentukan primitif interface gak bisa ya kayak ini kan objek kan kalau t dia bisa string number dan lain-lain ya Nah ituies sudahah menang satu duluan ya jadi dia udah SOS duluan ya ini menurut pendapat gua ya jadiudah SOS duluan ya oke terus yang ini kedua-duanya bisa sama gitu ya properti opsional juga di interface pakai properti optionional tanda tanya ya ini bisa kalau di typ alias ini juga bisa nanti teman-teman lihat aja ya langsung ya di ininya deskripsinya jadi ini Eh gua khusus bikinnya eh khusus ya kalau misalkan enggak dibikin kayak gini langsung ya entar susah bahasnya ya karena gua berpikir teman-teman baru dalam dunia tab script gitu ya makanya gua bahasnya kayak gini kalau kita bikin E satu kode ini bikin lagi kodenya di bawah terus jalanin di vs COD eh runyam nanti jadinya Jadi lebih enak kayak gini harusnya Oke lanjut ya Eh terus metod di dalam interface nah ini juga bisa ya jadi teman-teman e kasih metod di dalam interface itu bisa ya tadi sudahah kita bahas dan di Tab alies pun juga bisa nah ini bentukannya nah Mirip kan Ya mirip sama Nah selanjutnya adalah interface merging ya jadi penggabungan interface Nah jadi kalau misalkan di ee apa namanya tuh menggunakan interface teman-teman kayak gini ya Eh interface terus ada name string interface person Edge number ya ini bisa kayak gitu ya Nah sedangkan kalau misalkan type alies ya type alies teman-teman akan bikin ini ya jadi type alies tidak mendukung merging ya bukung merging yang sama kayak gini nah itu enggak bisa jadi enggak bisa person terus bikin lagi person enggak bisa sebagai gantinya ya kita dapat Menggabungkan beberapa tipe menggunakan intersection types namanya di pakai yang namanya ini dan kayak gini nah jadi e misalkan kita ada typ-ya person name string ya ini bentukannya Edge number gitu ya kita pengen gabungin nih dua ini nahudah gabunginnya kayak gini kayak gitu nah gitu ya jadi di sini kurang ya ini lebih menguntungkan kalau interface cuman penggunaan E interf mering ini kadang juga ini ya kebanyakanelopereloper juga mengeluh ya kadang Kenapa karena misalkan nih misalkan teman-teman bikin interface person ya Terus misalkan teman-teman enggak sengaja gitu ya enggak sengaja bikin interface baru person Nah Enggak error kan Nah itu kan problem ya problem sebenarnya Nah makanya eh kebanyakan eh developer-developer yang bekerja dengan typesript itu kebanyakan lebih mendukung t alies ya karena Salah satu alasan ini jadi walaupun ini bisa ya menggunakan eh apa namanya eh interface itu bisa merging ya tapi kayak enggak cocok aja gitu ya kalau misalkan teman-teman udah bikin teman-teman enggak sadar gitu ya kan dalam Project itu biasanya skalanya gede gitu ya Nah teman-teman gak sadar gitu kalau misalkan interface person udah ada teman-teman bikin lagi nah kan aneh jadinya kita gak dapat error gitu ya sedangkan kalau misalkan di typ Alas teman-teman bakal dapat problem katanya nanti e typ-nya duplikat kayak gitu ya nah jadi ini menurut gua lebih bagus ya si tap alas cuman ya persepsi masing-masing ya sebenarnya Oke lanjut ya Eh itu pewarisan ya Nah pewarisan di interface itu kayak gini ya pakai extens ya Jadi hampir mirip-mirip kayak Oop lah kayak gitu ya tadi kan Ini udah kita bahas kalau di Tab Elias juga bisa tapi tadi pakai yang namanya e keyword ya Yang ini Nah ya pakai intersection types tadi jadi hampir sama kayak yang Nah jadi kita mauarisinya kayak gitu jadi misalkan di sini kita e punya person ya propertinya name sama ge di sini kita pengin bikin type baru employee ya kita ingin mewarisi dari ee si person ini Jadi tinggal person terus ee ini ya sintxs ini ini akan gua gedein dikit ya mungkin biar enak eh lagi mungkin udah ya Oke jadi pakai sintxs ini ya baru nanti Eh teman-teman masukin e properti lainnya kayak gitu ya Nah ini pakai Tab elies Nah jadi dia bisa juga ya bisa juga tapi itu pakai yang namanya intersection typesnya jadi ini untuk mewarisi properti dari eh type alies laine gitu ya terus ada index Signature ya index Signature Ini kalau misalkan pakai interface kita sudah cobain tadi ya kalau misalkan pakai Tab elas itu juga bisa kayak gitu ya sama aja sama aja nah sama aja ya bentukannya Ini nah sama ya nih sama nah lanjut itu adalah interface eh atau Tab alies untuk function types nah ini sama ya ini juga bisa teman-teman pakai di eh Tab Ali bahkan tab Ali itu bentukannya lebih agak mirip ya Mirip nih kayak function ya Nah karena mungkin ada sama dengan ya DII Nah kayak gini sedangkan interface bentukannya kayak gini nah t kayak gini nah ini sintaksnya teman-teman bisa lihat aja ya ngrefer aja ke github gua ini jadi aman lah ya oke terus nih nah ini reasonasonnya ya Ini alasan kenapa developer lebih memilih eh tabies daripada interface gitu ya Nah ini sebenarnya ini cocok kalau gua lebih cocok gitu ya pertama itu type alias itu bisa digunakan berbagai tipe ya Jadi bukan hanya objek nah misalnya teman-teman bisa pakai e digunakan untuk Union intersection primitive types ya function tuple dan banyak lagi nah terus dalam penggunaan intersection gitu ya tab alies mendukung intersection types ya yang memungkinkan penggabungan beberapa tipe menjadi satu gitu ya hal ini ee sebenarnya serupa dengan inheritance pada interface tetapi banyak developer merasa penggunaan intersection types itu lebih mudah dan lebih konsisten dengan tipe lainnya kayak gitu nah jadi kayak gabungin ya ini ada name sama person gabungin name sama edge-nya ya di type person kayak gitu ya [Musik] nah nah terus selanjutnya ini adalah kejelasan penghindaran penggabungan otomatis nah ini yang kayak gua bilang tadi ya jadi kayak banyak developer nih merasa bahwa fitur interface merging Ya itu bisa menimbulkan kebingungan gitu ya jadi tab alas itu tidak mendukung yang namanya merging secara otomatis enggak ada Jadi kalau misalkan tem-teman ada dua type alies dia akan bilang ini duplicate enggak boleh maka ada problem gitu ya jadi eh sehingga ini akan memberikan kontrol penuh kepada developer nah kayak gitu makanya banyak yang bilang ya kayak enggak suka aja gitu ya dengan eh fitur interface merging ya Makanya lebih banyak yang pakai Tab elas khususnya gua sendiri ya gua sendiri kadang eh kalau misalkan di companyya Emang e pakai interface Ya udah kita ikutin gitu ya tapi kalau enggak ada reasonnya dari companinnya Ya udah biasanya Gua lebih suka pakai Tab alies Oke selanjutnya konsistensi across types jadi dengan menggunakan tab alies ya ini untuk segala jenis tipe ya jadi developer dapat menjaga konsistensi dalam seluruh codbas terus nah ini alasan kenapa si interface ini ya sebenarnya itu masih direkomendasikan dalam situasi tertentu ya Nah itu pertama adalah inheritance yang natural ya jadi interface kan menyediakan inheritance yang murnni ya yang alamiah karena dia itu mirip banget sama paradigma Oop pakai extens gitu ya Nah itu salah satunya menurut gua ini yang e ya kalau misalkan teman-teman sering bekerja dengan OP ya pasti teman-teman lebih senang pakai extens ya daripada e simbol n tadi kayak gitu terus an ya Nah kadang-kadang emang ini alasan ya Terpaksa gua masukin ya walaupun Sebenarnya gua enggak terlalu suka interface merging karena ada beberapa yang bilang Eh katanya merging di interface itu memungkinkan eksistensi interface yang sama di berbagai tempat tanpa menyebabkan masalah jadi ya kadang Emang ada yang penginnya ya Ada interface merging gitu ya jadi enggak ada problem nanti Nah jadi ada yang kayak gitu juga tapi kalau gua sih ya ini sebenarnya ini personal pribadi teman-teman ya kalau gua enggak terlalu suka ya fitur interface merging walaupun ini salah satu bisa disebut sebagai kelebihan interface bisa disebut sebagai kekurangannya juga mungkin ya karena banyak juga yang enggak suka developer terus ada penggunaan pada library ya jadi banyak library besar nih Nah ini kayak gini Kayak react atau Express JS ya kalau misalkan teman-teman lihat eh kodenya ya itu mereka itu menggunakan interface untuk mendefinisikan tipe-tipe objek gitu ya nah jadi ini eh yang cenderung dipakai gitu ya Nah ini kesimpulan ya kesimpulan jadi pernyataan bahwa interface lebih cocok untuk objek yang kompleks ya itu sering dikaitkan dengan fitur inheritance dan merging yang memiliki yang hanya dimiliki oleh interface tapi sebenarnya ya tabies Eh itu Ini yang dari gua tahu ya yang gua tahu itup alies itu sering lebih disarankan ya karena dia lebih fleksibilitas ya dan kemampuannya itu sebenarnya lebih luas daripada interface kayak gitu Jadi ini rekomendasi praktisnya ya teman-teman bisa menggunakan interface jika mendefinisikan struktur objek yang bisa diekspansi Terus misalkan teman-teman pakai Tab alies untuk tipe lainnya kayak function Union tle eh atau misalkan teman-teman lebih suka eh pendekatan yang lebih fleksibel itu pilih tab alies kayak gitu jadi ini adalah debat yang sangat panjang di komunitasp ya jadi makanya gua bilang ini opsional aja karena Asumi gua tem- masihuajar gitu ya jadi ini Opal tapi inietuiagusahuk diketahu bahwa ada perdebatan interamaa atau tim interface Oke mungkin sekian ya untuk eh materi interface versus tab alas ini kita lanjut ya ke next materinya Nah sekarang kita masuk di materi generics di typesript ya Nah pertama apa itu generics ya Jadi bagi teman-teman yang baru selesai belajar javascript mungkin teman-teman enggak ngerti ya atau belum tahu tentang konsep dari generic jadi itu sendiri adalah suatu fitur di typescript Jadi bukan di javascript ya jadi fitur ini memungkinkan kita untuk membuat komponen kita bekerja dengan berbagai tipe data kayak gitu jadi komponen kita nanti bisa bekerja dengan berbagai tipe data Tetapi dia akan tetap menjaga tipe statis yang kuat jadi dia tetap stating typingnya tetap kuat ya kayak gitu nah jadi dengan generic kita dapat dapat menulis kode yang lebih fleksibel ya tentunya pasti reusable ya dan aman secara tipe tanpa kehilangan informasi tipe kayak gitu jadi generic ini dia sering digunakan di dalam function ya atau fungsi kel dan juga interface Nah jadi eh dia digunakan untuk memastikan semua tipe Kita itu tetap konsisten bahkan ketika nanti komponennya dipakai untuk berbagai tipe data kayak gitu ya jadi ini adalah konsep dari generik lalu apa sih sebenarnya manfaat eh dari generik Kenapa kita gunain generik gitu ya pertama dari konsistensi Tipe generik menjaga agar tipe tetap konsisten di seluruh aplikasi lalu dia juga fleksibel dan reusable ya jadi fungsi atau kelas dapat digunakan dengan tipe data yang berbeda tanpa mengorbankan keamanan tipe lalu dia juga memperkuat tipe statik ya atau statik typing-nya juga kuat karena tab script dapat memberikan lebih banyak bantuan tipe Ya selama pengembangan atau eh selama kita bekerja dengan generik kayak gitu Nah di sini kita langsung aja pertama bahas generik pada function ya jadi fungsi dengan generik memungkinkan fungsi kita ya bekerja dengan berbagai tipe data yang tetap aman ya Nah sesuai dengan fungsi dari generik tadi di awal yang kita bahas Oke ini gua akan turn on dulu ya pen-nya ya oke misalkan ya di sini kita akan ada function identity ya jadi cara bikin generic itu setelah nama function-nya ya kalau misalkan genererik pada fungsi setelah nama function-nya di sini teman-teman pakai kayak gini ya Terus eh simbolnya kayak gini nah untuk eh simbol atau huruf t ini ya ini hanya kayak holdolder aja ya teman-teman bisa ganti Sebenarnya ya Jadi bisa u ya tapi paling sering itu dipakainya t ya Kalau di awal Terus kalau misalkan generiknya ada dua bisa pakai u juga ya kayak gitu Jadi kita masukin di sini t-nya ya ini adalah generic tp kita ya jadi di sini ada satu tipenya tipe genericnya dan value-nya adalah ke si tipenya ini Nah nanti return-nya juga ke tipenya ya ini parameter ya parameter ini adalah return kita ya nah jadi nanti si tipe dari generic ini ya dia akan menyesuaikan waktu kita Panggil dari functionnya misalkan kita Panggil ya ini ya Manggilnya kan identity ya terus sebelum kita panggil kita tentuin dulu genericnya apa Nah ini kita tentuin ya genericnya string jadi karena genericnya string jadi parameternya di sini value-nya itu harus bertipe string ya Nah ini sesuai kan ya nanti returnnya juga juga akan string ya di sini nah jadi return value-nya juga string kayak gitu nah jadi teman-teman bisa masukin tipe apa aja Nah contohnya di sini kita akan masukin tipe number ya Nah otomatis kalau misalkan ini number kita akan masukin parameternya juga number kayak gitu ya nih number juga nanti returnnya juga akan number gitu ya nah jadi ini generic pada function Selain itu ya kalau misalkan nih misalkan teman-teman tidak eh apa namanya tidak eh kasih tahu ya Kasih tahu atau secara eksplisit teman-teman bilang kalau misalkan ini string atau number gitu ya kayak gini kan ini eksplisit ya Nah teman-teman juga bisa sebenarnya tidak secara eksplisit kayak gini ya panggil aja identity masukin ininya nanti si typ script itu sendiri ya Secara inference ya Kita kan sudah bahas sebelumnya bahwa tyab script bisa secara inference menentukan tipe datanya ya jadi di sini tab script nih yang secara INF bilang oh ini string gitu ya ya udah si t ini akan jadi string gitu ya jadi value ini akan jadi string ini akan jadi string kayak gitu nah jadi e typpt juga ngerti secara inference ya dia juga secara inference bisa menyimpulkan ya tipe datanya kayak gitu Ya nah tapi biasanya biasanya Emang kita tentuin secara eksplisit ya Nah ini akan banyak teman-teman Temukan pada penggunaan rect ya pada penggunaan itu banyak banget penggunaan generic ya kalau misalkan teman-teman react pakainya typ script ya sebenarnya yang front end lain juga banyak ya kayak anglar eh atau view juga ada tapi ya sering gua mention mungkin react ya karena eh arah atau cermin dari Framework front End Sekarang emang react banget kayaknya dan ya sangat populer gitu ya oke mungkin kita gua pengin bikin ee eh course atau tutorial react dengan typ script mungkin ya kalau misalkan teman-teman suka pengin tutorialnya Tolong dikomen ya Oke jadi kita lanjut ya ini generic pada function kita langsung Cobain aja ya dia di vs COD atau text editor kita Nah sekarang kita udah di TT editornya atau vs code-nya Nah jadi langsung aja kita cobain generic tadi ya dan di sini kita udah ng-set up projectnya ya kalau misalkan teman-teman Miss dalam set up project ini teman-teman bisa balik lagi di modul awal ya Di mana kita nge-set up Project untuk typesript-nya gitu ya jadi karena kita udah nge-set up projectnya di sini gua tinggal Eh ketik tsc-w ya Jadi ini untuk nge-watch semua file tab script yang ada di eh file Sorry folder src ya kayak gitu nanti dia akan dikompilasi ke eh js-nya dan di sini kita conectkan index.html dengan main.js ini ya Dan Dia kebuka di sini kayak gitulah intinya ya oke tadi kita bahas tentang generik ya Jadi kita juga akan cobain di sini generic pada function ya jadi function itu eh dengan generic ya itu memungkinkan nanti function kita bekerja dengan berbagai tipe data tapi dia tetap aman kayak gitu ya jadi kayak gitu konsepnya misalkan kita punya function di sini gua akan kasih functionnya adalah identity namanya Nah setelah nama function kita masukkan genericnya misalkan di sini eh kita akan kasih flash holdolder dia dengan sebutan T gitu ya jadi nanti waktu kita mau pakai ya kita akan ng-refer ke si t ini kayak gitu misalkan di sini kita akan dapatin parameter parameternya berupa value gitu ya value-nya tipe datanya dari t ini nah kayak gitu Jadi ini ee penggunaannya lalu selanjutnya kita juga akan eh ng yanya mungkin t juga ya Nah tipenya lalu baru kita jalanin e implementasinya ya nah jadi kayak gini bentukannya nah jadi ini adalah e function yang mau kita bikin Nah di sini gua akan dari sini mungkin apa ya valnya Nah kayak gini nah sekarang berarti kitaah berhasil bikin gener pada function genericnya ini FL holdernya T Ya ini satu tipe aja ya nah t-nya ini atau FL holdernya akan kita gunain langsung ya di sini nah jadi waktu di sini teman-teman Misalkan console.log ya teman-teman panggil si identity-nya ini atau function identity-nya teman-teman kasih tahu dulu nih ke dia kalau misalkan nanti e tipe dari generic kita yang satu atau t tadi itu adalah misalkan string gitu ya Nah karena ini string ya dan di sini kan ada parameter nih parameternya yang pengin teman-teman masukin itu juga harus string juga ya karena value-ya ngrefer ke t t ini didapatin dari generic string ini nah jadi ini Mungkin eh Hello there mungkin ya hell there gitu ya Nah dengan kayak gini Sekarang waktu kita save akan keluar di sini Hello there ya karena return value-nya di sini juga t ya Nah kayak gitu nah jadi kita sudahah berhasil ya bikin gener ya di function kalau misalkan teman-teman pengen e Kayaknya gua gak pengen ininya string Bang ya tipe generiknya ini kita pengnya number gitu yaudah bisa ganti ini jadi number gitu ya karena ini number maka di sini juga harus number ya karena sekarang valnya atau parameternya Ini tipenya akan jadi number jadi teman-eman masukin number misalkan0 gitu ya Nah sekarang akan 190 Ini tipenya number ya kita gak dapat problem Apun ya ini teman-teman bisa lihat nah kayak gitu atau teman-teman juga bisa nih e teman-teman Panggil functionnya ya Panggil functionnya misalkan conso.log identity ya cuman teman-teman Biarin aja si tab script yang mendeteksi tipenya sendiri jadi teman-teman gak pakai kayak tadi ya engak secara eksplisit bilang eh generiknya misalkan string number gak kayak gitu yaud dah bikin aja value-nya gitu ya misalkan value-nya di sini eh apa ya eh hello world mungkin ya Nah ini secara eh tidak langsung ya typ script akan kan sebelumnya kita bahas tentang type inference ya jadi TP script sendiri yang akan ngeinvert gitu ya yang akan ngeinference kalau misalkan ini adalah string gitu ya kayak gitu Nah jadi di sini akan keluar nih hello world kayak gitu nah dari yang teman-teman perhatikan ini sesuai ya dengan konsep generik di mana kita bisa bekerja dengan berbagai tipe data ya Nah jadinya kita bisa bekerja dengan berbagai tipe data nih di sini nah jadi ini sesuai dengan konsep generik Nah bukan hanya itu ya Kita juga bisa Sebenarnya ya bisa sebenarnya di sini ya ee teman-teman enggak hanya Eh pakai satu tipe ya ini kan satu tipe ya Bisa dua tipe misalkan t koma u gitu ya Nah bisa jadi ini ada dua tipe nih t u jadi di sini teman-teman waktu definisi ini jadinya ini string eh koma string gitu ya jadi masukinnya dua gitu ya Nah string gitu ya Nah jangan lupa karena teman-teman udah pakai di sini u ya gunain ya digunain si u-nya ini nah kayak gitu nah jadi nanti yang u ini adalah tipe kedua nya Nah biasanya juga bisa digunakan kayak gitu biasanya mungkin kalau misalkan di sini ada parameter lain ya parameter lain gitu ya mungkin di sini bukan value tapi apa ya Hm identity value name mungkin ya name gitu ya e value-nya ke u gitu ya kayak gitu nah jadi nanti akan kita return-nya value plus eh u mungkin eh sori plus name mungkin ya nah ee oke ya Ini pasti ada ee beberapa ini ya nanti ya ee ininya tapi Ya gitulah pokoknya Jadi teman-teman bisa dua parameter ya dua bukan dua parameter dua tipe kayak gitu Jadi teman-teman bisa nambahin dua tipe kayak gini nah jadi ini materi tentang ee generik ya Nah secara dasarnya kayak gini ya jadi Eh ini tentang generik pada function ini pada function Oke gua harap teman-teman paham ya tentang generic pada function ini simpelnya nanti penggunaan lebih kompleksnya pasti ada ya pasti ada eh dan teman-teman juga pasti akan sering ya lihat generic ini apalagi kalau misalkan teman-teman bekerja dengan typ script gitu ya contohnya aja kalau misalkan react pakai typesript ketemunya pasti juga banyak generik gitu ya Eh view juga mular juga gitu ya Nah makanya eh materi tentang generik itu materi yang sebenarnya cukup penting ya cukup penting dalam ee pembelajaran tab script kayak gitu Oke jadi ini tentang ee function atau generic pada function ya kita lanjut ke next materinya Nah sekarang kita masuk di materi generic pada clelas ya Jadi kita juga bisa menggunakan generics pada kelas ya Jadi ini nanti akan membuat kelas kita bisa menangani berbagai tipe data gitu ya Nah misal ya ya misal kita punya box ya nih CL box sama kayak function tadi ya jadi setelah nama dari K kita akan e bikin genericnya ya dengan sintaks kayak gini nah kalau misalkan teman-teman ada dua generic bisa masukin koma u mungkin ya Nah kayak gini ya t ini hanya flash holder aja ya tapi emang biasa kalau misalkan cuman ada satu tipe itu emang digunain t ya kalau misalkan ada dua tipe itu ada u gitu ya Nah ini cuman holder aja jadi teman-teman bisa ganti namanya juga Oke jadi di sini genericnya bentukannya t ya jadi konten akan bertipe t ya dan di sini cononstructor kita akan nerima parameter eh waktu di instansiasi ya Ini juga T gitu ya terus dis. content jadi content dan di sini t juga dipakai di method ya Di mana dia akan merreturn eh dengan tipe data t kayak gitu jadi di sini waktu teman-teman pakai kelasnya ini kan bok namanya ya jadi teman-teman akan menggunakan box misalkan di sini teman-teman pengin genericnya ini ya yang satu ini yang t ini e tipenya number jadi masukin aja di sini box masukin bentukannya kayak gini ya ini baru tulis number gitu ya number baru nanti masukin value-nya atau eh apa namanya eh untuk instansiasi kita gitu ya Nah ini kontennya nih 1 2 3 baru entar masuk 1 2 3 Kayak gitu nah jadi ini kita menggunakan box dengan tipe number kalau misalkan dengan tipe string ya bikin ya ini string Ya udah entar teman-teman masukin juga jangan lupa e konten ini akan bertipe string ya jadinya Jadi ini harus string kayak gini ya jadi Hello kan string kan gitu Jadi waktu teman-teman console.lock ini console.log-nya Hello nah Jadi kesimpulannya di sini ya Atau singkatnya di sini pada kelas box kita menggunakan t ya untuk menangani tipe yang berbeda saat membuat Instance class ya nah ini membuat Instance yang ini pakai tipe number membuat Instance yang ini pakai tipe string kayak gitu Jadi ini adalah contoh penggunaan generic pada kelas ya Nah langsung aja kita cobain dia di Tex editor atau vs Code kita Nah sekarang kita udah di vs Code atau text editornya ya langsung aja kita cobain generic pada kelas ya Nah ini akan gua komen terlebih dahulu ya yang generic pada function ya Nah misalkan di sini kita akan bikin sebuah kelas ya Jadi pakai kelas keyword ya dan di dalamnya mungkin nama kelasnya adalah box gitu ya dan di sini Kita akan punya gener kita kasih flash holdernya adalah T ya Nah di sini langsung aja kita bikin dari kelasnya mungkin di sini kita akan ada kstruor ya kstruor dan di dalamnya ini akan ada konten ya kita akan nerima konten gitu ya dan tipenya adalah T kayak gitu ya Nah di sini kita akan e pai initialization ya jadi gua akan public di sini aja jadi daripada kita eh contonten di sini dan ya dan gitu-gitu ya langsung aja di sini ya pakai short eh short hand initialization ya nih Sekalian teman-teman buat mengingat juga oke lalu di sini kita akan bilang ke dia kalau misalkan dis. content itu Equals dengan si content gitu ya Nah dengan kayak gini sekarang kelasnya ini udah e berhasil kita bikin ya e mungkin kita tambahin Di Sini di dalam kelasnya ini method mungkin ya untuk dapetin si kontennya ya get content gitu ya Nah ini eh kita bikin meodennya ini dan metodnya ini akan mengembalikan atau ng return value e generic kita tadi CL folder t-nya Nah di sini berarti kita akan return content kayak gitu ya nah jadi ini udah sesuai ya nah jadi sekarang kita bisa e bikin nih bikin Instance ya dari si kelas ini atau bikin objek dari kelas Oke sekarang kita bikin instance-nya mungkin namanya apa ya number box mungkin ya Jadi mungkin let number eh box gitu ya dari ini new dari si box kita tadi Nah sekarang kita masukin ya E tipe dari generic yang holdoldernya t ini jadi misalkan di sini kita penginnya dia number gitu ya number jadi di sini Kita masukin dia akan expected ya expected one argument ya karena di sini ada satu argumen di kstrornya misalkan kontennya adalah 123 gitu ya 13 Nah sekarang kita berhasil nih bikin kelasnya kita cobain kita Cobain untuk yang meod ini jadi ini kan kita ngent ya di sini kita akan consl aja si number B ya tadi nama instancenya kita ambil dari get content kayak gitu ya kita save nah akan keluar 1 2 3 ya kayak gitu nah jadi ini adalah penggunaan dari generic ya pada kelas nah ini juga bisa karena e kegunaan generik adalah kita bisa bikin E Instance dengan berbagai tipe data ya jadinya Jadi sekarang kalau misalkan gua bikin ini bukan number BL Ya tapi ini adalah string box gitu ya Jadi ini akan gua ganti jadi string dan Harusnya argumennya juga harus string ya nya jadi ini akan k ganti jadi ee apa ya I love rendang gitu ya Nah jadi di sini waktu kita stringbox.cent ya Ini stringbox.cent nah ini sama kayak tadi I love rendang kayak gitu ya dan sekarang kita pakai yang tipenya string tipe datanya string untuk si Clas kita Nah jadi ini adalah penggunaan generic pada kelas ya nah mungkin ini materi untuk e generik pada kelas ini kita lanjut ke eh next materinya ya Kayaknya masih tentang generik Oke Langsung aja kita ke next materinya Nah sekarang kita masuk di materi generic pada interface ya jadi interface juga dapat memanfaatkan generic ya jadi Eh ini akan membuat nanti tipe di dalam interface kita lebih fleksibel ya jadi contohnya di sini kita akan bikin dua tipe ya masukin gener ya itu dua tipe T sama u ya ini t sama u jadi di sini teman-teman eh akan ada properti first sama second first akan bertipe t second akan bertipe u kayak gitu ya Jadi waktu teman-teman e masukin di sini misalkan number pair ya bikin variabel number pair dia bertipe data dari pair interface kita ini ya Nah dia teman-teman masukin eh number itu akan sebagai t ya sebagai t eh string itu akan sebagai u ya Nah di sini jadi first akan bertipe T atau first akan bertipe number ya jadinya di sini number dan di sini second akan bertipe string ya string jadin kayak gitu jadi first akan bertipe number ya sesuai second akan bertipe string sesuai ya nah jadi waktu teman-teman cons.log number pairnyaukannya akan keluar kayak gini nah jadi inial penggunaan gener pada interface ya Nah langsung aja ya kita cobain dia di t editor atau vs Code kita Nah sekarang kita balik lagi di vs code-nya ya jadi di sini kita akan nyobain generic pada interface ya Jadi yang ini akan kita komen terlebih dahulu ya untuk generic pada CL kita pengen nyobain generic atau penggunaan generic di dalam interface gitu ya jadi misalkan kita bikin dulu ya interface-nya kita akan ada interface itu mungkin eh apa ya nama interface-nya ya Eh user aja ya user user gitu ya Nah di sini kita bakal ada generic dengan dua tipe Misalkan ya misalkan ada t sama ada u ya t koma u kayak gitu ya Nah di sini kita akan bikin nih interface-nya di mana mungkin nanti usernya ini akan ada properti name ya name ini eh apa ya kalau name itu dia tipe datanya t ya terus ada Edge mungkin ya Ge itu tipe datanya adalah u gitu ya u kayak gini nah jadi kita bikin eh interface user ya dengan t dan u sebagai genericnya ini ada dua tipe dan name itu ngfer ke tipe yang t generic dan ke u gitu ya jadi di sini kita akan bikin sebuah objek ya jadi cons user 1 ini ngfer ke tipe data dari user interface kita tadi dan di sini Kita masukin ya Nah tadi kan di sini kita akan ada t sama u ya jadi sini kita bilang nih t-nya apa u-nya apa jadi di sini kita bilang ke dia kalau t-nya itu akan jadi string gitu ya u-nya itu akan jadi number kayak gitu nah jadi dengan kayak gini sekarang name itu harus string Edge itu harus number kayak gitu ya jadi di sini kita akan masukin name itu kalau misalkan string apa ya Budiman mungkin ya terus umur dari buniman atau ag-nya itu number 42 kayak gitu nah jadi ini berhasil ya berhasil kita bikin E objek ya dari si interfennya ini ya Nah ini dia sekarang t dan u ya dan dia string number waktu kita implnya Nah jadi ini adalah penggunaan dari generic pada interface gitu ya jadi kadang kita juga Peng Pak nih P interf kita sehingga tipe data yang di dalam interface ini lebih fleksibel kayak gitu ya nah jadi bisa kita tentukan waktu kita butuhin gitu ya nah jadi ini materi tentang generic pada interface Oke mungkin ini materinya kita lanjut ke nextnya Nah sekarang kita akan membahas batasan dari generic ya atau bisa disebut sebagai konstrain gitu ya jadi kadang-kadang kita ingin nih membatasi tipe yang dapat digunakan pada generic ya nah jadi kita bisa nih menggunakan eh constrain gitu ya untuk mengatur batasan pada generic kayak gitu contohnya di sini kita akan kasih ya generiknya itu tipenya t ya dia ada T gitu ya E place holdoldernya dan di sini kita bilang ya pakai keyword extens ya jadi di sini yang ada leng nah ini maksudnya apa nih leng number nah nih maksudnya Ya di sini kita membatasi generik hanya pada tipe yang yang memiliki properti leng Nah ya properti tertentu ya Nah contohnya properti leng nah kayak gitu nah kayak yang miliki properti leng itu kayak string punya leng ya properti leng Terus eh e array punya properti leng gitu ya tapi kalau number enggak Nah jadi kita tentuin nih kita cuman ngebolehin ya ngebolehin ya genericnya ini ya teman-teman masukin generic ya Yang e dia punya properti leng aja gitu ya kayak gitu nah leng ini ya bertipe number ya ini kayak gitu jadi kayak gitulah intinya ya J hanya bolehnya kayak gitu Nah ini bisa ini namanya constrain namanya Nah nanti baru di sini dia itu balikannya e kita akan untuk lck l ini ya itemnya bertipe t dan dia balikannya void ya void artinya tidak ada tipe ya Nah kayak gitu nah jadi kita Panggil ini pakai string boleh ya pakai array ini boleh ya Kenapa boleh karena ini bertipe eh sori memiliki properti leng ini memiliki properti leng ya sedangkan kalau misalkan Eh teman-teman masukin number ya misalkan log eh leng ya ini log leng 1223 ya masukin ya Nah ini enggak boleh akan error ya karena ini tidak berfungsi eh dengan number ya karena number tidak memiliki tidak memiliki properti leng kayak gitu ya Nah ini disebut sebagai batasan generik ya atau bisa disebut sebagai constraint kayak gitu nah jadi langsung aja kita cobain ya Eh constraint dari generic atau batasan generik ini di text editor atau vs Code kita Nah sekarang kita udah di vs code-nya lagi langsung aja kita cobain tadi yang namanya Eh constrain pada generic ya Nah contoh paling gampangnya misalkan kita bikin function ya bikin function itu function-nya untuk eh ng-lock dari Pak pjang dari variabel kita jadi Mungkin gua akan kasih nama functionnya log leng gitu ya Nah di sini kita akan pakai generic yang kita e kasih FL holder t ya dan di sini kita akan menerima yang namanya Item gitu ya jadi akan ada item dan tipenya adalah T kayak gitu ya Nah karena kita cuman ngelock doang ya dan di sini makanya kita akan kasih dia balikannya adalah void kayak gitu ya nah jadi kita hanya akan console.long console.log dari item d eh leng leng-nya kayak gini doang nah teman-teman bisa lihat ya katanya eh console.log lank th Oke Katanya kita dapat problems di sini katanya property leng does not Exist on type t ya jadi type t ini ee belum tentu dia ee ada log leng gitu ya Jadi kalau misalkan teman-teman kasih number kasih apa gitu ya jadi ini belum tentu jadi di sini teman-teman pastiin ke dia extens ya bahwasanya kita hanya akan memasukkan properti yang ada lengnya kayak gini nah dan leng Ini tipenya number Nah dengan kayak gini dia udah yakin Nih sekarang oh iya berarti e t ini nanti akan punya yang leng number kayak gitu ya Nah jadi di sini teman-teman waktu pakainya ya waktu teman-teman Pakai l l teman-teman pastikan masuk Eh masukin variabel yang Emang bertipe number gitu ya sori yang mempunyai properti leng gitu ya contoh di sini mungkin adalah eh string gitu ya Hello string gitu ya Nah ini kan ada properti leng-nya Jadi waktu kita Panggil akan keluar lank-nya 5ma kayak gitu ya jadi ini pasti string gitu ya Nah ini bentukannya atau teman-teman pakai tab inference juga bisa dia nginvert sendiri kayak kayak tadi ya kayak gini atau kayak gini juga boleh kayak gitu nah atau contohnya lagi itu Aray gitu yaay Itu juga Eh ada lengnya ya ada properti leng ya kalau 1,23 4 ya ini ranknya akan 4 kayak gitu Ya nah tapi kalau misalkan teman-teman masukin number ya lnya itu adalah e di sini number ya ini akan tidak punya ya tidak bisa karena katanya ya eh di sini Misalkan 1 2 3 ya Nah ini ya type number does not satisfy the constraint ya constrainnya dia harus punya leng gitu ya Nah number engak punya properti leng Nah makanya ini enggak bisa at error jadinya nah sor ini akan gua komen mana dia tadi Nah ini jadi number ggak bisa karena dia akan menghasilkan error gitu ya karena dia enggak punya properti l Nah jadi yang bisa itu string ya Ray itu bisa kayak gitu nah jadi ini yang disebut dengan constrain ya Jadi kita membatasi tipe yang dapat kita gunakan di dalam generic ya jadi di sini kita bilang ke dia tipenya adalah tipe yang mempunyai properti leng aja nah Contohnya kayak string tadi ya kayak array ya Nah itu bisa kalau misalkan number Enggak bisa bulean juga enggak bisa poknya teman-teman cari aja pokoknya propertinya yang ada lengnya aja gitu ya karena di sini kita akan gunain properti lnya Nah ada item kita akan akses panjangnya Nah jadi kayak gitu nah jadi ini materi tent batasan Dar ya Atau bisa diseb sebag Nah kita lanjut ke next materinya Nah sekarang kita masuk di gener pada FSI dan tipe hingga jika nanti ya Eh tipenya tidak kita sediakan gitu ya Nah tab script akan menggunakan tipe default kayak gitu nah contoh di sini kita ada t ya Ini generic-nya nah satu tipe aja ya ini satu tipe dan by default kita bilang ini string ya Jadi kalau misalkan nanti eh teman-teman enggak secara eksplisit bilang kalau misalkan itu string Ya udah dia akan langsung tip default-nya main string gitu ya Nah di mana Nanti function-nya ini ya ini kan function ya eh akan punya e ini ya parameter leng dengan tipe number value dengan tipe T tadi ya t dari si gener kita nah nantinya adal array dari si t dari genernya Nah sekarang kita akannyaay F value ya ini ini S javascrip aja ya kalau misalkan teman-teman e paham javascripan pasti paham ini ya kitaak Bah banyak ya inisung aja di sini pertama Ee Kita bisa menggunakan tipe default ya jadi teman-teman pastiin pakai tipe default di sini bentukannya kayak gini ya Nah kalau misalkan kayak gini ya udah teman-teman kan enggak bikin ya enggak bikin eh enggak perlu bikin tipe genericnya isit string enggak perlu ya jadi langsung aja Panggil ya Jadi ini akan default langsung jadi pastiin masukin ininya string kayak gitu ya Nah kalau misalkan teman-teman pengin tipe number Ya udah di sini masukin number baru nanti masukin di parameternya number ya kayak gitu nah jadi ini generic pada fungsi ee dan tipe default ya ini pada fungsi dan tipe default kayak gitu jadi langsung aja ya kita cobain dia di vs Code kita ya atau text editor kita Nah sekarang kita udah di vs code-nya Langsung aja kita cobain generic Eh pada fungsi ya di sini kita akan cobain tipe default gitu ya jadi kita bisa memberikan tipe default pada generic ya Sehingga nanti kalau misalkan ee waktu kita Panggil ya Wak kita Panggil ee genericnya itu tidak disediakan ya atau tipenya tidak disediakan jadi tab script akan menggunakan tipe default tersebut kayak gitu ya contoh di sini gua akan komen terlebih dahulu ya ini boling ya Ee ini akan gua komen aja oke harusnya ini bersih lagi ya Oke jadi di sini kita akan cobain ya misalkan nih misalkan kita ee punya function misalkan ya punya function di sini punya function eh apa ya nama functionnya ya mungkin di sini adalah log eh log message mungkin ya log message di mana kita akan ada generic t ya dan di sini kita akan menerima properti message ya sor parameter message dan Ini tipenya adalah dari si nya tadi kayak gitu ya dan di sini return kita karena kita hanya ngconso.log ya enggak ada return statement maka di ini adalah void tipe returnnya Nah di sini kita akan conso.log aja dari si eh message-nya k gitu ya jadi ini function sederhana aja jadi eh kita pengin ya sebenarnya ya waktu kita log message ini ya kalau misalkan nanti kita tidak memberi eh tipe pada generic kita ya waktu kita panggil si log message ini kita pengin Eh by default tipe dari generic-nya mungkin string kayak gitu ya nah jadi kayak gitu kita penginnya ada tipe default-nya jadi di sini teman-teman kasih sama dengan terus tipenya Nah mungkin string gitu ya Nah jadi di sini waktu kita Panggil log message ya dan di sini Kita masukin ya message-nya ini eh kita enggak kasih dia tipe generiknya ya jadi langsung aja hello world ya karena kita tahu by default nanti dia akan string kayak gitu ya ini kita save akan keluar hello world nah tapi teman-teman hati-hati ya dengan kayak gini ya kalau misalkan teman-teman kasih 90 ya Nah ini kita save nah ini akan keluar ya 90 nah kayak gitu jadi by default kita akan e kasih tahu dia dia itu tipenya string kalau enggak ada tapi kalau misalkan ya misalkan kayak gini ya kayak gini kan dia jadi number ya teman-teman lihat ya log message jadi number nih Kenapa karena tab script juga bisa secara inver ya Secara inference Oh ternyata ini number gitu ya jadi dia akan langsung bilang kalau misalkan ini number jadi enggak ada masalah kalau misalkan teman-teman kasih tipe default gitu ya jadi tipe defaultnya adalah string kayak gitu nah jadi ini yang disebut sebagai eh tipe default ya tipe default dan di sini kita gunain dia pada penggunaan ya gitu ya Nah kayak gini jadi log message by default eh genericnya nanti ya ini satu tipe dan tipenya adalah string nah tapi kita juga bisa nanti masukin number kayak gini juga bisa karena ini tab scrip secara pintar ya dia mendeteksi atau ngeinference ya kalau misalkan ini number Nah di sini nah jadi ini bisa disebut sebagai tipe default pada generic ya Nah mungkin ini materinya ee kita lanjut ke next materi dari tabesript Nah sekarang kita masuk di kesimpulan ya kesimpulan dari generic ya jadi generic di typesript adalah fitur yang sangat kuat ya dan dia memungkinkan kita dalam pembuatan function class dan juga interface yang lebih fleksib reusable dan aman secara tipe jadi dengan menggunakan gener X kita dapat menulis kode yang lebih modular dan mencegah kesalahan tipe yang tidak diinginkan tanpa kehilangan fleksibilitas yang ditawarkan oleh javascript kayak gitu ya nah jadi konsep utama dalam generics tadi kita sudah Bahas eh generic dalam function generic dalam class generic dalam interface ya constrain dalam generic ya dan dipe default p ada generik kayak gitu ya jadi generik itu sendiri adalah fitur yang esensial dalam pengembangan aplikasi yang besar Sebenarnya ya kalau misalkan teman-teman belajar react ya Ee dengan typesript teman-teman pasti ngelihat ya sintaks-sintaks kayak tadi ya Nah kayak gini-gini ya Nah kayak gini-gini terus t dan lain-lain ya teman-teman pasti familiar gitu ya itu adalah generik kayak gitu jadi ee ini biasanya sangat esensial dalam pengembangan aplikasi yang besar dan kompleks ya terus dalam typesript ya Nah karena dia emang membantu banget kita dalam menjaga tipenya ya secara konsisten ya di seluruh sistem aplikasi kayak gitu Jadi ini materi tentang generics ya mungkin eh sekian ya untuk generics ini kita lanjut ke next materinya Nah sekarang kita masuk di materi utility types di typp scriip ya pertama apa itu utility types utility types di typ script ya adalah kumpulan type helpers ya jadi dia adalah type helpers jadi dia pembantu gitu ya Nah dia ini disediakan untuk membantu kita dalam memodifikasi dan memanipulasi tipe jadi dengan utility types ini kita dapat membuat tipe baru berdasarkan tipe yang sudah ada tanpa kita harus menulis ulang ya tipe barunya itu dari awal kayak gitu jadi utility types ini ya dia itu berguna untuk menghindari pengulangan penulisan kode ya dan dia juga meningkatkan keamanan dari Tipe kayak gitu nah utility types ini ada banyak ya Ada banyak di sini kita akan bahas beberapa dari utility types-nya ya pertama kita akan bahas tentang partial atau parsial ya nah jadi parsial itu dia membuat semua properti dari tipe T menjadi opsional ya Jadi yang awalnya ini tidak opsional jadi semuanya nanti akan opsional kayak gitu ya jadi ee ini berguna Saat kita ingin bekerja dengan objek yang memiliki dengan objek yang mungkin sor yang mungkin hanya nya memiliki sebagian dari properti yang dibutuhkan kayak gitu jadi misalkan kita punya eh update user ya update user Nah kalau misalkan teman-teman e punya function untuk mengupdate user ya Nah kadang kan yang di-update itu Misalkan kita ada properti ID name sama email ya di interface user ya Nah kan kadang ya kadang Eh kalau misalkan teman-teman mengupdate user ya yang paling yang teman tem-teman update kadang cuman namanya ya kadang cuman emailnya ya kalau misalkan ada properti password kadang cuman password-nya ya jadi kan itu opsional ya jadi opsional Jadinya semuanya gitu ya nah jadi Tergantung apa yang pengin teman-teman update dari si user ya Nah nanti kan teman-teman juga pengen gunain user ini untuk membuat eh user ya mungkin kalau untuk membuat user ya semuanya wajib ya semuanya wajib di mana setiap user harus ada ID ya harus ada name gitu ya terus ada email gitu ya Nah itu semuanya harus wajib gitu ya jadi teman-teman akan pakai eh interface-nya bikinnya kayak gini nah kalau misalkan untuk ngupdate user ya pasti enggak semuanya wajib gitu ya nah jadi yang pengin diubah aja gitu ya jadi makanya daripada teman-teman bikin ulang interface-nya ya bikin ulang interface-nya mikin e teman-teman bikin interface update user ya atau user update Gitu ya id eh wajib terus nameennya itu opsional Mail opsional dan lain-lain propertinya semua opsional gitu ya Nah daripada kayak gitu Ya udah pakai parsial aja gitu ya nah jadi dengan parsial nanti si user kita ini ya si user kita itu dia eh properti yang ada di dalamnya ini jadi opsional jadi id-nya jadi opsional name jadi opsional email Jadi opsional gitu ya jadi teman-teman ggak perlu pakai tanda tanya di sini nah kayak gitu nah jadi Cara pakainya di sini teman-teman bilang ya ini function update user ya di mana update user akan menerima parameter user ya user dengan u-nya kecil ya Di mana Eh tipenya adalah user ini ya user dengan eh interface kita tadi ya yang ini tapi kita bikin dia parsial artinya setiap properti yang di dalam interface user ini dia akan menjadi opsional gitu ya kayak gitu jadi di sini kita akan bisa console.log user-nya mungkin ya Terus waktu kita bikin update user Nah nanti name-nya akan kita kasih aja yang ini Inya aja ya yang nameennya aja misal kayak gitu ya jadi ini opsional gitu ya karena dia bersifat opsional jadi parsial itu membuat semua properti dari Tipe menjadi opsional kayak gitu nah jadi daripada lama-lama kita cobain ya Eh utility types dari parsal ini di dalam e tabrip ya Nah itu menggunakan t editor kita atau vse kita langsung aja nah di kita udah di vs code-nya Langsung aja kita cobain utility types tadi ya pertama itu adalah parsial ya Nah ini adalah setup projectnya ya kalau misalkan teman-teman Miss dalam set up project ini teman-teman bisa lihat video awal gua itu tentang e nge-set up projectnya ini jadi bentukannya nanti akan jadi kayak gini ya Nah sekarang Langsung aja kita cobain tadi yang namanya utility types yang pertama itu adalah parsial ya Jadi ini adalah tentang parsial oke jadi kayak yang gua Jelaskan sebelumnya ya parsial itu membuat semua objek eh sor semua properti gitu ya semua properti dari tipe T menjadi opsional ya Nah misalkan di sini kita punya sebuah interface interf-nya adalah interface user ya user jadi interface user di mana akan ada ID ya user punya ID number gitu ya user kita harus punya name yanya itu tipenya string dan user kita juga punya email ya jadi di sini user punya email tipennya juga string gitu ya Nah misalkan nih teman-teman pengen ya di dalam sini ini kan semuanya wajib Ya wajib ya propertinya Jadi kalau misalkan teman-teman punya function ya punya function itu untuk mengupdate user ya update user Nah kalau misalkan update user tentu teman-teman pasti akan dapat yang namanya eh parameter user ya param user yang dimasukkan ke dalam eh update user ini ya dan tipenya adalah dari ini sesuai dengan ini ya Nah dan pastinya Ya pastinya kalau misalkan teman-teman dapat parameter yang kayak gini ya itu pasti tidak semua eh isi parameternya ya tidak semua parameternya itu ada mungkin id-nya ada name-nya ada emailnya ada enggak mungkin karena kita cuman ng-update doang ya ngupdate Jadi kalau misalkan teman-teman ngeupdate ya Mungkin teman-teman update emailnya ya Mungkin teman-teman update name-nya ya Jadi ada Eh situasi-situasi kayak gitu nah sedangkan di sini interface kita nih semuanya wajib nih wajib nah itu yang gua bilang eh butuhnya parsial di sini jadi kita bikin semuanya ini jadi opsional aja gitu ya Nah Enggak mungkin dong teman-teman tulis ulang ya Tulis ulang gitu ya misalkan teman-teman tulis ulang di sini ini untuk eh update user gitu Ya nanti teman-teman kasih eh misalkan ID mungkin wajib ya Eh name-nya jadi opsional ininya jadi opsional gitu ya nah ini kan kayak menulis ulang kode gitu ya nah jadi enggak enggak enak aja gitu Nah maka dari itu di sini teman-teman bisa pakai yang namanya parsial jadi di sini Panggil parsial ya parsial Terus yang user ini teman-teman tutup dia dengan kurung eh segitiga si ini kurung besar kecil sama kurung kecil sama kurang besar gitu ya Nah kayak gini bentukannya nah artinya ini semua ini ya nanti si apa namanya itu parameter kita ini ya dia itu opsional aja ya yang ada di dalam properti ini dari interface kita ini jadi opsional gitu ya mungkin di sini untuk kodenya akan gua cons aja yaah pokoknya ini untuk ini kalau dalam Pro nyatanya itu ya tem-eman rubahah is datanya ya sekaranga ini kita akan Panggil ya Panggil update usernya jadi update user ya Nah di dalamnya ini kita butuh argumen ya argumennya itu tipenya objek ya objek di mana dia ada ID name sama email Nah jadi tipenya objek Nah di sini karena semuanya opsional ya teman-teman Boleh masukin boleh enggak kayak gitu ya misalkan kita pengin masukin name aja gitu ya Ah name aja di sini kita kasih nameennya mungkin adalah John gitu ya nah ini kalau misalkan kita save sekarang yang keluar adalah yang jo-nya aja gitu ya Dan kita tidak sor ee Ini kenapa nih T bentar ya ini kayaknya ada yang sedikit salah nah ini ada yang salah ini akan gua ini ya Ee delete ya Oke kita lanjut lagi ya sor nah Oke jadi di sini maka yang ada di sini cuman namennya aja jadi ini gak wajib lagi ID sama Ail tapi kalau misalkan tem tidak Pak parsial di nah ini akan merah di karenanya ini adaak padahal kan kalau misalkan teman-teman ngupdate sesuatu ya ya Gak mungkin semuanya juga yang bakal teman-teman masukin ya Nah kadang-kadang butuh yanganya parsial kah jadi tem-an jadikan properti yang ada di dalam interf user ini ya dia Jadi opaler ini nah kayak gitu nah jadi ini salah satu til keutnya nya ada yang namanya require ya Jadi ada utility types require Nah jadi ini adalah kebalikan dari parsial ya Jadi require ini ya dia akan menjadikan semua properti pada tipe T sebagai properti wajib ya jadi kan Misalkan kita ada propertinya ada yang opsional gitu ya Atau ada apa gitu ya jadi nanti semua properti ini akan jadi properti wajib kayak gitu ya jadi dia hanya kebalikannya aja L intinya ya Jadi waktu teman-teman bikin objek kayak gini ya dari si user ini ya ini wajib ya ID jadi wajib ya name jadi wajib email jadi wajib karena kita tambahin utility type require di dalam eh ini tipe user kita yang interface ini kayak gitu nah jadi ini eh utility types require ya Nah langsung aja kita cobain dia di vs Code atau text editor kita Nah selanjutnya kita akan bahas tentang utility types require ya jadi di sini ada adalah tentang e require gitu ya nah jadi require ini adalah kebalikan dari parsial ya tadi kan parsial bikin semua propertinya jadi opsional ya sedangkan require itu menjadikan semua properti jadi wajib kayak gitu ya Nah ini akan gua eh komen terlebih dahulu ya Eh semuanya Oke jadi ini kita komen Oke jadi sekarang harusnya konsol kita bersih ya Oke jadi di sini untuk si require gitu ya Nah mungkin di sini kita akan ada interface user juga ya user juga cuman di sini bedanya kita akan Jadikan Dia jadi opsional semuanya ya Nah ini semuanya jadi opsional sekarang Nah jadi waktu teman-teman bikin E cons dari user ya user itu kan sekarang teman-teman kasih require gitu ya require sama ya caranya kayak tadi ya Ini Di mana kita akan kasih e namanya ya nama util -nya terus di sini ee buka kurung tutup kurung dan di dalamnya ada ee interface kita tadi ya Nah jadi ada interface user gitu ya nah jadi dengan kayak gini ya sekarang ya Sekarang semua dari e usernya ini ya usernya ini kan dia tipenya akan dari user interface ya ini akan user satu aja biar enak nyebutnya jadi user 1 harus memiliki ID name sama email teman-teman lihat ya di sini ernya ya Nah katanya di sini eh type is missing the following properties ya jadi harus ada ID name sama email padahal kan sebenarnya ini opsional ya Nah ini opsional cuman karena kita udah bilang kalau misalkan ini require ya jadinya ini wajib properti yang tadinya opsional jadi wajib kayak gitu nah jadi e require adalah kebalikan dari parsial jadi di sini teman-teman harus punya ID ya misalkan sat gitu ya harus punya name misalkan di sini adalah John gitu ya terus harus punya ee email ya email misalkan di sini ee John eh gmail.com gitu ya Nah jadinya require semua properti yang tadi opsional sekarang jadi require jadi wajib Nah jadi ini adalah require dari utility types ya jadi utility types require sorry Nah jadi ini materi tentang eh utility types kita yang kedua ya itu require kita lanjut ke next eh utility typesnya Nah selanjutnya ada read only ya read only utility type jadi dia akan menjadikan semua properti dari Tipe hanya boleh dibaca ya Artinya kita gak bisa nih merubah nilainya Setelah dia di e inisialisasi kayak gitu jadi misalkan ya di sini kita ada user ya Eh kita akan read only dari si user ini Jadi ini Kita masukin id-nya sat name-nya Alice ya Jadi waktu kita akan assign ya assign user.name ya kita bikin dia jadi Bob ini akan error ya cannot assign to name Kenapa Karena sekarang dia adalah read only ya Jadi kita ggak bisa ng-esetnya kayak gitu Jadi ini adalah e utility types read only ya Nah langsung aja kita cobain ya dia di eh t editor atau vs Code kita Nah sekarang kita di tek editor atau vs code-nya ya jadi langsung aja kita cobain tadi yang namanya utility types read only ya Jadi ini adalah read only kayak gitu ya nah jadi ini adalah utility types yang ketiga yang bakal kita bahas ya jadi dengan utility type read only ini kita menjadikan semua properti dari tipe T hanya bisa dibaca gitu ya jadi Artinya kita tidak tidak bisa mengubah nilainya setelah e dia diinisialisasi contohnya ya tadi kan kita ada eh interface user ya di sini ya jadi di sini gua akan bikin ya gua akan bikin eh objek baru ya objek baru itu cons user 2 misalkan ya ini kita akan ambil dari e user tadi tipe datanya Nah sekarang kita akan kasih dia value mungkin Eh ini akan gua ya mungkin namanya akan kita ganti ya bukan John ya tapi di sini akan jadi Jen gitu ya id-nya dua gitu ya Nah sekarang kita save dan kita eh bisa ngubah dari name-nya ya email-nya kita bisa rubah J misalkan kita rubah ya jadi misalkan di sini gua akan bilang user 2 D nameame ya dan di sini gua akan ganti bukan Jen ya tapi eh and Jun gitu ya dan di sini kita akan coba conso.log terlebih dahulu ya itu user 2.n-nya dan setelah itu kita akan copy dan kita consollog juga di bawahnya jadi akan keluar pertama ya sebelum kita ubah namanya j ya yang kedua setelah kita rubah dari name-nya akan jadi Anden nah kadang kita Peng Ya kita Peng kalau misalkan ya setelah kita bikin objek ini ya udah dia cuman bisa diad only aja gitu ya dia cuman bisa dibaca aja jadi setelah kita inisialisasi di sini kita gak boleh lagi nih kasih e apa namanya eh ngubah ngubah dari datanya di sini nah kita penginnya kayak gitu kadang juga ada casee kayak gitu Nah itu kita bisa capai dengan utilitypes e read only ini Jadi tinggal di sini ya bikin read ya terus ini di e kurung apa nih kurung buka kecil buka besar kayak gitu jadi di sini find Name On Oh kecil nah kayak jadi DII akan merah ya at erty jadi semua ini akan jadi read only property jadi teman-teman gak boleh ngassign di sini nah jadi ini enggak boleh diign jadi ini kita komen aja Nah jadi sekarang nih jadi namanya akan tetap selalu gen kayak gitu ya Nah karena tadi kita akan dapatin error di sini jadi nah jadi ini adalah utility types yang ke berapa nih Yang ketiga ya itu tentang read only utility types kita lanjut ya masih di next utilityp -nya selanjutnya ada utility types piak ya Jadi ini memungkinkan kita untuk memilih subset dari properti yang ada pada tipe T ya jadi kita bisa pilih nih sebenarnya nanti eh Properti apa yang pengin kita ambil ya misal kita punya interface user ya ada ID name sama email gitu ya Nah di sini teman-teman pengen eh bikin baru mungkin ya bikin baru eh tipe ya itu type user info gitu ya nah teman-teman ambil aja di sini ya Di mana mungkin teman-teman e si user info ini akan diambil dari eh user Ya diambil dari user dan dia kita ambilnya mungkin id-nya sama name-nya gitu ya nanti yang akan diambil di sini adalah ID sama name gitu ya Nah kayak gitu Jadi kita ambil kita pick G ya kita ambil dari Eh interface-nya ini kayak gitu nah jadi ini adalah types dari P ya ini P kayak gitu Jadi ini memungkinkan kita untuk memilih subset dari properti yang ada pada tipe T ya tipe T kita kayak gitu Nah ya ya biasanya Emang sering disebut t ya Kalau banyak itu jadi teman-teman jangan e pusing nanti ya Ini kok kayak generik ini kok kayak ini ya Ya emang kayak gitu gitu sering disebut kayak gitu Oke jadi langsung ya kita cobain dia di vs Code atau tekt editor kita Nah sekarang kita udah di vs code-nya ya Jadi kita akan cobain tadi yang namanya pick ya Jadi pick ini adalah utility types yang keempat gitu ya Jadi pick ini memungkinkan kita untuk memilih subset dari properti yang ada kayak gitu Misalkan kita tadi ada interface ya Interface di mana ada ID name sama email ya Nah kita pengin ambil ya e artinya bikin enggak bikin juga sih kayak kita tuh cuman butuh ID sama name-nya aja gitu ya emailnya enggak gitu ya nah jadi kita penginnya ID sama nameennya aja jadi kita ambil aja gitu ya pakai p gitu ya jadi di sini e teman-teman kasih yang namanya type ya bikin mungkin kita akan pakai ty ya jadi type E user info ya user info yang kita ambil itu Ya kita akan ngpick Nih dari si interface user tadi nah gitu ya yang kita ambil adalah ID Sori koma oke yang kita ambil adalah ID terus yang pengin kita ambil lagi adalah e eh name mungkin ya name gitu ya Nah terus kayak gini nah jadi nanti type user info kita ya ini akan ID ya sama name kayak gitu nah teman-teman bisa lihat ya ni eh ininya haoveran dari gua ya nih jadinya kita ambil ya ID sama name-nya aja Nah ini bisa kayak gitu ya jadi kita piik aja gitu yang kita butuhkan gitu ya daripada kita tulis ulang gitu ya Nah ya udah kita pick aja Nah jadi dengan Kayak gini misalkan kita ada eh object cons user info ya itu akan mungkin user info sat aja ya ngrefer ke objek user info kita sor eh e type alies user info kita dan di sini kita butuh tadi yang namanya name sama Id ya ID misalkan e 4 gitu ya terus name-nya itu eh Udin gitu Nah kayak gini nah teman-teman bisa lihat ya Ini dari user info user infonya ID sama name karena yang kita ambil adalah ID sama name ya kalau misalkan kita bikin ini ID sama email Ya udah ini jadi ID sama email ya ini id sama email ini akan error ya karena kita masukin name Nah kita balikin lagi ya ID sama name nah iniid namanya eh utility type speakak gitu ya jadi kita eh ambil subset dari propertinya yang kira-kira kita butuh gitu ya Nah di case ini kita ambil ID sama name ya kayak gitu Jadi ini materi tentang utility types yang ke berapa ini empat ya ini empat empat itu tentang eh pick utility types nah nah oke kita lanjut ya ke next utility types-nya Nah selanjutnya kita masuk di utility types dari omit ya Jadi omit ini adalah utility types yang berfungsi kebalikan dari piik ya Jadi ini menghapus properti tertentu dari tipe T Nah jadi misalkan di sini kita akan eh omit ya omit dari si e interface user kita ya Di mana kita Masukin Email ya di sini artinya nanti ya tipe yang baru kita bikin ini ya user without email ya ini dia e tidak memiliki properti email ya jadi dia hanya menghilangkan kayak gitu ya menghilangkan si email kayak gitu ya jadi nanti e di sini akan ada ID sama name aja waktu dia diimplement kayak gitu Jadi ini namanya adalah e omit ya ini adalah omit kayak gitu E langsung aja ya kita cobain dia di t editor atau vs Code kita Nah sekarang kita ah di vs codnya lagi ya Langsung aja kita cobain tadi utility types kita yang kelima itu namanya omit ya jadi dia adalah kebalikan dari PIK ya Jadi ini menghapus properti eh atau menghapus subset properti dari tipe yang kita sebutkan kayak gitu ya contohnya di sini gua bakal eh misalkan kita akan punya type ya typ-nya itu adalah user eh without email mungkin ya email gitu ya Nah kita akan ambil dia dari interface user kita tadi ya Jadi ada ID name sama email ya Nah Kita gak pengen nih ada email di sini jadi kita usir si email ya kalau Pik tadi kita ambil ya kalau ini kita usir gitu ya jadi cara ngusirnya di sini pakai omit ya terus baru kita masukin kita pengen eh ambil dia di dari Tipe mana dari Tipe user ya tadi interf user nah yang kita usir yang kita usir dari si user itu adalah si email Jadi sekarang ya Sekarang waktu gua hover di user without email ya akan jadi ID sama name ya Nah emailnya enggak ada karena ini udah kita usir ya dari si e user ini kayak gitu Nah jadi di sini waktu kita bikin objek mungkin ini e user eh 5 mungkin ya user 5 itu kita akan ambil tipenya dari user without ini jadinya eh ID misalkan 5 ya terus name-nya adalah suanti gitu ya Nah kayak gini Jadi sekarang ya dia ini akan ngrefer ke user with email user with email ini tipenya akan ngambil dari si user ini ya user ini tapi kita omit ya Artinya kita keluarkan si email dari si eh interface user ini kayak gitu Jadi waktu teman-teman lihat lihat ya ini jadinya ID sama name email-nya udah diusir kayak gitu ya jadi ini adalah eh utility types atau utility types omit kayak gitu nah jadi ini utility types kita yang kelima Oke mungkin ini materinya kita lanjut ke utility types kita Selanjutnya ya karena masih ada beberapa lagi Yang mungkin perlu dibahas Kayak gitu Oke Langsung aja kita ke next-nya Nah sekarang kita masuk di utility types record ya jadi record ini digunakan untuk membuat tipe objek di mana Kunci ya atau key itu dipetakan ke nilai dari Tipe tertentu kayak gitu jadi Misalkan ya misalkan Eh teman-teman ada type user roles ya Di mana ada admin eh user atau gest ya ini bentukan dari eh lateral typesnya jadi nanti teman-teman bilang ya ke dia ya kalau misalkan teman-teman record eh user rols ya Jadi string-nya ini bentukannya kayak gini ya Jadi nanti si admin ya user sama guest ya ini akan menjadi key-nya kayak gitu jadi ee tadi ya membuat tipe objek di mana kunci dipetakan ke nilai dari Tipe nah nilai dari tipenya ini ya admin user sama guest ya jadi ee ini akan menjadi e key-nya key-nya nah ini admin user sama gest kayak gitu Jadi ini disebut sebagai utility types dari record kayak gitu ya jadi yang awalnya bentukannya kayak gini dia e penggunaannya jadi kayak gini kayak gitu nah jadi ini bisa disebut sebagai record kayak gitu ya jadi ini membuat tipe objek di mana Kunci ya kunci dipetakkan ke nilai dari Tipe tertentu nah nilainya kan ini ya admin user sama gest ya nah jadi ini akan dipetakan nanti bentukannya jadi kayak gini nah jadi langsung aja ya kita cobain record ini di dalam eh teks editor kita atau vs Code kita Nah sekarang kita sudah balik lagi di vs code-nya ya Jadi kita akan eh bikin ya utility types yang keen Kalau enggak salah ini 1 2 Oh ya en Oke jadi ini utility types kita yang keen itu adalah record ya jadi yang kayak gua jelaskan tadi ya jadi record ini digunakan untuk membuat tipe objek ya di mana Kuncinya nanti dipetakkan ke nilai dari Tipe tertentu ya jadi misalkan kita ada e tipenya itu typ-nya user R misalkan ya user rol gitu ya dan ini adalah lateral types ya bentukannya akan kayak gini admin diaor ini dia Union ke user atau dia itu juga bisa ke gest gitu ya Gas nah nah jadi eh nilai dari Tipe ini ya itu akan menjadi key nanti di dalam eh objek ya di dalam objek yang kita kasih record contohnya kita bakal punya objek mungkin cons users ya Pakai S ya dan di sini kita pengin ya kita pengin users ini ya Nanti bentukannya kira-kira kayak gini ya bentukannya nanti dia harus punya yang namanya admin ya key-nya ya terus ada ee sesuai ya sama ini ke-nya akan jadi admin q-nya user key-nya guest gitu ya Nah ini kita bisa capai dengan eh menggunakan tadi yang namanya record Jadi di sini teman-teman titik du ya dia akan ng-refer ke record dari si user roles kita jadi us user eh roles kita kayak gitu nah terus kita Peng Ya isi darinya ini ya Val ini masing-masing nanti Adah string arayu ya Nah kayak gini nah dengan kayak gini sekarang ya sekarang katanya ya admin any misser ada user samaah jadi DII admin e Elis sama satu lagi itu Bob mungkin ya Nah ini untuk si admin lanjut kita harus masukin user ya us juga harus ya lihat ya Ini user sama g sekarang missing sini nah US sama g missing jadi user di sini kita kasih usernya apa ya char mungkin ya char dan di bawahnya itualah g g itu si ini jadi apa ya John mungkin ya gnya si John gitu ya nah jadi sekarang ya teman-teman bisa lihat ya si user kita ini ya dia dari user dan dia string ini ya string Aray valya string array tapi kenyanya adal dari ini semua admin user sama g Nah itu adalah gunanya dari record tadi jadi dengan record kita akanemetakan yaetpe ini ya menjadi key ke dalam ee objek yang kita bikin dari ee ini ng-refer ke values ini kayak gitu ya jadinya yang awalnya bentukannya kayak gini value semua ini akan jadi ke ke dalam objectjek users ini nah jadi ini adalah utility types record ya Nah kayak gitu nah jadi ini adalah utility types kita yang keenam Ya ini yang keenam kita lanjut ya ke next utility types-nya Nah selanjutnya ada ekstrak ya jadi ekstrak ini dia akan menghasilkan tipe yang mengandung elemen e dari t yang juga ada dalam u ya ini nih sedikit bingung ya kata-katanya Jadi intinya kayak ginilah ya misalkan teman-teman ada type alas string or number ya Di mana Di sini ada Union ya string sama number gitu ya Nah di sini teman-teman bisa ngekstrak nih ya ngekstrak dari string or number ini Ya dengan sintaks eh atau keyword strak ini misalkan teman-teman pengin ngambil stringnya aja gitu ya jadi di mana Nanti e kalau misalkan di sini ada string ya di string or number ada string ya tipe string maka dia akan keambil kayak gitu Nah kalau misalkan nanti ada number juga ya udah akan keambil string sama number kayak gitu ya jadi dia menghasilkan tipe yang hanya mengandung elemen dari t yang juga ada di dalam u kayak gitu ya jadi e bahasanya kayak gitu J ini penerapannya simpel sebenarnya Nah langsung aja ya kita cobain dia di tekt editor atau vs Code kita Nah sekarang kita udah di vs Code atau text editornya lagi ya Sekarang kita akan cobain utility types yang keetuuh ya itu adalah ekstrak ya jadi kayak yang gua jelaskan tadi ya Ini ekstrak dia akan menghasilkan tipe yang mengandung elemen dari t yang juga ada dalam u Nah bingung ya tadi gua udah sempat jelasin di slide-nya gimana sekarang kita contohin aja ya misalkan kita punya type ya Ini Di bawah ini aja Sor ini type kita ada string or number gitu ya jadi ini string or number ya typ elies-nya Di mana ini adalah string ini number gitu ya kalau enggak string kalau enggak number gitu ya Bahasanya dan di sini kita akan ngambil misalkan only string aja ya jadi akan kita bikin tipe baru ya sor only string kayak gini ya nah jadi kita akan ngekstrakekstr strak dari si tipe string or number ini nah jadi dari string or number yang kita strakal stringnya aja gitu ya Kita akan ambil yang stringnya Jadi sekarang tipe only string itu sama string ya nah jadi kita akan ambil yang stringnya makanya ini bisa disebut sebagai strak Kakah jadi iniengakan nya aja ya udah number gitu ya di sini nah dia akan di sini jadinya tipenya akan eh number kayak gitu nah jadi ini adalah penggunaan dari ekstrak ya kita balikin lagi ini ke string ya jadi biar namanya sesuai ya ini on string Nah jadi ini adalah utility types kita yang Keu ya tadi ya Nah tentangr utility types ya Nah mungkin ini ya tentang strak ini kita lanjut ya ke next eh utility types-nya Nah selanjutnya ada exclude ya exclude Nah exclude ini adalah kebalikan dari ekstrak ya nah jadi exclude ini akan menghasilkan tipe yang menghapus elemen dari t ya Yang juga ada dalam u kayak gitu ya misalkan di sini teman-teman akan ngekclude ya dari string or number teman-teman akan ngekclude string ya jadi string akan dikeluarkan nih dari string or number jadi akan keluarnya adalah number aja ya nah nah kayak gitu jadi akan keluarnya typ-nya nanti akan number kayak gitu Jadi ini disebut sebagai exclude kayak gitu ya Nah langsung aja kita cobain dia di vs Code atau text editor kita Nah sekarang kita udah balik lagi ya ke text editor atau vs code-nya Nah sekarang kita cobain tadi yang namanya exclude utility types ya Jadi ini basically adalah kebalikan dari si ekstrak ya Jadi kalau misalkan kita copy ini ya kita paste di sini kita ganti ini jadi ya iniud dan ini akan gua Kom terlebih dahulu ya biar gak ada dupliate nah sekarang ya yang only string Ini tipenya akan jadi number ya sekarang ya karena di sini kita kita stringnya Nah aalnya kan string number ya dan di sini string Union numberakak yak Dia akanadin aja Nah karena kita nge-exclude si string-nya kayak gitu ya Jadi ini akan jadi only number gitu ya Nah kayak gitu jadi tipenya akan jadi number kalau misalkan teman-teman pengin nge-ekclude si number maka tipenya di sini akan jadi string ya kayak gitu Nah kalau teman-teman ekskclud si string-nya tipenya akan jadi number Nah jadi ini adalah utility types exclude ya ya Nah kita lanjut ke utility tab Selanjutnya ya jadi masih ada beberapa dan ee Ini gua bahasnya secara cepat dan tepat ya gua harap teman-teman Tetap Mengerti kayak gitu ya Oke kita lanjut ya ke next utility types-nya Nah selanjutnya ada utility types non nullable ya nah jadi ini adalah utility types yang menghilangkan null dan undefine dari Tipe kita ya misalkan kita ada eh yang namanya new label string ya Ini tipenya di mana dia adalah Union ya Eh di mana Union dari string N0 sama undefine ya Nah dengan teman-teman masukin di sini ya nonableel ke dalam tipenya ini ya maka hasil dari tipenya akan tinggal string aja ya jadi null sama undefine-nya akan hilang kayak gitu nah jadi ini adalah utility types dari nonnulable ya Nah langsung aja kita lihat ya atau kita cobain dia di vs Code kita Nah sekarang kita udah di text editor atau vs cod-nya ya jadi kita bakal nyobain tadi utility types itu dari e non nulable ya Non nulable gitu ya jadi di mana ini akan menghilangkan null dan undefine dari Tipe kita ya misalkan kita punya type itu adalah nable eh n string gitu ya Ini tipenya adalah string eh sorion dengan N0 dan undefine ya undefine nah jadi kita akan bikin tipe baru ya itu yang non nullable ya yang enggak ada null sama undefine-nya jadi type Eh non eh nullable eh string gitu ya nah jadi kita akan Eh pakai ya pakai yang namanya nonnulable jadi misalkan kita akan ngambil dari e e tipe ini ya tapi kita hilangkan NL sama undefine-nya Nah itu bisa jadi di sini teman-teman pakai non n non nah ini nah ini adalah kita buka kurung kayak gini ya E kurung segitiga kayak biasa ya E kurung besar kurung kecil gitu ya dan di sini kita ingin masukin si null stringnya tadi Nah dengan kayak gini sekarang ya yang nonable string Ini tipenya hanya string aja ya nah ini kan diambil dari yang ini ya di sini ini kan awalnya string N0 sama undefine ya ini string N0 undefine kita kasih eh utility types non nullable ya jadinya dia akan ngexclude N0 and undefine from t ya jadi N0 sama undefine akan hilang ya jadinya ini jadi string aja kayak gitu Jadi ini adalah penggunaan dari atau contoh sederhana penggunaan dari utility types nonullable ya Nah mungkin ini kita lanjut ya ke eh next utility types-nya Nah selanjutnya ada utility types return type ya Jadi ini adalah utility type yang menghasilkan tipe dari nilai kembalian return type dari fungsi t Nah maksudnya gimana maksudnya misalkan teman-teman ada function get user di sini ya ini adalah bentukan dari return-nya Nah jadi teman-teman pengen eh ambil tipe data dari ini ya jadi langsung aja user return tab dari return tab dari tab user dari get user ya get user ini adalah function ini gitu ya jadi teman-teman ambil ee bentukan dari ini ya nah jadi nanti tipe datanya akan jadi ID dengan eh tipe number name dengan tipe string kayak gitu ya jadi ini adalah hasilnya nanti hasil dari tipenya kayak gitu ya nah jadi ini bentukannya nah jadi ini bisa disebut sebagai return type utility types ya Ini juga sering digunakan sebenarnya eh cukup ya cukup sering digunakan return type ini ya kayak gitu nah jadi langsung aja ya ini kita cobain di text editor atau vs Code kita Nah sekarang kita akan bahas tentang utility types return type ya Jadi kita bahas utility types return type jadi ini adalah eh utility types yang menghasilkan tipe dari e nilai return ya dari nilai return sebuah fungsi misalkan di sini teman-teman bikin function ya bikin function itu adalah get user ya get user ya Ini functionnya sederhana aja kayak gini ya dan di sini kita akan return ya kita akan return di mana ada ID dengan nilai 1 dan kita akan R return name itu nilainya adalah string ya bentukannya Elis kayak gini ya value-nya nah jadi kita akan bilang nih ya kita pengin e bikin tipe dari e atau nilai get user ini nah kayak gitu jadi di sini teman-teman bikin type l-nya mungkin ini adalah user e dari return type gitu ya jadi kita akan pakai yang namanya utility typ typ yang ini ya nah jadi kita akan pilih Nih dari si type of get user kita kayak gitu Jadi dengan kayak gini e Sekarang ya Sekarang kita coba save ya kita coba hover ya di sini return return type maka akan tipenya akan jadi propertinya ada ID sama name Ya id-nya tipenya number name-nya tipenya string nah ini menyesuaikan ya dengan return type kita ya ini kan id-nya number sedangkan name-nya string nah sesuai ya sesuai nah kayak gitu Jadi ini bisa disebut sebagai utility types return type ya Nah ini adalah utility type ke 10 ya kalau gak salah yang kita bahas Oke mungkin kita masih ada ya Kayaknya masih ada next pembahasan tentang utility typesnya kita langsung aja ke next materinyaor Nah selanjutnya ada Instance type ya Jadi ini adalah utility type yang menghasilkan tipe dari Instance kel t misal teman-teman punya kelas person ya terus di sini ada property name di sini teman-eman instansiasi dia ya atau inisialisasi Nah di sini teman-teman akan bikin ya Eh person Instance ya dari instant type dari type person Nah jadi nanti hasilnya eh di sini adalah person kayak gitu nah jadi ini enaknya kita cobain ya dia di vs Code kita ya Jadi kira-kira ini bentukannya langsung aja kita cobain dia di text editor atau vs Code kita Nah sekarang kita akan bahas utility types kita yang terakhir ya jadi namanya itu ada adalah Instance type ya nah jadi ini adalah eh utility types yang menghasilkan tipe dari Instance CL gitu ya contoh di sini Kita akan punya kelas ya kelasnya mungkin namanya person gitu ya dan di sini kita akan ada Constructor di mana akan ada yang namanya property name ya Jadi kita pakai eh S initialization ya di name itu tipenya string mungkin ya terus di sini kita akan dis. nameame ya itu Equals dengan name kayak gitu ya Nah misalkan di sini kita akan bikin tipe baru ya Jadi ini type-nya itu adalah person Instance ya Jadi kita akan ambil Instance dari si person yang dijadikan tipenya jadi caranya di sini tinggal pakai Instance type dan di sini masukin type off terus si CL person kita tadi kayak gitu nah jadi dengan kayak gini ya sekarang ya si person Instance ini ya dia akan apa namanya tipe datanya itu dari si k kita ini Nah dari si instancenya dari sinya kayak gitu nah ini coba teman-emanover nah jadi tipe datanyaah knya ini kayak gitu Jadi ini Instance kayak gitu ya nah jadi ini adalah eh materi terakhir dari utility types kita ya kita sudah bahas banyak nih ya kayaknya ini sudah 11 ya 1 2 3 4 5 6 7 8 9 10 11 ya 11 pas Oke ini ee mungkin tidak semuanya nanti akan terpakai oleh teman-teman ya Walau waktu teman-teman eh kerjain Project ya jadi enggak semuanya tapi good to know ya kayak worth it aja untuk mengetahui eh banyak utility types gitu ya kayak gitu jadi teman-teman tahu aja minimal gitu ya nanti mungkin ada case-case yang Emang teman-teman butuhkan kayak gitu Oke jadi ini tentang utility types ya kita lanjut ke next-nya mungkin kita akan bahas kesimpulan ya dari utility Tabs ini nah Selanjutnya ya kita akan membahas Kapan kita menggunakan utility types ya sebenarnya tadi kita sudah banyak banget ya bahas tentang utility types dan kita juga udah cobain dia di tekt editor kita nah terus kapan sih menggunakan utility types ya nah jadi utility types ya itu digunakan saat kita ingin melakukan modifikasi tipe secara dinamis tanpa mendefinisikan ulang gitu ya nah jadi kayak kadang kan kayak bikin ulang tuh kayak ribet aja ya Jadi pakai ini aja helpers aja ya gitu ya nah jadi ini bisa kita gunakan kayak gitu Nah karena eh utility types ini ya eh atau kalau gua sih sering bilangnya helper ya helper types ya type helper gitu ya karena Emang mereka Emang membantu kita dalam menulis kodenya itu lebih efisien ya kita lebih reusable ya dan ya pasti ya kita juga aman juga ya Secara tipe gitu ya nah jadi tadi kita sudah bahas ya beberapa contoh umum eh menggunakan dari utility types ya Nah di sini eh kita lihat ya kapan Sebenarnya waktu penggunaannya ya ini contoh umumnya E itu parsial ya parsial itu biasanya digunakan untuk membuat objek opsional ya misalkan e dalam fungsi update gitu ya terus pick dan omit ya ini untuk membuat tipe dengan subset properti tertentu ya read only nah read only ini biasanya kita Nain ya untuk memastikan agar objek kita ini tidak dapat diubah setelah kita inisialisasi jadi kita enggak boleh ngubahnya lagi ya setelah inisialisasi kita bisa pakai read only nah terus ada record ya record ini kita akan membuat peta ya atau ng-map lah ya map dari objek dengan key-nya itu eh tipenya tetap kayak gitu nah jadi ini biasanya penggunaan-penggunaan dari utility types di Tab script ya Nah sekarang kita masuk di kesimpulan ya kesimpulan dari utility types ini jadi utility types di Tab script adalah alat yang sangat kuat ya jadi dia powerful banget ya dalam memodifikasi dan memanipulasi tipe yang sudah ada dengan cara yang fleksibel dan efisien ya jadi dengan menggunakan ini kita dapat menghindari pengulangan kode ya Ini penting banget dan juga pasti ya meningkatkan keamanan tipe dan kita juga menulis kodenya itu lebih modular ya dan pasti lebih reusable kayak gitu Jadi konsep utility types ini membantu banget developer typ script ya dalam menulis kode yang lebih aman eh sambil kita tetap menjaga fleksibilitas dan keterbacaan dari kode kayak gitu Jadi ini adalah kesimpulan dari utility types ya Nah mungkin eh sekian ya kita lanjut ya ke nextnya