TypeScript Object Oriented

Programming
Eko Kurniawan Khannedy
Eko Kurniawan Khannedy

- Technical architect at one of the biggest

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