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++)
● https://www.typescriptlang.org/
PROSES DEVELOPMENT TYPESCRIPT

tsc
TypeScript Code (TypeScript JavaScript Code
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
SETUP PROJECT
MEMBUAT PROJECT

● Buat folder belajar-typescript-dasar

● 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
TYPESCRIPT SETUP
PROJECT
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
FUNCTION
SAY HELLO FUNCTION

● Sebelum mulai belajar, kita akan coba buat say hello function dengan file
TypeScript
KODE : SRC/SAY-HELLO.TS
KODE : TESTS/SAY-HELLO.TEST.TS
KODE : NPM TEST
TYPESCRIPT COMPILE
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 tsconfig.json
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 tsconfig.json nya
● https://www.typescriptlang.org/tsconfig#include
● https://www.typescriptlang.org/tsconfig#exclude
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
TIPE UNION
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
PROPRERTIES OPTIONAL
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 ASSERTION
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 AND 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