TypeScript Generic

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 13+ 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 OOP
TypeScript Generic
TypeScript Generic

● Generic adalah fitur dimana kita bisa membuat kode yang sama, dan bisa digunakan berulang kali
dengan menggunakan tipe data yang berbeda
● Sebelumnya, saat kita ingin menggunakan tipe data yang bisa berbeda untuk variabel atau
parameter, kita menggunakan tipe data any
● Dengan menggunakan Generic, kita bisa melakukan perubahan tipe data ketika digunakan,
sehingga lebih aman karena tidak perlu menggunakan tipe data seperti any
Membuat Project

● Buat folder belajar-typescript-generic

● 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

● npm install --save-dev @babel/preset-typescript

● npm install --save-dev @jest/globals
● https://jestjs.io/docs/getting-started#using-typescript
Tanpa Generic
Tanpa Generic

● Tanpa generic, saat kita ingin membuat Class yang berisi tipe data yang bisa berbeda-beda
● Maka kita harus menggunakan tipe data any
Kode : Data Class
Kode : Test Data Class
Generic Class
Generic Class

● Generic bisa ditambahkan ketika kita membuat Class, caranya bisa menggunakan tanda <>
(diamond) setelah nama class, lalu tentukan tipe data generic nya
● Tipe data generic tersebut bisa digunakan pada class, dan bisa diubah tipenya ketika kita membuat
object dari Generic Class tersebut
● Saat kita membuat object dari Generic Class, kita wajib menentukan tipe data yang ingin kita
gunakan untuk mengganti tipe data generic nya
Kode : Generic Class
Kode : Membuat Object
Kode : Menggunakan Data di Generic
Generic Function
Generic Function

● Saat kita membuat tipe data generic di Class, tipe data tersebut bisa digunakan diseluruh bagian
Class
● Namun, kadang kita tidak membuat class, kita hanya membuat function misalnya
● Generic juga bisa digunakan pada function, kita bisa menggunakan cara yang sama dengan
menempatkan tanda <> setelah nama function
Kode : Generic Function
Multiple Generic Type
Multiple Generic Type

● Tipe data generic bisa kita tambahkan lebih dari satu, baik itu di Class ataupun di Function
● Kita bisa tambahkan pemisah , (koma) di dalam <> jika ingin menambahkan tipe data generic lebih
dari satu
Kode : Multiple Generic Type
Kode : Menggunakan Multiple Generic Type
Optional Generic Type
Optional Generic Type

● Saat kita menggunakan generic type di Class, lalu kita menggunakan generic type tersebut di
constructor, kita tidak wajib menyebutkan tipe generic nya
● TypeScript bisa secara otomatis mendeteksi tipe yang kita gunakan pada parameter constructor
● Namun jika kita tidak menggunakan tipe tersebut pada constructor, maka typescript tidak bisa
menggunakan secara otomatis
Kode : Optional Generic Type
Kode : Generic Class Tanpa Constructor Parameter
Kode : Menggunakan Generic Class
Generic Parameter Default
Generic Parameter Default

● Saat kita menggunakan generic data type, kita bisa menentukan tipe data default jika tidak
menyebutkan tipe data
● Kita bisa gunakan = tipe data di dalam operator <>
Kode : Generic Parameter Default
Kode : Menggunakan Generic Parameter Default
Generic Constraint
Generic Constraint

● Secara default, saat menggunakan generic type, kita bisa bebas menggunakan tipe data apapun
● Namun, kadang kita ingin membatasi jenis tipe data yang diperbolehkan
● Kita bisa menggunakan perintah extends TipeData pada operator <>, yang artinya tipe data yang
boleh digunakan hanyalah tipe data TipeData dan turunannya
Kode : Employee Inheritance
Kode : Generic Constraint
Kode : Menggunakan Generic Constraint
Generic Collection
Generic Collection

● Sebelumnya kita pernah menggunakan tipe data Array, dimana Array sebenarnya adalah tipe data
Generic, oleh karena itu kita bisa menggunakan Array<tipe> ketika membuat Array
● Selain Array, ada tipe data Collection (kumpulan data) yang berupa tipe data Generic, yaitu :
● Set<T>, yaitu tipe data collection yang berisi data unique dan tidak ada jaminan urutan data
● Map<K, V> yaitu tipe data collection yang berisi data key-value
Array<T>

● Generic type Array<T> sebenarnya merupakan representasi dari tipe data array di JavaScript
● Oleh karena itu, cara penggunaannya sama seperti array di JavaScript
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Kode : Array<T>
Set<T>

● Generic type Set<T> sebenarnya merupakan representasi dari tipe data Set di JavaScript
● Oleh karena itu, cara penggunaannya sama seperti Set di JavaScript
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
Kode : Set<T>
Map<K, V>

● Generic type Map<K, V> sebenarnya merupakan representasi dari tipe data Map di JavaScript
● Oleh karena itu, cara penggunaannya sama seperti Map di JavaScript
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
Kode : Map<K, V>
Generic Promise
Generic Promise

● Saat kita menggunakan JavaScript Async, kita akan sering bertemu dengan Promise
● TypeScript menggunakan Generic sebagai representasi untuk tipe data Promise<T>
● Oleh karena itu, ketika membuat function yang mengembalikan Promise, kita bisa menentukan
tipe data apa yang akan dikembalikan oleh Promise tersebut
Kode : Promise Function
Kode : Menggunakan Promise
Penutup