Lecture 4 — Data Types in TypeScript

1. Apa itu Data Type?

Sebelum masuk ke string, number, dan boolean, kita harus memahami dulu:

Apa sebenarnya data type itu?

Data type adalah jenis data yang disimpan oleh sebuah variable.

Misalnya:

const name = "Budi";

"Budi" adalah string.

Kemudian:

const age = 20;

20 adalah number.

Kemudian:

const isStudent = true;

true adalah boolean.

Jadi:

"Budi"    → string
20        → number
true      → boolean

Sebuah variable tidak hanya mempunyai nama dan nilai. Variable juga mempunyai type.

name
 │
 ├── value → "Budi"
 └── type  → string

2. Tiga Data Type Dasar

Dalam lecture ini kita belajar:

string
number
boolean

Ketiganya sangat sering digunakan dalam programming.

Secara sederhana:

Mari kita bahas satu per satu.

3. String Data Type

Apa itu String?

String adalah teks.

Contoh:

const name = "Budi";

Nilai:

"Budi"

adalah string.

Contoh lainnya:

const city = "Jakarta";
const message = "Hello World";
const email = "budi@example.com";

Semuanya adalah string.

Jadi gampangnya:

Kalau datanya berupa teks, biasanya kita menggunakan string.

4. Membuat String dengan Single Quote

Kita bisa membuat string menggunakan tanda petik satu:

const name = 'Budi';

Ini adalah string.

Contoh:

const message = 'Hello World';

TypeScript akan mengetahui bahwa:

message → string

5. Membuat String dengan Double Quote

Kita juga bisa menggunakan tanda petik dua:

const name = "Budi";

atau:

const message = "Hello World";

Hasilnya sama-sama string.

Jadi:

const a = 'Hello';
const b = "Hello";

Keduanya adalah string.

Untuk penggunaan normal, tidak ada perbedaan mendasar antara single quote dan double quote. Materi juga menjelaskan bahwa keduanya sama-sama dapat digunakan untuk membuat string.

6. Membuat String dengan Backtick

Selain '...' dan "...", kita juga bisa menggunakan:

`...`

Ini disebut backtick.

Contoh:

const message = `Hello World`;

Ini juga merupakan string.

Jadi ada tiga cara:

const a = 'Hello';
const b = "Hello";
const c = `Hello`;

Ketiganya menghasilkan string.

Tetapi backtick memiliki beberapa kemampuan tambahan yang sangat berguna.

7. Kelebihan Backtick: Multiline String

Misalnya kita ingin membuat teks beberapa baris.

Dengan single quote:

const message = 'Hello
World';

❌ Tidak bisa seperti itu.

Begitu juga:

const message = "Hello
World";

❌ Tidak bisa.

Tetapi dengan backtick:

const message = `Hello
World`;

✅ Bisa.

Hasilnya:

Hello
World

Jadi salah satu kelebihan backtick adalah kita bisa membuat multiline string.

8. Template Literal

Kelebihan lain dari backtick adalah kita bisa memasukkan variable ke dalam string.

Misalnya:

const name = "Budi";

const message = `Hello ${name}`;

Hasil:

Hello Budi

Perhatikan:

${name}

Ini disebut template literal syntax / interpolation.

Artinya:

“Masukkan nilai dari variable name ke dalam string.”

9. Kenapa ${} Berguna?

Tanpa template literal, kita mungkin melakukan concatenation:

const name = "Budi";

const message = "Hello " + name;

Hasil:

Hello Budi

Tetapi dengan backtick:

const name = "Budi";

const message = `Hello ${name}`;

Lebih mudah dibaca.

Kalau banyak variable:

const name = "Budi";
const age = 20;
const city = "Madiun";

const message = `Nama saya ${name}, umur saya ${age}, dan saya tinggal di ${city}.`;

Hasil:

Nama saya Budi, umur saya 20, dan saya tinggal di Madiun.

Ini salah satu alasan backtick sangat populer.

Materi lecture juga menunjukkan bahwa ${variable} dapat digunakan ketika string dibuat menggunakan backtick.

10. Hati-hati: ${} Tidak Bekerja Sama dengan Quote Biasa

Misalnya:

const name = "Budi";

const message = "Hello ${name}";

Yang dihasilkan bukan:

Hello Budi

melainkan:

Hello ${name}

Karena "..." tidak melakukan template interpolation.

Begitu juga:

const message = 'Hello ${name}';

hasilnya tetap:

Hello ${name}

Kalau ingin variable digantikan nilainya, gunakan:

const message = `Hello ${name}`;

Hasil:

Hello Budi

Ini adalah perbedaan penting antara:

'...'   → string biasa
"..."   → string biasa
`...`   → template literal

11. Ringkasan String

const a = 'Hello';
const b = "Hello";
const c = `Hello`;

Semua:

string

Tetapi backtick memiliki kemampuan tambahan:

const name = "Budi";

const message = `Hello ${name}`;

dan:

const message = `Hello
World`;

Jadi:

Single quote  → string
Double quote  → string
Backtick      → string + multiline + interpolation

12. Number Data Type

Sekarang kita masuk ke number.

number digunakan untuk menyimpan angka.

Contoh:

const age = 20;

Type:

number

Contoh lainnya:

const score = 90;
const price = 15000;
const temperature = 30;

Semuanya number.

13. Integer dan Floating Point

Dalam beberapa bahasa programming, ada perbedaan antara:

integer

dan:

floating point

Contohnya:

10
20
100

adalah integer.

Sedangkan:

3.14
10.5
99.99

adalah floating-point.

Namun dalam TypeScript, keduanya menggunakan satu type:

number

Materi secara khusus menjelaskan bahwa TypeScript tidak menggunakan data type terpisah untuk integer dan floating-point; keduanya termasuk number.

14. Contoh Number

const age = 20;
const score = 95;
const price = 100.50;
const pi = 3.14;

Semuanya:

number

Tidak perlu:

integer

atau:

float

seperti di beberapa bahasa lainnya.

Cukup:

number

15. Catatan tentang Number

Transcript menjelaskan bahwa angka dalam TypeScript/JavaScript direpresentasikan sebagai floating-point number.

Untuk level kita sekarang, cukup pahami:

const a = 10;
const b = 10.5;

Keduanya memiliki type:

number

Jadi jangan berpikir:

10     → integer type
10.5   → float type

dalam TypeScript.

Keduanya:

number

16. Boolean Data Type

Sekarang type ketiga:

boolean

Boolean digunakan untuk menyimpan hanya dua kemungkinan:

true

atau:

false

Tidak ada nilai boolean ketiga.

Contoh:

const isStudent = true;

Type:

boolean

Contoh lain:

const isLoggedIn = false;
const isActive = true;
const isAdmin = false;

17. Boolean Sangat Sering Digunakan untuk Pertanyaan Ya/Tidak

Cara paling mudah memahami boolean adalah:

Boolean biasanya digunakan untuk sesuatu yang jawabannya hanya “ya” atau “tidak”.

Misalnya:

Apakah user sudah login?
→ true / false

Apakah user adalah admin?
→ true / false

Apakah umur lebih dari 18?
→ true / false

Apakah password benar?
→ true / false

Contoh:

const isLoggedIn = true;

Artinya:

User sudah login.

Sedangkan:

const isLoggedIn = false;

Artinya:

User belum login.

18. Contoh Boolean dalam Program

Misalnya:

const isLoggedIn = true;

if (isLoggedIn) {
    console.log("Welcome!");
}

Karena isLoggedIn bernilai true, kode di dalam if dijalankan.

Nanti kita akan belajar if lebih detail, tetapi untuk sekarang pahami bahwa boolean sangat erat kaitannya dengan kondisi.

19. Truthy dan Falsy

Sekarang bagian yang sedikit lebih menarik.

JavaScript dan TypeScript memiliki konsep:

Truthy
Falsy

Artinya, tidak semua value yang bukan boolean harus ditulis true atau false untuk digunakan dalam kondisi.

Beberapa value ketika dikonversi menjadi boolean menghasilkan:

false

dan disebut falsy.

Yang menghasilkan:

true

disebut truthy.

Materi lecture memperkenalkan konsep ini dan memberikan contoh 0, empty string, null, dan undefined sebagai falsy.

20. Falsy Values

Untuk materi ini, ingat dulu empat nilai berikut:

0
""
null
undefined

Ketika dikonversi menjadi boolean, hasilnya:

false

Contohnya:

Boolean(0);

hasil:

false

Empty String

Boolean("");

hasil:

false

Karena "" adalah string kosong.

null

Boolean(null);

hasil:

false

undefined

Boolean(undefined);

hasil:

false

21. Truthy Values

Sebaliknya, banyak value lainnya dianggap truthy.

Contoh:

Boolean(100);

hasil:

true

String yang memiliki isi:

Boolean("Hello");

hasil:

true

Bahkan string yang hanya berisi spasi:

Boolean(" ");

juga:

true

karena string tersebut tidak kosong.

Materi menunjukkan perbandingan antara empty string dan non-empty string untuk memperlihatkan perbedaan falsy dan truthy.

22. Kenapa " " Truthy?

Ini sering membingungkan pemula.

Bandingkan:

""

dengan:

" "

Yang pertama:

"" 

benar-benar kosong.

Yang kedua:

" "

memiliki satu karakter, yaitu spasi.

Jadi:

Boolean("");

→ false

tetapi:

Boolean(" ");

→ true

Karena string kedua tidak kosong.

23. Cara Mengingat Truthy/Falsy

Untuk sekarang cukup hafalkan:

Falsy:
0
""
null
undefined

Selain empat nilai tersebut, dalam konteks materi ini anggap value lainnya sebagai truthy.

Nanti ketika membahas data type lain, kita bisa memperluas pembahasan ini.

24. Boolean dari Comparison

Sekarang kita masuk ke konsep penting lainnya:

Hasil operasi perbandingan adalah boolean.

Misalnya:

10 > 15

Pertanyaannya:

Apakah 10 lebih besar dari 15?

Jawabannya:

false

Jadi:

const isGreater = 10 > 15;

Variable:

isGreater

memiliki type:

boolean

dan nilainya:

false

Materi lecture juga menggunakan contoh ini untuk menunjukkan bahwa hasil comparison dapat disimpan dalam variable bertipe boolean.

25. Contoh Comparison yang Menghasilkan true

Sekarang:

const isGreater = 10 < 15;

Pertanyaannya:

Apakah 10 lebih kecil dari 15?

Jawabannya:

true

Maka:

isGreater → true

dan:

type → boolean

26. Contoh Lain

const a = 10;
const b = 20;

const result = a < b;

Karena:

10 < 20

benar, maka:

result → true

Type:

boolean

Contoh:

const age = 15;

const isAdult = age >= 18;

Hasil:

false

Karena 15 tidak lebih besar atau sama dengan 18.

27. Operator Perbandingan yang Sering Digunakan

Beberapa operator yang akan sering kamu temui:

Contoh:

10 > 5

→ true

10 < 5

→ false

10 === 10

→ true

10 !== 10

→ false

Semuanya menghasilkan:

boolean

28. Contoh Program Lengkap

Sekarang kita gabungkan ketiga type yang kita pelajari.

const name = "Budi";
const age = 20;
const isStudent = true;

Kita punya:

name
↓
"Budi"
↓
string

age
↓
20
↓
number

isStudent
↓
true
↓
boolean

29. Contoh yang Lebih Realistis

Misalnya kita membuat data user:

const username = "Budi";
const age = 20;
const isActive = true;

Artinya:

username → string
age      → number
isActive → boolean

Kemudian:

const isAdult = age >= 18;

Karena:

20 >= 18

hasilnya:

true

Jadi:

isAdult → boolean

Sekarang kita memiliki:

username
   ↓
"Budi"
   ↓
string

age
   ↓
20
   ↓
number

isActive
   ↓
true
   ↓
boolean

isAdult
   ↓
true
   ↓
boolean

30. Hubungannya dengan Lecture 3

Ini penting supaya materi kita nyambung.

Di Lecture 3 kita belajar:

let num = 100;

TypeScript melakukan type inference:

100
↓
number

Di Lecture 4 kita sekarang mengenal type tersebut secara lebih detail.

Misalnya:

let name = "Budi";

TypeScript:

"Budi"
↓
string

Kemudian:

let age = 20;

TypeScript:

20
↓
number

Kemudian:

let isStudent = true;

TypeScript:

true
↓
boolean

Jadi Lecture 4 sebenarnya memperkenalkan jenis-jenis type yang bisa dimiliki variable.

31. Kenapa Type Ini Penting?

Karena TypeScript menggunakan informasi type untuk membantu kita menemukan kesalahan.

Misalnya:

let age = 20;

TypeScript tahu:

age → number

Kalau kita melakukan:

age = "twenty";

TypeScript bisa memberitahu:

string tidak bisa digunakan
sebagai number

Ini adalah salah satu manfaat utama sistem type TypeScript: kesalahan bisa diketahui lebih awal saat development.

32. Kesalahan yang Sering Dilakukan Pemula

❌ Menganggap semua angka punya type berbeda

Jangan berpikir:

10 → integer
3.14 → float

Dalam TypeScript keduanya:

number

❌ Menggunakan quote untuk angka

const age = "20";

Ini adalah:

string

bukan number.

Sedangkan:

const age = 20;

adalah:

number

Perhatikan perbedaannya:

20

vs

"20"

Yang pertama angka, yang kedua teks.

❌ Menganggap "false" adalah boolean

Ini:

const value = "false";

adalah:

string

Bukan boolean.

Boolean yang sebenarnya:

const value = false;

❌ Lupa bahwa ${} membutuhkan backtick

Salah:

const name = "Budi";

const message = "Hello ${name}";

Hasil:

Hello ${name}

Benar:

const message = `Hello ${name}`;

Hasil:

Hello Budi

33. Perbedaan Tiga Type Utama

Cara paling mudah mengingatnya:

String = teks

const name = "Budi";

Number = angka

const age = 20;

Boolean = benar/salah

const isStudent = true;

Visualisasinya:

          DATA TYPE
              │
     ┌────────┼─────────┐
     ↓        ↓         ↓
  string    number    boolean
     │        │         │
   "Budi"     20       true
   "Hello"   3.14      false

34. Ringkasan Truthy/Falsy

             Boolean(...)
                  │
        ┌─────────┴─────────┐
        ↓                   ↓
     truthy                falsy
        │                   │
      true                 false

Untuk materi sekarang:

Falsy:
0
""
null
undefined

Contoh:

Boolean(0);          // false
Boolean("");         // false
Boolean(null);       // false
Boolean(undefined);  // false

Sedangkan:

Boolean(100);        // true
Boolean("Hello");    // true
Boolean(" ");        // true

35. Ringkasan Comparison

Perbandingan menghasilkan boolean:

10 > 5

↓

true

Sedangkan:

10 > 20

↓

false

Sehingga kita bisa melakukan:

const result = 10 > 5;

Type result:

boolean

36. Cheat Sheet Lecture 4

37. Inti Lecture 4

Kalau harus diringkas menjadi satu gambar mental:

VARIABLE
   │
   └── memiliki VALUE
            │
            └── memiliki TYPE
                    │
          ┌─────────┼─────────┐
          ↓         ↓         ↓
       string     number    boolean
          │         │         │
       "Budi"      20        true
       "Hello"     3.14      false

Dan ada dua hal tambahan yang penting:

Comparison
    ↓
boolean

contoh:

10 > 5

→ true

serta:

Non-boolean value
       ↓
Boolean(...)
       ↓
true / false
       ↓
truthy / falsy

🎯 Yang wajib kamu kuasai dari Lecture 4

Sebelum lanjut ke lecture berikutnya, pastikan kamu sudah bisa menjawab ini:

1. Apa itu string?
2. Apa perbedaan 'Hello', "Hello", dan `Hello`?
3. Kenapa template literal menggunakan backtick?
4. Apa fungsi ${variable}?
5. Apa itu number?
6. Apakah 10 dan 10.5 memiliki type yang berbeda di TypeScript?
7. Apa itu boolean?
8. Apa perbedaan true dengan "true"?
9. Apa itu truthy dan falsy?
10. Sebutkan empat falsy value yang dibahas di lecture ini.
11. Apa hasil dari 10 > 5?
12. Apa type dari hasil 10 > 5?

Kalau 12 pertanyaan ini sudah terasa masuk akal, berarti fondasi Lecture 4 sudah cukup kuat.

Dan satu hubungan penting untuk dibawa ke lecture berikutnya:

const age = 20;

TypeScript bisa menebak bahwa:

age → number

Sedangkan nanti kita akan belajar bagaimana kita sendiri menentukan type secara eksplisit, misalnya:

const age: number = 20;

Itulah yang akan membawa kita ke pembahasan Type Assignment dan Type Inference. Materi sumber juga menyebut dua topik tersebut sebagai fokus lecture berikutnya.