Lesson 1 — Apa Itu TypeScript?

1. TypeScript itu apa?

Cara paling mudah memahaminya:

TypeScript adalah JavaScript yang ditambahkan fitur-fitur tambahan, terutama sistem tipe (type system).

Materi menyebut TypeScript sebagai superset dari JavaScript.

Apa maksud superset?

Bayangkan seperti ini:

        JavaScript
     ┌───────────────┐
     │               │
     │   JavaScript  │
     │               │
     │   + fitur TS  │
     │               │
     └───────────────┘
        TypeScript

Artinya, TypeScript memiliki fitur-fitur JavaScript, kemudian menambahkan kemampuan lain.

Contohnya nanti kita akan bertemu dengan:

interface User {
    name: string;
    age: number;
}

interface adalah salah satu fitur yang dibahas dalam materi sebagai fitur tambahan TypeScript.

2. Kenapa kita membutuhkan TypeScript?

Pertanyaan pentingnya:

“Kalau sudah ada JavaScript, kenapa harus belajar TypeScript?”

Jawabannya adalah karena TypeScript membantu kita membuat kode yang:

• lebih mudah ditulis,
• lebih bersih,
• lebih mudah menemukan kesalahan,
• dan mengurangi kemungkinan bug.

Bagian paling penting di sini adalah:

TypeScript membantu kita menemukan kesalahan lebih awal.

Bukan menunggu program dijalankan terlebih dahulu.

3. JavaScript vs TypeScript

Sekarang kita masuk ke konsep yang sangat penting.

JavaScript

JavaScript bersifat dynamically typed.

Contoh:

let value = 100;

Awalnya:

value → number

Kemudian kita bisa melakukan:

value = "hello";

Sekarang:

value → string

Jadi tipe data value dapat berubah berdasarkan nilai yang diberikan kepadanya.

Materi menjelaskan bahwa inilah salah satu karakteristik dynamic typing pada JavaScript.

4. Bagaimana dengan TypeScript?

TypeScript memberikan sistem tipe yang lebih ketat.

Contohnya:

let value = 100;

value = "hello";

TypeScript akan memberikan error karena value sudah dianggap sebagai number.

Secara sederhana:

value = 100
   ↓
number

value = "hello"
   ↓
❌ Error

Materi menjelaskan bahwa ketika sebuah variabel di TypeScript telah memiliki tipe number, kita tidak bisa begitu saja memberikan nilai string kepadanya.

5. Kita bisa menentukan tipe secara eksplisit

Ini salah satu hal terpenting di TypeScript.

Misalnya:

let age: number = 20;

Bagian:

: number

memberitahu TypeScript:

“Variabel age hanya boleh menyimpan nilai bertipe number.”

Contoh lain:

let name: string = "Budi";
let isActive: boolean = true;

Artinya:

name      → string
age       → number
isActive  → boolean

Materi menjelaskan bahwa TypeScript memungkinkan kita menentukan tipe data variabel secara eksplisit.

6. Kenapa ini berguna?

Bayangkan kita punya fungsi:

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

Kita ingin:

add(3, 5);

Hasilnya:

8

Tetapi karena JavaScript bersifat dynamic, seseorang bisa melakukan:

add("3", "5");

Yang terjadi?

Karena keduanya adalah string, operator + melakukan penggabungan string.

Hasilnya:

"35"

bukan:

8

Materi menggunakan contoh ini untuk menunjukkan bagaimana dynamic typing dapat menyebabkan hasil yang tidak diharapkan.

7. TypeScript dapat mencegah kesalahan tersebut

Dengan TypeScript kita bisa mengatakan:

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

Sekarang TypeScript tahu:

num1 → number
num2 → number

Maka:

add(3, 5);

✅ boleh.

Tetapi:

add("3", "5");

❌ error.

Begitu juga:

add(true, false);

❌ error.

Karena kita sudah menentukan bahwa parameter tersebut harus berupa number.

8. Jadi TypeScript sebenarnya membantu kita kapan?

Ini konsep yang sangat penting.

Tanpa TypeScript:

Tulis kode
   ↓
Jalankan program
   ↓
Program bermasalah
   ↓
Cari bug
   ↓
Perbaiki

Dengan TypeScript:

Tulis kode
   ↓
TypeScript mengecek tipe
   ↓
❌ Ada kesalahan
   ↓
Perbaiki lebih awal
   ↓
Compile
   ↓
Jalankan

Jadi keuntungan utamanya bukan sekadar “ada tipe”.

Tetapi:

Kita bisa menemukan kesalahan lebih awal dalam proses development.

Materi secara eksplisit menyebut bahwa strong typing membantu menemukan error dan memperbaiki bug pada tahap lebih awal.

9. Tapi ada satu hal penting: Browser tidak menjalankan TypeScript langsung

Nah, ini bagian yang sering membuat pemula bingung.

Kita menulis:

let age: number = 20;

Browser tidak secara langsung menjalankan kode TypeScript tersebut.

Menurut materi, browser dan Node.js menjalankan JavaScript, bukan TypeScript secara langsung.

Lalu bagaimana?

Kita menggunakan TypeScript compiler.

Alurnya:

TypeScript
    │
    │ compile
    ▼
JavaScript
    │
    ▼
Browser / Node.js

Jadi kita menulis:

let age: number = 20;

Kemudian TypeScript compiler mengubahnya menjadi JavaScript.

Hasil akhirnya bisa berupa JavaScript seperti:

let age = 20;

Kemudian JavaScript tersebut baru dijalankan oleh browser atau Node.js.

10. Kalau begitu, bagaimana fitur TypeScript bisa bekerja?

Pertanyaan bagus berikutnya:

“Kalau JavaScript tidak memiliki fitur TypeScript, bagaimana TypeScript bisa menghasilkan JavaScript?”

Jawabannya:

TypeScript compiler akan menerjemahkan fitur TypeScript menjadi JavaScript yang sesuai.

Materi menjelaskan bahwa compiler menggunakan fitur atau logika JavaScript yang sudah tersedia untuk menghasilkan perilaku yang sama.

Jadi bukan berarti browser tiba-tiba bisa memahami TypeScript.

Browser tetap hanya menerima JavaScript.

Contoh konsepnya:

Kode TypeScript
      │
      │ TypeScript Compiler
      ▼
Kode JavaScript
      │
      ▼
Browser / Node.js

11. TypeScript bukan cuma bahasa

Materi juga memberikan poin menarik:

TypeScript bukan hanya programming language, tetapi juga merupakan tool/compiler.

Compiler bertugas menerjemahkan:

TypeScript → JavaScript

Misalnya kita memiliki file:

app.ts

Setelah di-compile, kita mendapatkan:

app.js

Yang kemudian dapat dijalankan oleh JavaScript runtime.

12. Kelebihan TypeScript

Dari materi yang kamu kirim, ada beberapa kelebihan utama.

① Bisa menentukan tipe data

Contoh:

let age: number = 20;

Kita bisa memberi tahu TypeScript data apa yang seharusnya disimpan.

② Membantu menemukan error lebih awal

Contoh:

let age: number = 20;

age = "twenty";

TypeScript bisa mendeteksi masalah tersebut sebelum kode dijalankan.

③ Memiliki fitur tambahan

TypeScript menyediakan fitur tambahan yang membuat beberapa logic lebih mudah ditulis dibandingkan jika menggunakan JavaScript saja.

④ Bisa dikonfigurasi

TypeScript compiler juga sangat configurable.

Artinya kita bisa mengatur bagaimana compiler bekerja sesuai kebutuhan project.

13. Kekurangan TypeScript

Materi menyebut satu kekurangan utama:

Ada langkah tambahan untuk melakukan compile TypeScript menjadi JavaScript.

Jadi JavaScript:

JavaScript
   ↓
Runtime

Sedangkan TypeScript:

TypeScript
   ↓
Compile
   ↓
JavaScript
   ↓
Runtime

Itulah overhead tambahan yang disebut sebagai disadvantage TypeScript dalam materi.

14. Kesimpulan paling sederhana

Kalau harus diringkas menjadi satu gambaran:

                 TYPESCRIPT
                     │
          ┌──────────┴──────────┐
          │                     │
     JavaScript            Fitur tambahan
          │                     │
          └──────────┬──────────┘
                     │
              Type Checking
                     │
                     ▼
               TS Compiler
                     │
                     ▼
                JavaScript
                     │
             ┌───────┴───────┐
             ▼               ▼
          Browser           Node.js

Jadi jangan menganggap TypeScript sebagai pengganti JavaScript sepenuhnya.

Lebih tepatnya:

Kita menulis kode menggunakan TypeScript, kemudian TypeScript compiler menghasilkan JavaScript yang bisa dijalankan oleh JavaScript runtime.

Dan alasan utama kita menggunakannya adalah type system + fitur tambahan yang membantu menghasilkan kode yang lebih aman dan lebih mudah dikelola.

🧠 Yang perlu kamu ingat dari Lesson 1

Cukup kuasai 5 hal ini dulu:

1. TypeScript adalah superset JavaScript.
2. TypeScript punya fitur tambahan, termasuk sistem tipe.
3. JavaScript bersifat dynamically typed, sedangkan TypeScript memungkinkan penggunaan typing yang lebih ketat.
4. Browser/Node.js tidak menjalankan TypeScript secara langsung → TypeScript harus di-compile menjadi JavaScript.
5. Keuntungan utamanya adalah mendeteksi error lebih awal dan membantu mengurangi bug.

Kalau 5 poin ini sudah benar-benar kamu pahami, fondasi untuk masuk ke materi berikutnya sudah bagus.