📘 Lecture 5 — Type Annotation & Type Inference

1. Gambaran besar lecture ini

Di lecture ini ada dua konsep utama:

1. Type Annotation → kita secara eksplisit memberi tahu TypeScript tipe data apa yang digunakan.
2. Type Inference → TypeScript secara otomatis menebak tipe data berdasarkan nilai yang kita berikan.

Sederhananya:

Type Annotation: “TypeScript, variabel ini tipenya number.”

Type Inference: “Oh, kamu kasih nilai 10? Berarti saya tahu ini number.”

Materi juga menunjukkan bagaimana TypeScript mencegah kita memasukkan tipe data yang salah ke dalam variabel atau parameter function.

2. Masalah pertama: Function tanpa tipe data

Misalnya kita punya function:

function sum(num1, num2) {
    return num1 + num2;
}

Tujuannya jelas:

Function sum() digunakan untuk menjumlahkan dua angka.

Kita kemudian memanggil:

console.log(sum(12, 13));

Hasilnya:

25

Sampai sini semuanya benar.

3. Tapi ada masalah…

Karena kita belum menentukan tipe data num1 dan num2, kita bisa memasukkan tipe data apa saja.

Misalnya:

console.log(sum("12", 13));

Kelihatannya aneh, kan?

Kita ingin menjumlahkan:

12 + 13

tetapi yang kita berikan sebenarnya:

"12" + 13

Yang pertama adalah string, sedangkan yang kedua adalah number.

JavaScript akan memperlakukan operasi + tersebut sebagai penggabungan string.

Hasilnya bisa menjadi:

"1213"

bukan:

25

Materi menunjukkan bahwa karena parameter belum diberi tipe, kita dapat memasukkan tipe nilai yang berbeda dan menghasilkan perilaku yang tidak diinginkan.

4. Nah, di sinilah TypeScript berguna

Kita bisa mengatakan:

“num1 hanya boleh menerima number.”

Caranya:

function sum(num1: number, num2: number) {
    return num1 + num2;
}

Perhatikan:

num1: number

dan:

num2: number

Bagian:

: number

itulah yang disebut type annotation.

5. Apa itu Type Annotation?

Type annotation adalah ketika kita secara eksplisit menentukan tipe data.

Contoh:

let age: number = 20;

Artinya:

age harus memiliki tipe number.

Contoh lain:

let name: string = "Budi";

Artinya:

name harus memiliki tipe string.

Dan:

let isLogin: boolean = true;

Artinya:

isLogin harus memiliki tipe boolean.

6. Type Annotation pada parameter function

Ini juga bisa dilakukan pada parameter function.

Contoh:

function sum(num1: number, num2: number) {
    return num1 + num2;
}

Sekarang kita panggil:

sum(12, 13);

✅ Tidak masalah.

Karena:

12 → number
13 → number

Sesuai dengan aturan function.

Tetapi kalau:

sum("12", 13);

TypeScript akan memberikan error.

Karena:

"12" → string
13   → number

sementara function meminta:

num1 → number
num2 → number

Materi menekankan bahwa TypeScript akan memberikan compile-time error ketika kita mencoba memberikan tipe yang tidak sesuai.

7. Kenapa ini sangat berguna?

Bayangkan function kita digunakan di aplikasi besar.

Misalnya:

function calculatePrice(price: number, quantity: number) {
    return price * quantity;
}

Kita ingin:

calculatePrice(10000, 2);

Tetapi programmer lain tidak sengaja menulis:

calculatePrice("10000", 2);

TypeScript akan langsung memperingatkan kita.

Jadi bug bisa ditemukan sebelum program dijalankan.

Inilah salah satu keuntungan TypeScript yang dibahas dalam lecture.

8. Type Annotation pada variable

Bukan hanya parameter function.

Variable juga bisa diberikan type annotation.

Contoh:

let n1: number = 10;
let n2: number = 20;

Kita mengatakan secara eksplisit:

n1 → number
n2 → number

Kemudian:

sum(n1, n2);

Tidak ada masalah karena keduanya adalah number.

9. Tapi ternyata kita tidak selalu perlu menulis Type Annotation

Nah, sekarang masuk ke konsep yang sangat penting:

Type Inference

Misalnya:

let n1 = 10;

Kita tidak menulis:

let n1: number = 10;

Tetapi TypeScript bisa melihat:

10

dan mengetahui bahwa:

10 → number

Maka TypeScript secara otomatis menyimpulkan:

n1 → number

Inilah yang disebut:

Type Inference

Materi menjelaskan bahwa TypeScript secara otomatis menginfer tipe berdasarkan nilai yang digunakan untuk menginisialisasi variable.

10. Analogi sederhana

Bayangkan kamu bilang kepada teman:

“Ini apel.”

Kamu tidak perlu berkata:

“Ini adalah buah dengan tipe apel.”

Temanmu bisa melihat bentuknya dan langsung tahu.

Begitu juga TypeScript.

Kita menulis:

let age = 20;

TypeScript melihat:

20

dan berkata:

“Oh, ini number.”

Jadi:

let age = 20;

kurang lebih dipahami TypeScript sebagai:

let age: number = 20;

Bedanya, pada kasus kedua kita menulis tipe tersebut secara eksplisit.

11. Contoh Type Inference lainnya

String

let name = "Budi";

TypeScript mengetahui:

name → string

Number

let age = 20;

TypeScript mengetahui:

age → number

Boolean

let isActive = true;

TypeScript mengetahui:

isActive → boolean

Jadi TypeScript cukup pintar untuk mengetahui tipe dari nilai awal variable.

12. Hal penting: tipe yang sudah ditentukan tidak bisa sembarangan diubah

Ini bagian yang sangat penting.

Misalnya:

let n1 = 10;

TypeScript menginfer:

n1 → number

Kemudian kita melakukan:

n1 = 20;

✅ Boleh.

Karena:

20 → number

Masih sesuai dengan tipe n1.

Tetapi:

n1 = "hello";

❌ Error.

Kenapa?

Karena:

n1 → number
"hello" → string

Kita mencoba memasukkan string ke variable yang sudah dianggap sebagai number.

Materi menjelaskan bahwa setelah tipe variable diinfer dan ditetapkan, kita tidak bisa menggantinya dengan tipe lain.

13. Visualisasikan seperti kotak

Anggap variable adalah sebuah kotak.

Ketika kita menulis:

let n1 = 10;

TypeScript memberikan label:

┌──────────────┐
│ n1           │
│ type: number │
└──────────────┘

Kita bisa memasukkan:

n1 = 20;

karena 20 adalah number.

Tapi:

n1 = "hello";

ditolak.

Karena:

┌──────────────┐
│ n1           │
│ type: number │
└──────────────┘

"hello" → string ❌

14. Hal yang sama berlaku untuk String

Misalnya:

let st = "hello";

TypeScript menginfer:

st → string

Maka:

st = "world";

✅ Boleh.

Tetapi:

st = 100;

❌ Tidak boleh.

Karena:

st → string
100 → number

Materi juga memberikan contoh ini untuk menunjukkan bahwa type inference berlaku pada berbagai tipe data, bukan hanya number.

15. Type Annotation vs Type Inference

Sekarang kita bandingkan.

Type Annotation

Kita menentukan sendiri:

let age: number = 20;

Kita mengatakan:

“Age harus number.”

Type Inference

Kita membiarkan TypeScript menentukan:

let age = 20;

TypeScript mengatakan:

“Karena nilainya 20, berarti age adalah number.”

16. Apakah Type Annotation lebih baik?

Tidak selalu.

Misalnya:

let age: number = 20;

Sebenarnya bisa saja cukup:

let age = 20;

Karena TypeScript sudah bisa mengetahui bahwa age adalah number.

Materi secara khusus mengatakan bahwa pada contoh n1 dan n2, annotation sebenarnya tidak diperlukan karena TypeScript sudah bisa melakukan inference.

Jadi biasanya kita tidak perlu menulis hal yang sudah bisa diketahui TypeScript.

17. TypeScript vs JavaScript

Lecture ini kemudian membandingkan TypeScript dengan JavaScript.

JavaScript

Misalnya:

let n1 = 10;

Kemudian:

n1 = "hello";

JavaScript mengizinkan.

Tipe variable bisa berubah berdasarkan nilai yang diberikan.

Materi menyebut JavaScript sebagai dynamically typed.

TypeScript

Sedangkan:

let n1 = 10;

TypeScript menganggap:

n1 → number

Kemudian:

n1 = "hello";

❌ Error.

Karena tipe n1 sudah ditentukan sebagai number.

Itulah sebabnya materi menyebut TypeScript sebagai strongly typed, sedangkan JavaScript sebagai dynamically typed.

18. Hati-hati memahami “strongly typed”

Untuk level lecture ini, pahami sederhananya seperti ini:

TypeScript membantu kita menjaga agar variable digunakan sesuai tipe yang sudah ditentukan.

Contoh:

let age = 20;

age = 25;       // ✅
age = "twenty"; // ❌

Karena age sudah diketahui sebagai number.

19. Type Annotation pada Boolean

Materi kemudian memberikan contoh parameter tambahan:

function sum(
    num1: number,
    num2: number,
    isPrint: boolean
) {
    // ...
}

Di sini:

isPrint: boolean

berarti isPrint hanya boleh menerima:

true

atau:

false

Misalnya:

sum(10, 20, true);

Jika isPrint bernilai true, program mencetak hasil sum.

Jika:

sum(10, 20, false);

maka pesan tersebut tidak dicetak.

20. Type Annotation pada String

Materi juga membuat variable message dengan tipe:

let message: string = "Sum is equal";

Artinya:

message → string

Maka:

message = "Hello";

✅ boleh.

Tetapi:

message = 100;

❌ error.

Karena 100 adalah number, sedangkan message adalah string.

21. Jadi ada dua cara menentukan tipe

Ini inti lecture-nya.

Cara 1 — Explicit / Annotation

Kita sendiri yang menulis tipe:

let age: number = 20;

Cara 2 — Inference

TypeScript menyimpulkan:

let age = 20;

TypeScript:

20 → number
age → number

22. Analogi paling gampang

Bayangkan kamu punya beberapa kotak.

Kotak number

┌──────────────┐
│    NUMBER    │
├──────────────┤
│ 10           │
│ 20           │
│ 30           │
└──────────────┘

Kotak string

┌──────────────┐
│    STRING    │
├──────────────┤
│ "hello"      │
│ "Budi"       │
└──────────────┘

Kalau kamu membuat:

let age = 20;

TypeScript otomatis memasukkan age ke konsep kotak number.

Kemudian kamu mencoba:

age = "Budi";

TypeScript berkata:

❌ Tidak boleh. age sudah bertipe number.

23. Kenapa TypeScript melakukan ini?

Tujuannya adalah mengurangi bug.

Bayangkan kita punya:

function sum(num1: number, num2: number) {
    return num1 + num2;
}

Kita sebagai programmer sudah menetapkan kontrak:

sum()
↓
harus menerima number
+
harus menerima number

Kalau ada yang memberikan:

sum("10", 20);

TypeScript bisa langsung memberi tahu:

❌ Ada masalah. Parameter pertama harus number.

Jadi kita bisa memperbaikinya sebelum aplikasi benar-benar dijalankan.

24. Kesalahan yang sering dilakukan pemula

❌ Kesalahan 1

Menulis:

let age: number = "20";

Salah karena:

"20" → string
20   → number

Kalau ingin number:

let age: number = 20;

❌ Kesalahan 2

Mengira "10" sama dengan 10.

Tidak sama.

"10" // string
10   // number

Ini sangat penting.

❌ Kesalahan 3

Mengubah tipe variable

let age = 20;

age = "hello";

❌ Tidak diperbolehkan karena age sudah diinfer sebagai number.

❌ Kesalahan 4

Menulis annotation yang tidak diperlukan

Misalnya:

let age: number = 20;

Padahal:

let age = 20;

sudah cukup untuk kasus sederhana seperti ini karena TypeScript dapat melakukan inference.

25. Ringkasan Lecture 5

Kalau kamu hanya ingin mengingat inti lecture, ingat tabel ini:

🧠 Contoh lengkap

function sum(
    num1: number,
    num2: number,
    isPrint: boolean,
    message: string
) {
    const result = num1 + num2;

    if (isPrint) {
        console.log(message + " " + result);
    }

    return result;
}

const n1 = 10;
const n2 = 20;

sum(n1, n2, true, "Sum is equal");

Perhatikan tipe-tipe yang ada:

n1
↓
10
↓
number

n2
↓
20
↓
number

Sedangkan function secara eksplisit mengatakan:

num1    → number
num2    → number
isPrint → boolean
message → string

Jadi TypeScript dapat menjaga agar data yang masuk sesuai dengan yang kita inginkan.

⭐ Hal paling penting dari Lecture 5

Kalau saya sederhanakan menjadi 3 kalimat, maka:

1. Type Annotation adalah ketika kita menulis tipe secara eksplisit, misalnya let age: number = 20.

2. Type Inference adalah ketika TypeScript otomatis mengetahui tipe berdasarkan nilai awal, misalnya let age = 20 → TypeScript tahu age adalah number.

3. Setelah TypeScript menetapkan tipe sebuah variable, kita tidak bisa sembarangan memasukkan tipe lain ke variable tersebut.

Dan menurut saya, bagian Type Inference adalah konsep yang paling penting untuk benar-benar kamu pahami sebelum lanjut ke lecture berikutnya.