0 penilaian0% menganggap dokumen ini bermanfaat (0 suara)
111 tayangan96 halaman
TypeScript Object Oriented Programming
Dokumen tersebut memberikan penjelasan singkat tentang konsep Object Oriented Programming (OOP) dalam TypeScript, termasuk pengenalan Class, Object, Constructor, Properties, Method, Inheritance, Interface, dan konsep-konsep lainnya dalam OOP.
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
0 penilaian0% menganggap dokumen ini bermanfaat (0 suara)
111 tayangan96 halaman
TypeScript Object Oriented Programming
Dokumen tersebut memberikan penjelasan singkat tentang konsep Object Oriented Programming (OOP) dalam TypeScript, termasuk pengenalan Class, Object, Constructor, Properties, Method, Inheritance, Interface, dan konsep-konsep lainnya dalam OOP.
ecommerce company in Indonesia - 12+ years experiences - www.programmerzamannow.com - youtube.com/c/ProgrammerZamanNow Eko Kurniawan Khannedy ● Telegram : @khannedy ● Linkedin : https://www.linkedin.com/company/programmer-zaman-now/ ● Facebook : fb.com/ProgrammerZamanNow ● Instagram : instagram.com/programmerzamannow ● Youtube : youtube.com/c/ProgrammerZamanNow ● Telegram Channel : t.me/ProgrammerZamanNow ● Tiktok : https://tiktok.com/@programmerzamannow ● Email : [email protected] Sebelum Belajar ● Kelas JavaScript dari Programmer Zaman Now ● Kelas NodeJS dari Programmer Zaman Now ● TypeScript Dasar Pengenalan Object Oriented Programming Apa itu Object Oriented Programming? ● Object Oriented Programming adalah sudut pandang bahasa pemrograman yang berkonsep “objek” ● Ada banyak sudut pandang bahasa pemrograman, namun OOP adalah yang sangat populer saat ini. ● Ada beberapa istilah yang perlu dimengerti dalam OOP, yaitu: Object dan Class Apa itu Object? ● Object adalah data yang berisi field / properties / attributes dan method / function / behavior Apa itu Class? ● Class adalah blueprint, prototype atau cetakan untuk membuat Object ● Class berisikan deklarasi semua properties dan functions yang dimiliki oleh Object ● Setiap Object selalu dibuat dari Class ● Dan sebuah Class bisa membuat Object tanpa batas Class dan Object : Person Class dan Object : Car OOP di TypeScript ● Implementasi OOP di TypeScript, sebenarnya akan diterjemahkan menjadi kode JavaScript ● Dan JavaScript sendiri sebenarnya sejak awal dibuat sebagai bahasa prosedural, bukan bahasa pemrograman berorientasi objek ● Oleh karena, implementasi OOP di JavaScript memang tidak sedetail bahasa pemrograman lain yang memang dari awal merupakan bahasa pemrograman OOP seperti Java atau C++ ● Pada materi ini, sebenarnya untuk OOP di TypeScript hampir sama dengan di OOP di JavaScript, oleh karena itu di awal saya wajibkan untuk sudah mengikuti kelas JavaScript, karena disana sudah jelas dibahas tentang OOP di JavaScript Membuat Project Membuat Project ● Buat folder belajar-typescript-oop ● npm init ● Buka package.json, dan tambah type module Menambah Library Jest untuk Unit Test ● npm install --save-dev jest @types/jest ● https://www.npmjs.com/package/jest Menambah Library Babel ● npm install --save-dev babel-jest @babel/preset-env ● https://babeljs.io/setup#installation Menambah TypeScript ● npm install --save-dev typescript ● https://www.npmjs.com/package/typescript Setup TypeScript Project ● npx tsc --init ● Semua konfigurasi akan dibuat di file tsconfig.json ● Ubah “module” dari “commonjs” menjadi “ES6” Setup TypeScript untuk Jest ● https://jestjs.io/docs/getting-started#using-typescript Class Class ● Untuk membuat class di TypeScript, kita bisa menggunakan kata kunci class, sama seperti di JavaScript ● Cara membuat Object dari Class pun cukup menggunakan kata kunci new, sama juga seperti di JavaScript Kode : Class Constructor Constructor ● Constructor adalah method atau function yang dipanggil ketika pertama kali object dibuat dari class ● Constructor sama seperti Function biasanya, bisa memiliki parameter, yang membedakan adalah pada constructor, kita tidak perlu mengembalikan value Kode : Constructor Properties Properties atau Fields ● Properties atau Fields adalah atribut yang dimiliki oleh Class ● Pada JavaScript, kita bisa langsung saja membuat atribut tanpa harus mendeklarasikan atribut nya ● Di TypeScript, kita perlu mendeklarasikan properties nya terlebih dahulu, beserta dengan tipe data nya ● Sama seperti ketika membuat attribute di Type atau Interface, kita juga bisa menjadikan properties sebagai optional, mandatory atau readonly ● Properties yang mandatory, wajib ditambahkan nilainya di Constructor Kode : Properties Properties Default Value ● Properties juga bisa memiliki default value, kita bisa tambahkan menggunakan operator = (sama dengan) pada properties yang ingin kita tambahkan default value nya Kode : Properties Default Value Method Method ● Selain properties, di Class juga bisa memiliki function, atau lebih sering disebut sebagai Method ● Cara pembuatannya sebenarnya sama seperti di JavaScript, hanya saja pada TypeScript kita harus tentukan tipe data parameter dan return value nya Kode : Method Getter dan Setter Getter dan Setter ● Sampai sekarang, ketika kita ingin mengubah data properties, kita bisa langsung gunakan operator = (sama dengan), dan ketika ingin mengambil data cukup gunakan . (titik) ● JavaScript memiliki fitur bernama Getter dan Setter, begitu juga di TypeScript, dimana kita bisa membuat method untuk mengubah properties dan juga method untuk mengambil properties ● Karena bentuknya adalah method, maka kita bisa menambahkan validasi apapun pada method tersebut sebelum properties aslinya diubah Kode : Getter dan Setter Inheritance Inheritance ● Sama seperti di JavaScript, di TypeScript juga mendukung pewarisan antar Class menggunakan kata kunci extends ● Secara otomatis semua properties dan method yang ada di Parent Class akan diwariskan ke Child Class ● Pewarisan di TypeScript sama seperti di JavaScript, hanya bisa memiliki satu Parent Class ● Namun satu Parent Class, bisa memiliki banyak sekali Child Class Kode : Inheritance Interface Inheritance Interface Inheritance ● Di bahasa pemrograman seperti Java, kadang Interface digunakan sebagai kontrak ● Di TypeScript, hal itu juga bisa dilakukan, kita bisa membuat class yang mengikuti kontrak sebuah Interface, caranya dengan menggunakan kata kunci implements ● Karena sebenarnya ini bukanlah pewarisan, oleh karena itu untuk implements, kita bisa melakukan implements ke lebih dari satu Interface, dimana pada extends hal ini tidak bisa dilakukan Kode : Interface Kode : Implements Interface Super Constructor Super Constructor ● Pada kasus pewarisan antar class, kadang di Child Class kita ingin membuat Constructor juga, baik itu sama seperti di Parent Child, ataupun berbeda ● Pada kasus kita membuat Constructor di Child Class, maka secara otomatis kita harus memanggil Constructor di Parent Class ● Hal ini sebenarnya sama seperti di JavaScript ● Kita bisa menggunakan kata kunci super untuk memanggil Constructor di Parent Class Super Constructor Method Overriding Method Overriding ● Saat kita membuat Child Class, kita bisa mendeklarasikan ulang Method yang terdapat di Parent Class ● Jika semua deklarasi Method sama, maka itu adalah Method Overriding ● Pada kasus tertentu, kadang kita sering melakukan hal ini Kode : Method Overriding Super Method Super Method ● Sama seperti Constructor, saat kita membuat Method Overriding, kita juga bisa memanggil Method yang sama yang terdapat di Parent Class dengan menggunakan kata kunci super, lalu diikuti dengan Method yang ingin kita panggil Kode : Super Method Visibility Visibility ● Di JavaScript dan TypeScript, secara default setiap membuat properties atau method, maka sifatnya adalah bisa diakses di dalam class, atau diluar class (public) ● Di JavaScript, kita mengenal private properties atau method, dimana menggunakan prefix #, yang secara otomatis hanya bisa diakses di dalam class ● Di TypeScript, visibility ini dipermudah, dengan mengenalkan tiga kata kunci, public, private dan protected Visibility di TypeScript Visibility (Properties & Method) Keterangan
public Bisa diakses dimanapun, secara default
jika tidak menyebutkan visibility, maka akan menggunakan visibility public
private Hanya bisa diakses oleh class nya sendiri
protected Sama seperti private, tapi bisa juga diakses
oleh class turunannya Kode : Counter Kode : Double Counter Parameter Properties Parameter Properties ● Kadang, seringnya kita selalu membuat parameter di Constructor yang hanya digunakan sebagai nilai untuk properties ● Pada kasus seperti ini, kita bisa menggunakan Parameter Properties, yang secara otomatis parameter di Constructor akan dijadikan sebagai Properties di Class nya ● Untuk membuat Parameter Properties, kita bisa langsung menambahkan visibility pada parameter di Constructor Kode : Parameter Properties Operator instanceof Operator instanceof ● Kadang ada kasus kita ingin mengecek apakah sebuah object merupakan instance dari class tertentu atau bukan ● Kita tidak bisa menggunakan operator typeof, karena object dari class, jika kita gunakan operator typeof, hasilnya adalah “object” ● Operator instanceof akan menghasilkan boolean, true jika benar object tersebut adalah instance object nya, atau false jika bukan Kode : Masalah Dengan typeof Kode : Operator instanceof Polymorphism Polymorphism ● Polymorphism berasal dari bahasa Yunani yang berarti banyak bentuk. ● Dalam OOP, Polymorphism adalah kemampuan sebuah object berubah bentuk menjadi bentuk lain ● Polymorphism erat hubungannya dengan Inheritance Kode : Class Inheritance Kode : Polymorphism Method Polymorphism ● Saat kita membuat function / method dengan parameter, kita juga bisa mengirim data polymorphism pada parameter tersebut ● Misal kita membuat sebuah function dengan parameter class Employee, kita bisa mengirim object dalam bentuk Employee, Manager ataupun VicePresident ● Hal ini karena Manager dan VicePresident merupakan turunan dari Employee, sehingga kita bisa mengirim data seluruh turunan dari Employee Kode : Method Polymorphism Type Cast Type Cast ● Di TypeScript dasar, kita pernah belajar tentang type assertions, dimana kita bisa mengubah tipe data dari satu tipe data ke tipe data lainnya yang lebih specific atau detail ● Ini juga bisa kita lakukan pada kasus Method Polymorphism ● Kita bisa kombinasikan operator instanceof dan type assertions Kode : Type Cast Perlu Diingat ● Saat melakukan Type Cast, pastikan posisi Child paling bawah dilakukan pengecekan di awal ● Hal ini agar tidak terjadi kesalahan konversi ● Contoh, jika kita ubah posisi pengecekan instanceof Manager dan VicePresident, maka ketika kita mengirim VicePresident, dia akan berhenti di Manager, hal ini karena hasil instanceof bernilai true, karena VicePresident adalah turunan dari Manager Kode : Type Cast Salah Abstract Class Abstract Class ● Abstract Class merupakan deklarasi Class yang belum selesai ● Abstract Class membolehkan memiliki properties atau method yang abstract atau belum di buat implementasinya ● Abstract Class juga tidak bisa dibuat menjadi object menggunakan kata kunci new ● Kegunaan Abstract Class hanya digunakan sebagai Parent Class yang nanti diturunkan ke Child Class nya Kode : Abstract Class Kode : Child Class dari Abstract Parent Static Static ● Static merupakan kata kunci yang bisa digunakan pada properties atau method di class, yang menyebabkan properties atau method tersebut bukan lagi sebagai bagian dari object yang dibuat dari class ● Static properties atau method, bisa menyebabkan seakan-akan kita membuat global variable atau function, yang bisa diakses secara langsung, tanpa membuat object dari class nya ● Kita juga bisa menambah visibility pada static properties atau method ● Biasanya static ini sering digunakan pada jenis class utility / helper Kode : Static Properties Kode : Static Method Perlu Diingat ● Static member hanya bisa mengakses static member lainnya, tidak bisa mengakses non static member, kecuali dari object ● Sedangkan untuk non static member, bisa mengakses static member secara langsung Class Relationship Class Relationship ● Karena implementasi dari object di TypeScript adalah JavaScript object ● Jadi sebenarnya jika terdapat dua object walaupun berbeda class, tetapi secara properties dan function sama, masa bisa dianggap secara struktur JavaScript object adalah sama ● Pada kasus seperti itu, kita bisa membuat object untuk tipe data A, dengan membuat object dari tipe data B, asal secara properties dan method sama Kode : Class Relationship Error Handling Error Handling ● Sama seperti di JavaScript, di TypeScript pun mendukung error handling menggunakan try catch ● Cara penggunaan error handling di TypeScript sama saja seperti di JavaScript ● Termasuk jika ingin membuat class Error secara manual, itu juga bisa kita lakukan dengan membuat class turunan dari Error, sama seperti di JavaScript Kode : Validation Error Kode : Try Catch Namespace Namespace ● Selain menggunakan JavaScript Modules, di TypeScript ada cara lain untuk mengorganisir kode program kita, yaitu menggunakan Namespace ● Namespace biasanya digunakan untuk mengorganisir kode ketika dalam satu module terdapat banyak sekali kode, sehingga bisa kita kelola dalam Namespace ● Jika Module kita anggap sebuah folder, maka Namespace adalah sub folder di dalam Module ● Untuk membuat Namespace, kita bisa gunakan kata kunci namespace, dan kita bisa tambahkan class, function, dan lain-lain di dalam Namespace tersebut Kode : Namespace Kode : Menggunakan Namespace Materi Selanjutnya Materi Selanjutnya
● TypeScript Generic ● TypeScript Decorator ● Studi Kasus NodeJS menggunakan TypeScript