Lesson 2 — Instalasi TypeScript

1. Kenapa TypeScript harus di-install?

Di lesson sebelumnya kita sudah tahu bahwa:

TypeScript
    ↓
    compile
    ↓
JavaScript
    ↓
Browser / Node.js

Browser tidak menjalankan TypeScript secara langsung. TypeScript harus diubah menjadi JavaScript terlebih dahulu.

Nah, supaya kita bisa melakukan proses tersebut di komputer kita, kita membutuhkan TypeScript Compiler.

Compiler inilah yang nantinya akan melakukan:

app.ts
  ↓
TypeScript Compiler
  ↓
app.js

2. Apa itu TypeScript Compiler?

Compiler adalah program yang menerjemahkan kode dari satu bentuk ke bentuk lain.

Dalam kasus TypeScript:

TypeScript → JavaScript

Contohnya kita punya:

let message: string = "Hello";

Compiler akan menghasilkan JavaScript yang bisa dijalankan oleh JavaScript runtime.

Dalam materi, instalasi TypeScript juga memasang TypeScript Compiler dan komponen yang diperlukan agar TypeScript dapat digunakan.

3. Kenapa kita membutuhkan Node.js?

Nah, ini sering membingungkan pemula.

Mungkin muncul pertanyaan:

“Kita sedang belajar TypeScript. Kenapa malah harus install Node.js?”

Jawabannya:

Dalam materi ini, Node.js dibutuhkan terutama karena kita membutuhkan npm.

Alurnya:

Node.js
   ↓
npm
   ↓
Install TypeScript
   ↓
TypeScript Compiler (tsc)

Ketika Node.js dipasang, npm (Node Package Manager) juga ikut dipasang.

Jadi untuk mengikuti setup pada materi:

Node.js
   ↓
mendapatkan npm
   ↓
npm digunakan untuk install TypeScript

Bukan berarti kita sedang belajar Node.js.

Materinya secara eksplisit menjelaskan bahwa Node.js dipasang agar kita mendapatkan Node Package Manager, bukan karena kita akan menggunakan Node.js sebagai fokus pembelajaran.

4. Apa itu npm?

npm adalah singkatan dari:

Node Package Manager

Sederhananya, npm adalah alat untuk mengelola package JavaScript/Node ecosystem.

Misalnya kita ingin memasang TypeScript.

Kita bisa menggunakan:

npm install -g typescript

Secara konsep:

npm
 │
 ├── install
 │
 ├── -g
 │
 └── typescript

Artinya kita meminta npm:

“Install package TypeScript secara global.”

5. Apa arti -g?

Perhatikan command ini:

npm install -g typescript

Ada bagian:

-g

-g berarti:

global

Jadi TypeScript di-install secara global pada komputer.

Tujuannya dalam materi adalah agar command TypeScript dapat digunakan dari berbagai lokasi di komputer.

6. Cek apakah npm sudah ter-install

Setelah Node.js ter-install, kita bisa membuka:

Windows

Command Prompt

macOS

Terminal

Kemudian:

npm --version

atau:

npm -v

Kalau muncul nomor versi, berarti npm sudah tersedia.

Misalnya:

10.x.x

Artinya:

Node.js
   ↓
npm tersedia
   ↓
Kita bisa install TypeScript

Materi menggunakan pengecekan versi npm untuk memastikan npm sudah terpasang.

7. Install TypeScript

Setelah npm tersedia, kita menjalankan:

npm install -g typescript

Mari kita pecah:

npm
│
├── install
│      → perintah untuk install package
│
├── -g
│      → install secara global
│
└── typescript
       → package yang ingin di-install

Setelah selesai, TypeScript Compiler akan tersedia di komputer kita.

8. Apa itu tsc?

Ini sangat penting.

tsc adalah command untuk:

TypeScript Compiler

Jadi kalau kita mengetik:

tsc

kita sedang memanggil TypeScript Compiler.

Materi kemudian menggunakan:

tsc app.ts

untuk meng-compile file TypeScript bernama app.ts.

9. Sekarang kita buat project

Misalkan struktur folder kita seperti ini:

typescript-basic/
│
├── index.html
├── style.css
└── app.ts

File yang baru adalah:

app.ts

Kenapa .ts?

Karena:

.ts → TypeScript

Jadi ketika melihat:

app.ts

kita langsung tahu:

Ini adalah file TypeScript.

Materi menggunakan extension .ts untuk file TypeScript.

10. Menulis TypeScript pertama

Di dalam app.ts, kita bisa menulis:

console.log("Hello World");

Perhatikan bahwa ini kelihatannya sama seperti JavaScript.

Dan memang demikian.

Karena:

TypeScript adalah superset JavaScript.

Jadi banyak kode JavaScript yang valid juga merupakan kode TypeScript.

11. Apakah browser bisa membaca app.ts?

Tidak langsung.

Ini sangat penting.

Jangan melakukan:

<script src="app.ts"></script>

Karena browser mengharapkan JavaScript.

Yang kita lakukan adalah:

app.ts
  ↓
tsc
  ↓
app.js
  ↓
Browser

12. Compile app.ts

Buka terminal dan masuk ke folder project.

Misalnya:

cd desktop/typescript-basic

Kemudian jalankan:

tsc app.ts

tsc:

TypeScript Compiler

app.ts:

file yang ingin kita compile

Sehingga:

tsc app.ts

berarti:

“TypeScript Compiler, tolong compile file app.ts.”

13. Apa yang terjadi setelah tsc app.ts?

Sebelum compile:

typescript-basic/
│
├── index.html
├── style.css
└── app.ts

Setelah:

tsc app.ts

akan muncul:

typescript-basic/
│
├── index.html
├── style.css
├── app.ts
└── app.js

Perhatikan:

app.ts
   ↓
app.js

Itulah proses compile.

Materi menunjukkan bahwa setelah menjalankan tsc app.ts, file app.js dibuat.

14. Kenapa namanya menjadi app.js?

Karena compiler menerjemahkan:

TypeScript

menjadi:

JavaScript

File sumber:

app.ts

menghasilkan:

app.js

Jadi:

.ts → .js

15. Hubungkan app.js ke HTML

Sekarang browser tidak perlu tahu tentang app.ts.

Kita masukkan:

<script src="app.js"></script>

ke dalam index.html.

Misalnya:

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript</title>
</head>
<body>

    <h1>TypeScript Tutorial</h1>

    <script src="app.js"></script>
</body>
</html>

Perhatikan:

<script src="app.js"></script>

bukan:

<script src="app.ts"></script>

Karena browser menjalankan JavaScript hasil compile.

16. Sekarang alurnya lengkap

Kita punya:

app.ts

isinya:

console.log("Hello World");

Kemudian:

tsc app.ts

menghasilkan:

app.js

Lalu:

<script src="app.js"></script>

Browser membaca:

app.js

dan akhirnya:

Console:
Hello World

Jadi seluruh prosesnya:

       KITA TULIS
           │
           ▼
        app.ts
           │
           │ tsc app.ts
           ▼
        app.js
           │
           ▼
        Browser
           │
           ▼
     console.log()
           │
           ▼
      Hello World

17. Kalau app.ts berubah bagaimana?

Misalnya awalnya:

console.log("Hello World");

Kemudian kita ubah menjadi:

console.log("This is my first TypeScript code");

Apakah browser otomatis menggunakan perubahan tersebut?

Belum.

Karena yang dibaca browser adalah:

app.js

bukan:

app.ts

Maka kita harus compile lagi:

tsc app.ts

Kemudian:

app.ts
   ↓
tsc
   ↓
app.js diperbarui
   ↓
Browser membaca app.js

Materi mendemonstrasikan proses ini: setelah app.ts diubah, tsc app.ts dijalankan lagi sehingga app.js ikut diperbarui.

18. Ini konsep yang SANGAT penting

Coba hafalkan hubungan ini:

.ts = source TypeScript
.js = hasil compile JavaScript
tsc = TypeScript Compiler

Jadi:

tsc app.ts

bisa kamu baca sebagai:

“Compile app.ts menggunakan TypeScript Compiler.”

19. Jangan sampai tertukar

Ada 3 hal berbeda:

app.ts

Ini:

kode yang kita tulis

tsc

Ini:

alat/compiler

app.js

Ini:

hasil compile yang bisa dijalankan browser

Gambarnya:

┌──────────┐
│  app.ts  │
│ TypeScript│
└────┬─────┘
     │
     │ tsc
     ▼
┌──────────┐
│  app.js  │
│JavaScript│
└────┬─────┘
     │
     ▼
┌──────────┐
│ Browser  │
└──────────┘

20. Bagaimana dengan VS Code?

Materi menggunakan VS Code sebagai editor untuk membuat project dan file .ts.

Misalnya:

typescript-basic/
├── index.html
├── style.css
└── app.ts

Kita bisa membuka terminal langsung dari VS Code juga.

Jadi sebenarnya tidak harus selalu membuka Command Prompt secara terpisah.

Di VS Code biasanya kita bisa menggunakan:

Terminal → New Terminal

Kemudian:

tsc app.ts

Hasilnya tetap sama.

21. Bagaimana dengan Live Server?

Materi juga menggunakan Live Server untuk menjalankan halaman HTML secara lokal.

Konsepnya kurang lebih:

VS Code
   │
   └── Live Server
           │
           ▼
       Browser
           │
           ▼
       index.html
           │
           ▼
        app.js

Perhatikan: Live Server bukan compiler TypeScript.

Compiler-nya tetap:

tsc

Live Server hanya membantu menyajikan project melalui server development lokal.

22. Kesalahan pemahaman yang sering terjadi

❌ “Browser menjalankan TypeScript.”

Tidak.

Yang dijalankan browser adalah JavaScript.

TypeScript → compile → JavaScript → Browser

❌ “Node.js dibutuhkan karena TypeScript harus dijalankan menggunakan Node.js.”

Dalam konteks materi ini, bukan itu alasannya.

Node.js digunakan agar kita mendapatkan:

npm

yang kemudian digunakan untuk meng-install TypeScript.

❌ “Kalau app.ts berubah, app.js otomatis berubah.”

Dengan cara compile manual yang diajarkan di materi:

tidak otomatis.

Kita menjalankan lagi:

tsc app.ts

❌ “HTML harus memanggil app.ts.”

Tidak.

HTML memanggil:

<script src="app.js"></script>

karena browser membutuhkan JavaScript.

🧠 Ringkasan Lesson 2

Kalau saya sederhanakan seluruh materi menjadi satu alur:

1. Install Node.js
        ↓
2. npm ikut ter-install
        ↓
3. npm install -g typescript
        ↓
4. TypeScript + compiler ter-install
        ↓
5. Buat app.ts
        ↓
6. Tulis kode TypeScript
        ↓
7. tsc app.ts
        ↓
8. Muncul app.js
        ↓
9. index.html memanggil app.js
        ↓
10. Browser menjalankan JavaScript

Perintah yang perlu kamu kenal

npm --version

Untuk mengecek npm.

npm install -g typescript

Untuk meng-install TypeScript secara global.

tsc app.ts

Untuk meng-compile app.ts menjadi JavaScript.

🎯 Inti yang harus benar-benar kamu pahami

Jangan buru-buru menghafalkan command.

Yang paling penting sekarang adalah memahami pipeline:

Kita menulis TypeScript di .ts, lalu tsc mengubahnya menjadi .js, dan browser menjalankan .js.

Kalau konsep ini sudah masuk, nanti ketika kita mulai belajar variable, type, function, interface, dan seterusnya, kamu tidak akan bingung lagi kenapa ada file .ts dan .js.

Materi berikutnya memang mengarahkan kita mulai belajar variables dalam TypeScript.