INTRODUCTION TO
TYPESCRIPT
Anggota Kelompok
Bagas Hardiansyah Putra (232410103006)
Billie Surya Pratama (232410103018)
Muhammad Rafli Arya Nugraha
(232410103020)
Print to Console
TYPESCRIPT
OUTPUT
JAVASCRIPT
Cara untuk melakukan print to
console pada TypeScript dan
JavaScript memiliki kesamaan, yaitu
sama sama menggunakan
console.log(), perbedaanya hanya
ada pada deklarasi variabel nya saja
Variabel
String
TYPESCRIPT
OUTPUT
JAVASCRIPT
Sama seperti pada Print to Console
perbedaan kode TypeScript dengan
JavaScript ada pada deklarasi
variabelnya
pada typescript, variabel harus
ditentukan tipe datanya seperti
string, number, boolean, dan tipe
data lainnya.
sedangkan pada JavaScript,
deklarasi variabel tidak memerlukan
tipe data
Variabel
Number
TYPESCRIPT
OUTPUT
JAVASCRIPT
Pada TypeScript, untuk tipedata number terutama pada penulisan heksadesimal,
biner, dan oktal, diawali dengan
0x untuk heksadesimal
0b untuk biner
0o untuk oktal
Setelah di transpile ke JavaScript, bilangan biner dan oktal akan di konversi menjadi
bilangan desimal
Variabel
Boolean
TYPESCRIPT
OUTPUT
JAVASCRIPT
Untuk Penulisan variabel dengan
tipe data boolean sama dengan
penulisan tipe data string
Array
TYPESCRIPT
OUTPUT
JAVASCRIPT
Untuk membuat variabel dengan tipe data array pada TypeScript dapat dilakukan
melalui 2 cara.
Cara Pertama adalah dengan menuliskan tipedata dan diikuti dengan kurung siku
seperti contoh diatas
Cara Kedua adalah dengan menuliskan Array<Tipe Data>
TYPESCRIPT
OUTPUT
JAVASCRIPT
Untuk membuat object pada TypeScript dapat dimulai dengan menuliskan const
nama object, berikutnya tambahkan parameter properti apa saja yang ada pada
object tersebut beserta tipe datanya, apabila object sudah memiliki properti maka
dilanjutkan dengan mengisi properti tersebut sesuai dengan tipe data yang telah
ditentukan.
Setelah di transpile ke dalam JavaScript parameter properti akan hilang dan hanya
Object
TYPESCRIPT
OUTPUT
JAVASCRIPT
Untuk penulisan Optional Properties pada Object dapat dilakukan dengan
menambahkan ? pada parameter properti.
Untuk properti yang memiliki simbol ? akan bersifat optional sehingga apabila tidak
diisi kode akan tetap berjalan secara normal.
Object
Optional Properties
Percabangan (if)
If
TYPESCRIPT
OUTPUT
JAVASCRIPT
Penulisan dan cara kerja if pada
TypeScript dan JavaScript sama
dengan penulisan pada Python,
yaitu dimulai dengan menuliskan if
dan dilanjutkan dengan menuliskan
perkondisian yang harus dipenuhi
untuk menjalankan kode yang
terdapat pada blok if
TYPESCRIPT
OUTPUT
JAVASCRIPT
Percabangan (if)
If Else
Penulisan dan cara kerja if else pada TypeScript dan JavaScript juga sama dengan
penulisan pada Python, yaitu dimulai dengan menuliskan if untuk perkondisian
yang harus dipenuhi, dan berikutnya menuliskan perkondisian else yang nantinya
kode dalam blok else akan dijalankan apabila tidak memenuhi perkondisian if
TYPESCRIPT
OUTPUT
JAVASCRIPT
Penulisan pada
TypeScript dan
JavaScript sedikit
berbeda, pada JS
dan TS
menggunakan else
if, untuk cara
kerjanya sama
dengan python
Percabangan (if)
Else If
TYPESCRIPT
OUTPUT
JAVASCRIPT
Switch case
memiliki fungsi
yang cukup
mirip dengan
perkondisian
else if
Percabangan (if)
Switch Case
Looping
For
TYPESCRIPT
OUTPUT
JAVASCRIPT
Looping pada TypeScript dan JavaScript memiliki format penulisan yang sedikit berbeda
dengan python, kode looping dimulai dengan menuliskan for dan diikuti dengan
menentukan start/awalan dari looping, dan menuliskan nilai untuk stop/berhenti dari
variabel yang sama, diakhir ditambahkan increment (++) atau decrement (--)
TYPESCRIPT
OUTPUT
JAVASCRIPT
For in digunakan untuk melakukan perulangan dengan
menghitung index dari array,
sedangkan for .. of digunakan untuk melakukan
perulangan dengan menghitung nilai dari array
Looping
For .. in & For .. of
TYPESCRIPT
OUTPUT
JAVASCRIPT
Perulangan while akan dilakukan selama belum memenuhi perkondisian yang telah
ditentukan, agar dapat mencapai perkondisian dapat ditambahkan increment (++)
atau decrement (--) pada bagian blok kode while
Looping
While
TYPESCRIPT
OUTPUT
JAVASCRIPT
Do while memiliki fungsi yang mirip seperti while, namun dengan cara kerja yang
sedikit berbeda, jika pada while perkondisian akan dicek pada tahap awal looping,
sedangkan pada do-while perkondisian akan di cek pada tahap akhir loop.
Hal ini dibuktikan dari contoh diatas dimana nilai angka telah menunjukan angka 4,
namun pesan perulangan masih tetap di print ke dalam console
Looping
Do-While
Function
Return berupa void
TYPESCRIPT
OUTPUT
JAVASCRIPT
Return berupa void umumnya
digunakan untuk menampilkan print
to console. Penulisannya dapat
dimulai dengan menuliskan function
nama_function(), kemudian tipe data
void dan diikuti dengan pesan yang
ingin di print ke dalam console.
Function
Return berupa tipe data
TYPESCRIPT
OUTPUT
JAVASCRIPT Penulisan Function yang mereturn
tipe data tertentu memiliki cara
penulisan yang hampir sama
dengan return void, perbedaanya
ada pada tipe data yang digunakan
saja.
Function
Parameter
TYPESCRIPT
OUTPUT
JAVASCRIPT Untuk menambahkan parameter
pada suatu function dapat dilakukan
dengan menuliskan variabel yang
diinginkan beserta tipe data
variabelnya setelah menulis nama
function.
TYPESCRIPT
OUTPUT
JAVASCRIPT
Memiliki cara penulisan yang sama dengan function yang memiliki parameter,
hanya saja untuk parameter yang ingin dijadikan optional dapat ditambahkan
dengan symbol ?
Function
Optional Parameter
TYPESCRIPT
OUTPUT
JAVASCRIPT
Function
Default Parameter
Memiliki cara penulisan yang sama dengan function yang memiliki parameter,
hanya saja untuk parameter yang dibuat memiliki default parameter, maka dapat
menambahkan nilai dari parameter tersebut.
Apabila pada saat pemanggilan function parameter tersebut tidak digunakan, maka
function akan mengisi parameter kosong tersebut menggunakan nilai yang telah
ditentukan.
TERIMA KASIH

Pengenalan Materi Dasar TypeScript dan JavaScript.pptx