TypeScript Dasar

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 12+ years experiences
- [Link]
- [Link]/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Linkedin : [Link]
● Facebook : [Link]/ProgrammerZamanNow
● Instagram : [Link]/programmerzamannow
● Youtube : [Link]/c/ProgrammerZamanNow
● Telegram Channel : [Link]/ProgrammerZamanNow
● Tiktok : [Link]
● Email : [Link]@[Link]
Sebelum Belajar
● Kelas JavaScript dari Programmer Zaman Now
● Kelas NodeJS dari Programmer Zaman Now
Pengenalan TypeScript
Pengenalan TypeScript
● TypeScript adalah bahasa pemrograman berorientasi objek yang dibuat oleh Microsoft
● TypeScript adalah bahasa pemrograman yang di kompilasi menjadi kode JavaScript
● Menggunakan TypeScript akan membuat kode kita lebih mudah di baca dan di debug dibandingkan
menggunakan JavaScript
● TypeScript adalah bahasa pemrograman yang Strongly Type (Seperti Java, C#, dan C/C++)
● [Link]
Proses Development TypeScript

tsc
TypeScript Code JavaScript Code
(TypeScript Compiler)
Keuntungan Belajar TypeScript
● Saat ini banyak sekali perusahaan yang mulai mengadopsi TypeScript, hal ini karena banyak fitur
yang dimiliki oleh TypeScript yang sangat memudahkan saat proses pemrograman aplikasi
● Karena TypeScript melakukan kompilasi kode menjadi JavaScript, hal ini secara otomatis kita tidak
perlu lagi pusing dengan fitur-fitur di JavaScript yang belum di support, karena TypeScript secara
otomatis akan mengurusnya
● Selain itu, banyak juga framework-framework yang populer sekarang mulai beralih menggunakan
TypeScript, seperti ReactJS, VueJS, NestJS, dan lain-lain
Membuat Project
Membuat Project
● Buat folder belajar-typescript-dasar
● npm init
● Buka [Link], dan tambah type module
Menambah Library Jest untuk Unit Test
● npm install --save-dev jest @types/jest
● [Link]
Menambah Library Babel
● npm install --save-dev babel-jest @babel/preset-env
● [Link]
Setup TypeScript Project
Menambah TypeScript
● npm install --save-dev typescript
● [Link]
Setup TypeScript Project
● npx tsc --init
● Semua konfigurasi akan dibuat di file tsconfi[Link]
● Ubah “module” dari “commonjs” menjadi “ES6”
Setup TypeScript untuk Jest
● [Link]
Say Hello Function
Say Hello Function
● Sebelum mulai belajar, kita akan coba buat say hello function dengan file TypeScript
Kode : src/[Link]
Kode : tests/[Link]
Kode : npm test
Kompilasi TypeScript
Kompilasi TypeScript
● Seperti yang dijelaskan di awal, bahwa kode TypeScript tidak bisa langsung dijalankan, kita harus
melakukan kompilasi terlebih dahulu menjadi JavaScript
● Kita bisa menggunakan perintah : npx tsc
● Secara default, semua file hasil kompilasi akan disimpan di lokasi yang sama dengan file TypeScript
● Kadang, praktek programmer TypeScript biasanya memisahkan lokasi hasil kompilasi ke sebuah
folder misal dist (distribution)
● Untuk mengubah lokasi file hasil kompilasi, kita perlu ubah di tsconfi[Link]
Kode : Mengubah Lokasi Hasil Kompilasi
Include dan Exclude
● Secara default, semua file ts akan coba dikompilasi oleh TypeScript, kadang-kadang kita tidak
membutuhkan hal tersebut
● Misal kita hanya ingin melakukan kompilasi untuk kode program, dan tidak butuh melakukan
kompilasi untuk kode unit test
● Kita bisa tambahkan include dan exclude pada tsconfi[Link] nya
● [Link]
● [Link]
Kode : Include dan Exclude
Tipe Data Primitif
Tipe Data Primitif
● TypeScript menggunakan tipe data di JavaScript, sehingga semua tipe data seperti string, number,
boolean otomatis didukung oleh TypeScript
Daftar Tipe Data Primitif
Tipe Data Primitif Keterangan

number Number di JavaScript

boolean Boolean di JavaScript

string String di JavaScript

Deklarasi Variabel
● Karena TypeScript adalah Strongly Type Language, oleh karena itu saat kita membuat variabel, kita
harus menentukan tipe data variabel nya
● Dan jika kita sudah menentukan tipe datanya, kita tidak boleh mengubah variabel tersebut menjadi
tipe data yang berbeda
● TypeScript bisa secara otomatis mendeteksi tipe data yang sedang digunakan, tapi kita juga bisa
menentukan secara eksplisit menggunakan :
const namaVariable : tipedata = value
Kode : Tipe Data Primitif
Babel TypeScript
Babel TypeScript
● Untuk menjalankan unit test, kita menggunakan Jest dan Babel
● Banyak programmer TypeScript yang mengeluh ketika proses development, menggunakan
TypeScript lebih lambat karena harus melakukan kompilasi terlebih dahulu
● Oleh karena itu, @babel/typescript melakukan cara kompilasi nya dengan cara menghapus seluruh
kode TypeScript dan menjadikan kode JavaScript, hal ini memang lucu, tapi inilah kenyataannya
● Oleh karena itu, error TypeScript yang sering harusnya terjadi di Unit Test kadang tidak terjadi
karena kode TypeScript dihapus oleh Babel
● Oleh karena itu, kita harus secara regular melakukan pengecekan menggunakan perintah : npx tsc
● Untuk memastikan tidak ada kode TypeScript kita yang bermasalah
Kode : Error TypeScript
TypeScript Compiler
● Untuk menjalankan TypeScript Compiler secara terus menerus, kita juga bisa menggunakan
perintah :
npx tsc --watch
Tipe Data Array
Tipe Data Array
● Tipe data array di TypeScript juga sama seperti di JavaScript, cara pembuatannya dan
penggunaannya
● Di TS tipe data Array bisa menggunakan tanda TipeData[] atau Array<TipeData>
Kode : Tipe Data Array
Read Only Array
● Di TypeScript, kita bisa membuat Array dengan tipe readonly (tidak bisa diubah lagi) dengan
menggunakan tipe data ReadonlyArray<TipeData>
Kode : Read Only Array
Tuple
● Tuple adalah tipe data Array, yang panjang array dan juga tipe data di tiap index sudah ditentukan
● Pada kasus tuple bersifat read only (tidak bisa diubah), kita bisa tambahkan kata kunci readonly
Kode : Tuple
Tipe Data Any
Tipe Data Any
● Saat kita menggunakan TypeScript, setiap jenis data idealnya ada deklarasi datanya
● Contoh saat kita ingin menggunakan tipe data JavaScript Object, idealnya harusnya ada ketentuan
attribute yang dimilikinya, sedangkan di JavaScript hal itu tidak diwajibkan
● Pada kasus kita memang ingin membuat tipe data yang bebas seperti di JavaScript, kita bisa
gunakan tipe data Any
● Tipe data Any tersebut menjadikan TypeScript tidak melakukan pengecekan apapun terhadap
akses terhadap data tersebut
Kode : Tipe Data Any
Union Type
Union Type
● Seperti yang sudah kita tahu, JavaScript sebenarnya bisa menyimpan berbagai jenis tipe data di
variabel yang sama
● Namun di TypeScript, hal itu dilarang karena praktek yang buruk
● Pada kasus jika kita ingin membuat variabel yang bisa berubah bentuk tipe data, kita bisa memberi
tahunya menggunakan union type
● Secara otomatis TypeScript akan membolehkan kita mengubah tipe data, namun sesuai yang sudah
ditentukan di union type nya
Kode : Union Type
Menggunakan Union Type
● Saat kita membuat Union Type, kita perlu berhati-hati ketika memanggil method terhadap variabel
tersebut
● Hal ini karena tipe datanya bisa berubah, oleh karena itu ada baiknya kita melakukan pengecekan
tipe data terlebih dahulu menggunakan typeof
Kode : Menggunakan Union Type
Type Alias
Type Alias
● Menggunakan tipe data Any sebenarnya tidak direkomendasikan
● Biasanya kita akan menggunakan tipe data Any, jika memang datanya kita gunakan misal dari
library orang lain yang sudah tidak bisa diubah, atau memang ketika attribute nya tidak pasti
datanya
● Pada kasus jika kita membuat tipe data JavaScript object sendiri, kita bisa membuat alias untuk
struktur tipe data objectnya
Kode : Alias
Kode : Test Alias
Type Alias untuk Union Type
● Type Alias juga bisa digunakan untuk membuat union type
Kode : Type Alias untuk Union Type
Object Type
Object Type
● Pada kasus yang sederhana, kadang membuat alias terlalu bertele-tele, kita juga bisa membuat tipe
data JavaScript Object secara langsung dengan mendeklarasikan detail type nya ketika membuat
variabel nya
● Hal ini lebih sederhana dibandingkan membuat Type terlebih dahulu
Kode : Object Type
Optional Properties
Optional Properties
● Secara default, saat kita membuat attribute di Object atau Type, maka attribute tersebut wajib diisi
nilainya
● Namun, kadang-kadang tidak semua attribute itu wajib diisi nilainya
● Pada kasus attribute nya tidak wajib diisi, kita bisa tambahkan tanda ? untuk menandakan bahwa
itu adalah optional
Kode : Optional Properties
Enum
Enum
● TypeScript memiliki tipe data enum, yaitu tipe data yang nilainya sudah pasti
● Tipe data ini tidak dimiliki di JavaScript
● Secara default tipe data enum ini akan dikonversi menjadi string di JavasScript, namun bisa juga
dikonversi menjadi number
Kode : Enum
Kode : Menggunakan Enum
Enum di JavaScript
● Secara default, enum di TypeScript akan dikonversi menjadi tipe data number
● Kadang kita ingin ubah dari number menjadi String, kita bisa lakukan hal itu ketika membuat enum
nya
Kode : Enum sebagai String
Null dan Undefined
Null dan Undefined
● Saat kita menggunakan ? pada variabel atau parameter, secara otomatis kita bisa mengirim data
undefined
● Tapi kadang, kadang, ada kasus kita juga ingin mengirim data null, pada kasus ini kita juga bisa
menggunakan tipe data null
Kode : Undefined
Kode : Null
Interface
Interface
● Interface adalah cara lain melakukan deklarasi data selain menggunakan Type
● Lantas kalo begitu, apa bedanya Interface dan Type?
● Interface bisa dikembangkan dengan mudah dibanding dengan Type
● Oleh karena itu, kebanyakan untuk tipe data yang kompleks, kebanyakan programmer TypeScript
akan menggunakan Interface dibandingkan menggunakan Type
Kode : Interface
Kode : Menggunakan Interface
Readonly Properties
● Properties dapat kita jadikan readonly, yang artinya tidak bisa diubah lagi
● Kita bisa menggunakan kata kunci readonly pada attribute tersebut
Kode : Readonly Properties
Function Interface
Function Interface
● Di TypeScript, kita juga bisa membuat deklarasi Function dalam bentuk Interface
● Dengan demikian ketika kita ingin membuat variabel yang berisi function, kita bisa dengan mudah
menggunakan interface tersebut
Kode : Function Interface
Indexable Interface
Indexable Interface
● Interface juga bisa digunakan untuk membuat tipe data dengan jenis yang memiliki index, seperti
Array atau Object
Kode : Array
Kode : Object
Extending Interface
Extending Interface
● Interface bisa melanjutkan (extends) ke Interface lain
● Secara otomatis attribute Interface yang dilanjutkan dimiliki juga oleh interface tersebut
● Ini membuat kita lebih mudah ketika membuat tipe data yang kompleks
Kode : Employee
Kode : Extending Interface
Function di Interface
Function di Interface
● Implementasi dari Interface di JavaScript sebenarnya adalah sebuah object
● Seperti yang kita tahu, di JavaScript, kita bisa menambahkan function sebagai attribute di object
● Hal ini juga bisa kita lakukan di Interface
Kode : Interface Person
Kode : Function di Interface
Intersection Types
Intersection Types
● Intersection merupakan cara membuat tipe data baru dengan cara menggabungkan dua tipe data
lain
● Hal ini sangat cocok ketika kita tidak bisa melakukan extends pada Interface
● Kita bisa membuat type dengan menggunakan kata kunci & (dan)
Kode : Intersection Types
Kode : Menggunakan Intersection Types
Type Assertions
Type Assertions
● Kadang, kita sering berada pada situasi dimana kita tahu tipe data yang kita gunakan, namun
TypeScript tidak tahu tipe data tersebut
● Biasanya pada kasus kita menggunakan kode dari JavaScript sehingga membuat return value nya
berupa tipe data Any
● Pada kasus ini, kita bisa melakukan konversi ke tipe data yang kita mau menggunakan kata kunci as
● Ini disebut dengan type assertions
Kode :
Function
Function
● Sama seperti di JavaScript, TypeScript juga mendukung pembuatan function
● Cara pembuatan function di TypeScript pun sama dengan di JavaScript
● Salah satu yang membedakan adalah, pada parameter kita perlu menentukan tipe data, dan pada
function kita juga perlu menentukan tipe data return value nya
● Pada kasus function tersebut tidak mengembalikan value, kita bisa menggunakan tipe data void,
atau tidak perlu menyebutkan sama sekali seperti di JavaScript
Kode : Say Hello Function
Function Parameter
Function Parameter
● Sama seperti di JavaScript, function di TypeScript bisa memiliki banyak parameter, rest parameter
(variable argument) sampai default value
● Fitur yang berbeda dengan JavaScript adalah, di TypeScript setiap parameter wajib diisi, kecuali
kita tentukan sebagai optional menggunakan ? (tanda tanya)
Kode : Say Hello Function
Kode : Sum Function
Function Overloading
Function Overloading
● Function Overloading adalah kemampuan untuk membuat Function dengan nama yang sama,
namun dengan parameter input yang berbeda
● Di JavaScript, membuat satu Function dengan input data yang berbeda dan output yang bisa
menghasil data yang berbeda sudah biasa dilakukan
● Namun hal ini kadang bisa membuat sebuah Function tidak aman, karena bisa menghasilkan
berbeda-beda tipe data.
● TypeScript memberikan kemampuan Function Overloading, agar pembuatan Function seperti ini
lebih aman dilakukan
Kode : Function Overloading
Function Sebagai Parameter
Function sebagai Parameter
● Sama seperti di JavaScript, di TypeScript juga kita bisa gunakan Function sebagai parameter
● Hal ini sudah sering kita lakukan, biasanya ketika memanggil function yang membutuhkan callback
function lainnya
● Pada TypeScript parameter yang berupa function, perlu kita beri tahu bahwa parameter tersebut
adalah function
● Kita bisa gunakan Function Interface, atau bisa langsung sebutkan pada parameter nya, jumlah
parameter dan return value function yang dibutuhkan
Kode : Function sebagai Parameter
Kode : Anonymous Function
Kode : Arrow Function
If Statement
If Statement
● Sama seperti di JavaScript, di TypeScript juga kita bisa melakukan if statement
● If statement di TypeScript sama seperti If statement di JavaScript
Kode : If Statement
Ternary Operator
Ternary Operator
● Ternary operator yang dilakukan di JavaScript juga bisa dilakukan di TypeScript
Kode : Ternary Operator
Switch Statement
Switch Statement
● Switch statement di TypeScript juga sama seperti di JavaScript
Kode : Switch Statement
For Loop
For Loop
● Perulangan For di TypeScript sama saja seperti perulangan For di JavaScript
● TypeScript mendukung semua for loop seperti for loop biasa, for in, dan for of
Kode : For Loop
While Loop
While Loop
● TypeScript juga mendukung perulangan While Loop seperti di JavaScript
Kode : While Loop
Do While Loop
Do While Loop
● TypeScript juga mendukung perulangan menggunakan Do While Loop
Kode : Do While Loop
Break dan Continue
Break dan Continue
● Seperti di JavaScript, pada perulangan While atau Do While, kita sering menggunakan kata kunci
break dan continue
● Hal ini juga bisa dilakukan di TypeScript
Kode : Break dan Continue
JavaScript Feature
JavaScript Feature
● Semua fitur yang pernah kita bahas di kelas JavaScript, bisa dilakukan di TypeScript
● Seperti Operator Matematika, Perbandingan, Logika, String Template, Optional Chaining, With
Statement, Default Parameter, Function Generator, Getter Setter, Destructuring, Modules,
Standard Library dan lain-lain
● Yang membedakan adalah, pada fitur TypeScript, karena Strongly Type, kita harus menentukan tipe
data dari tiap variabel dan parameter
● Pada kasus jika kita ingin seperti di JavaScript, dimana variabel atau parameter bisa menggunakan
tipe data apapun, maka kita harus menggunakan tipe data Any di TypeScript
Materi selanjutnya
Materi Selanjutnya
● TypeScript Object Oriented Programming
● TypeScript Generic
● TypeScript Decorator