Belajar TypeScript: Panduan Lengkap Pemula dari Nol
Oleh
Hazar Farras
Halo DomaiNesians! Lagi pengen mulai belajar coding tapi bingung mau mulai dari mana? Atau kamu udah jago JavaScript tapi pengin kode lebih rapi dan aman? Tenang, sekarang waktunya belajar TypeScript!
TypeScript itu semacam “upgrade” dari JavaScript. Dengan TypeScript, kode kamu lebih terstruktur, error lebih gampang ketahuan, dan hasilnya bikin hidup developer jadi lebih nyaman.
Di artikel ini, kami bakal pandu kamu belajar TypeScript dari nol, step-by-step. Mulai dari install, nulis kode pertama, sampai tips biar cepat paham. Buat yang pengen langsung praktik tanpa ribet, bisa banget pakai Cloud VPS DomaiNesia sebagai tempat latihan coding yang aman dan stabil.
Siap-siap deh, karena setelah ini belajar TypeScript bakal terasa lebih mudah dan seru. Yuk, mulai coding!
Apa Itu TypeScript?
Jadi, apa sih sebenarnya TypeScript itu? Singkatnya, TypeScript bisa dibilang “versi upgrade” dari JavaScript yang lebih rapi dan teratur. Semua kode JavaScript valid juga di TypeScript, tapi TypeScript menambah kemampuan tipe data statis, sehingga error lebih gampang ketahuan sebelum program dijalankan.
Bayangin kamu lagi nulis resep masakan. JavaScript itu ibarat mencatat resep di kertas bekas, kadang ada bahan yang kelupaan ditulis. TypeScript seperti punya template resep yang memastikan semua bahan tercatat dengan jelas, jadi masakanmu tidak gagal.
Kelebihan TypeScript untuk pemula:
- Deteksi error lebih awal: typo atau salah tipe data bisa langsung ketahuan.
- Kode lebih rapi & mudah dipahami: cocok buat proyek yang makin kompleks.
- Bisa dipakai di project besar: team coding jadi lebih gampang kolaborasi.
Contoh kode sederhana:
|
1 2 3 4 5 6 7 8 |
let nama: string = "Kamu"; let umur: number = 20; function perkenalan(nama: string, umur: number) { console.log(`Hai, aku ${nama} dan aku ${umur} tahun.`); } perkenalan(nama, umur); |
Di contoh ini, TypeScript memastikan nama selalu string dan umur selalu number. Kalau salah tipe, editor bakal kasih warning sebelum kode dijalankan. Keren kan?
Menyiapkan Lingkungan Belajar TypeScript
Sebelum kamu mulai menulis kode keren, kamu harus siapkan lingkungan belajar dulu. Bayangin ini seperti menyiapkan meja kerja: kalau meja rapi, kamu bisa fokus coding tanpa ribet. Nah, untuk belajar TypeScript, ada beberapa langkah penting yang wajib kamu tahu:
1. Install Node.js & npm
TypeScript berjalan di atas Node.js, jadi pastikan Node.js sudah terpasang di komputer kamu. Node.js juga otomatis membawa npm (Node Package Manager) yang bakal membantu install TypeScript dan library lainnya.
Cara cek instalasi:
|
1 2 |
node -v npm -v |
Kalau muncul versi, berarti Node.js siap digunakan. Kalau belum, download langsung dari https://nodejs.org.
2. Install TypeScript secara global
Supaya kamu bisa pakai TypeScript di project mana saja, install global lewat npm:
|
1 |
npm install -g typescript |
Setelah itu, cek versi:
|
1 |
tsc -v |
Kalau muncul versi TypeScript, berarti siap untuk mulai menulis kode. Mudah kan?
3. Setup Project Pertama
Sekarang waktunya membuat project TypeScript pertama kamu:
- Buat folder project:
|
1 2 |
mkdir belajar-typescript cd belajar-typescript |
- Inisialisasi TypeScript di folder ini:
|
1 |
tsc --init |
Perintah ini membuat file tsconfig.json yang bertindak sebagai panduan TypeScript untuk project kamu. Dengan ini, compiler TypeScript tahu aturan main project-mu.
Kalau mau praktik langsung tanpa ribet, kamu bisa pakai Cloud VPS DomaiNesia. VPS ini membuat kamu coding dari mana aja, environment selalu stabil, dan bebas error karena laptop tidak kepake terus. Cocok banget buat yang serius belajar TypeScript.
Dasar-Dasar TypeScript
Sekarang environment-mu sudah siap, saatnya mulai belajar TypeScript dari dasar. Di bagian ini, mari kupas tipe data, variabel, konstanta, dan fungsi sederhana, semua dijelaskan step-by-step biar kamu cepat paham, bahkan kalau baru pertama kali coding.
1. Tipe Data Dasar
Salah satu fitur utama TypeScript adalah type annotation, yaitu kemampuan untuk menentukan tipe data sebuah variabel. Ini membantu mencegah error dan membuat kode lebih jelas.
Contoh sederhana:
|
1 2 3 |
let nama: string = "Kamu"; let umur: number = 25; let isProgrammer: boolean = true; |
Penjelasannya:
string→ untuk teksnumber→ untuk angkaboolean→ true/false
Kalau kamu salah assign tipe data, editor akan langsung kasih warning. Misal nama = 10; bakal error. Ini yang membuat belajar TypeScript lebih aman dibanding JavaScript biasa.
2. Variabel & Konstanta
TypeScript tetap pakai let dan const seperti JavaScript:
let→ variabel yang bisa diubah nilainyaconst→ nilai tetap, tidak bisa diubah
Contoh:
|
1 2 3 4 5 |
const bahasa: string = "TypeScript"; let versi: number = 5.0; versi = 5.1; // boleh diubah // bahasa = "JavaScript"; // error! |
Tips: pakai const sebanyak mungkin untuk mengurangi risiko bug karena nilai tak sengaja berubah.
3. Fungsi Sederhana
Fungsi di TypeScript bisa diberi tipe untuk input dan output, jadi lebih jelas apa yang diterima dan dikembalikan:
|
1 2 3 4 5 |
function greet(nama: string): string { return `Halo, ${nama}! Selamat belajar TypeScript.`; } console.log(greet("Kamu")); |
Dengan tipe yang jelas, kamu tidak perlu khawatir salah input atau output, sehingga error bisa dicegah sejak awal.
Gunakan VSCode dengan extension TypeScript agar auto-complete dan error checking lebih mudah. Praktik langsung membuat cepat paham. Kamu bisa pakai Cloud VPS DomaiNesia untuk coding di lingkungan yang stabil, aman, dan bisa diakses dari mana saja.
Interface dan Type Annotation
Setelah paham tipe data dasar, sekarang naik level sedikit dengan interface dan type annotation. Dua fitur inilah yang membuat banyak developer betah belajar TypeScript, karena kode jadi lebih terorganisir dan gampang dirawat.
1. Apa Itu Type Annotation?
Type annotation itu semacam “catatan kecil” buat kasih tahu compiler tipe data dari sebuah variabel, parameter, atau return function.
Contoh:
|
1 2 3 4 5 6 |
let nama: string = "Kamu"; let umur: number = 22; function tambah(a: number, b: number): number { return a + b; } |
Kalau kamu salah kasih tipe data, TypeScript langsung komplain. Jadi bug bisa dicegah lebih awal.
2. Interface untuk Data Lebih Kompleks
Kalau tipe data dasar dirasa kurang, kamu bisa pakai interface untuk membuat struktur data lebih terorganisir. Bayangin interface itu kayak blueprint atau template untuk sebuah objek.
|
1 2 3 4 5 6 7 8 9 10 11 |
interface User { nama: string; umur: number; isAdmin: boolean; } let user1: User = { nama: "Budi", umur: 25, isAdmin: false, }; |
Dengan interface, kamu tahu persis apa saja properti yang wajib ada di sebuah objek. Begitu ada yang keliru atau ketinggalan, TypeScript langsung ngasih peringatan biar kamu sadar lebih cepat.
3. Kenapa Penting untuk Pemula?
- Membantu memahami struktur data dengan jelas.
- Mengurangi error ketika objek makin kompleks.
- Sangat berguna saat kerja tim, karena semua anggota tahu aturan main datanya.
Saat kamu mulai ngerjain project nyata dalam perjalanan belajar TypeScript, coba biasakan pakai interface sejak awal. Hasilnya, kode jadi lebih terstruktur dan gampang dikembangkan ke tahap berikutnya.
Classes & OOP di TypeScript
Salah satu alasan banyak orang semangat belajar TypeScript adalah karena mendukung konsep OOP (Object-Oriented Programming). Dengan OOP, kode jadi lebih terstruktur, mudah dipakai ulang, dan gampang di-maintain, terutama kalau project sudah makin besar.
1. Membuat Class Sederhana
Class di TypeScript mirip dengan JavaScript modern, tapi lebih kuat karena ada type annotation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class User { nama: string; umur: number; constructor(nama: string, umur: number) { this.nama = nama; this.umur = umur; } perkenalan(): void { console.log(`Halo, aku ${this.nama}, umurku ${this.umur} tahun.`); } } const user1 = new User("Andi", 25); user1.perkenalan(); |
Di sini, kamu membuat class User dengan properti nama dan umur. Method perkenalan() dipakai untuk mencetak info user.
2. Inheritance (Pewarisan)
Salah satu kekuatan utama OOP ada di inheritance, yaitu kemampuan sebuah class untuk mewarisi properti dan method dari class lain.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class Admin extends User { role: string; constructor(nama: string, umur: number, role: string) { super(nama, umur); this.role = role; } showRole(): void { console.log(`${this.nama} adalah ${this.role}.`); } } const admin1 = new Admin("Sinta", 30, "Administrator"); admin1.perkenalan(); admin1.showRole(); |
Dengan extends, class Admin otomatis punya semua fitur User, plus bisa ditambah properti atau method baru.
3. Kenapa Penting Dipelajari?
- Lebih terstruktur: cocok untuk project besar.
- Reusable: kode bisa dipakai ulang di banyak tempat.
- Lebih mudah di-maintain: kalau ada perubahan, cukup di class utama.
Saat belajar TypeScript, coba biasakan pakai class untuk hal-hal yang berulang. Misalnya, membuat class Product, Order, atau Customer di aplikasi toko online. Dengan begitu, kamu akan terbiasa berpikir modular dan terorganisir.
Modul & Import/Export di TypeScript
Kalau project makin besar, pasti kodenya tidak bisa ditaruh di satu file aja. Bayangin semua function, class, dan variabel campur aduk dalam satu file, dijamin membuat pusing. Modul jadi salah satu bagian penting saat belajar TypeScript, karena membuat project lebih terstruktur.
1. Export (Membagikan Kode)
Dengan export, kamu bisa berbagi variabel, function, atau class ke file lain.
|
1 2 3 4 5 6 |
// file: mathUtils.ts export function tambah(a: number, b: number): number { return a + b; } export const PI = 3.14; |
Di atas, kamu punya file mathUtils.ts yang mengekspor function tambah dan konstanta PI.
2. Import (Menggunakan Kode)
Setelah di-export, kamu bisa menggunakannya di file lain dengan import.
|
1 2 3 4 5 |
// file: app.ts import { tambah, PI } from "./mathUtils"; console.log(tambah(5, 3)); // Output: 8 console.log(PI); // Output: 3.14 |
Dengan begitu, kode jadi lebih terorganisir. Kamu bisa simpan semua utilitas matematika di mathUtils.ts, lalu dipanggil kapanpun diperlukan.
3. Default Export
Kadang kamu ingin satu modul hanya punya satu hal utama untuk di-export. Caranya dengan default export.
|
1 2 3 4 5 6 |
// file: userService.ts export default class UserService { getAllUsers() { return ["Andi", "Sinta", "Budi"]; } } |
Import-nya jadi lebih simpel:
|
1 2 3 4 |
import UserService from "./userService"; const service = new UserService(); console.log(service.getAllUsers()); |
4. Kenapa Modul Penting?
- Kode lebih rapi: mudah mencari function atau class tertentu.
- Reusable: modul bisa dipakai di banyak file.
- Scalable: project bisa berkembang tanpa membuat pusing.
Kalau lagi belajar TypeScript, biasakan membuat file terpisah untuk fitur yang berbeda. Misalnya auth.ts untuk autentikasi, db.ts untuk koneksi database, atau utils.ts untuk helper function.
Generic di TypeScript
Kalau kamu udah cukup nyaman dengan tipe data dasar, sekarang saatnya masuk ke salah satu fitur keren yang membuat banyak developer betah belajar TypeScript: Generic.
Generic itu intinya membuat kode lebih fleksibel tapi tetap aman dengan tipe data. Jadi, kamu tidak perlu membuat ulang function atau class hanya karena beda tipe data.
1. Contoh Tanpa Generic
Misalnya kamu membuat function untuk mengembalikan data:
|
1 2 3 4 5 6 7 |
function identityString(arg: string): string { return arg; } function identityNumber(arg: number): number { return arg; } |
Bayangin kalau tiap tipe data harus membuat function terpisah, pasti repot banget dan membuat kode berulang-ulang.
2. Contoh Dengan Generic
Nah, dengan generic, kamu bisa membuat satu function yang fleksibel:
|
1 2 3 4 5 6 |
function identity<T>(arg: T): T { return arg; } console.log(identity<string>("Halo TypeScript")); console.log(identity<number>(123)); |
Parameter <T> ini disebut type variable, dan dia bisa mewakili tipe apapun yang dipakai saat function dipanggil.
3. Generic di Array
Generic juga sering dipakai untuk array.
|
1 2 3 4 5 6 |
function getFirstElement<T>(arr: T[]): T { return arr[0]; } console.log(getFirstElement<string>(["A", "B", "C"])); // Output: A console.log(getFirstElement<number>([1, 2, 3])); // Output: 1 |
Dengan begini, function tetap fleksibel tapi aman, karena TypeScript tahu elemen dalam array itu string atau number.
4. Generic di Class
Generic tidak hanya berlaku di function, tapi juga bisa diterapkan di class biar lebih fleksibel:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class DataStorage<T> { private data: T[] = []; addItem(item: T) { this.data.push(item); } getItems(): T[] { return [...this.data]; } } const stringStorage = new DataStorage<string>(); stringStorage.addItem("Belajar TypeScript"); console.log(stringStorage.getItems()); const numberStorage = new DataStorage<number>(); numberStorage.addItem(100); console.log(numberStorage.getItems()); |
Keren kan? Kamu bisa membuat storage khusus string atau number, tapi dengan satu class yang sama.
5. Kenapa Harus Belajar Generic?
Kalau kamu udah nyoba contoh-contoh di atas, pasti kerasa kan kalau generic membuat kode lebih singkat dan fleksibel? Nah, berikut beberapa alasan kenapa kamu perlu banget paham fitur ini saat belajar TypeScript:
- Mengurangi duplikasi kode
- Lebih fleksibel tanpa kehilangan type safety
- Mudah di-maintain kalau aplikasi makin kompleks
Dengan generic, kamu sekarang punya “senjata rahasia” buat membuat kode yang fleksibel tapi tetap aman dari error tipe data. Ini salah satu alasan kenapa banyak developer jatuh cinta saat mulai belajar TypeScript. Nah, setelah mengerti cara membuat kode lebih pintar, saatnya bahas bagaimana menangani error dengan rapi lewat Error Handling & Debugging di TypeScript.
Error Handling & Debugging di TypeScript
Tidak ada kode yang benar-benar sempurna. Mau kamu udah jago atau masih belajar TypeScript, pasti bakal nemu error di jalan. Nah, bagian ini penting banget karena error bukan musuh, tapi justru “teman” yang ngasih tahu kalau ada yang perlu diperbaiki.
1. Error Handling dengan Try…Catch
TypeScript sama kayak JavaScript, bisa pakai try…catch buat nangkep error. Yang membuat beda, TypeScript selalu menjaga dengan type system supaya kode tidak gampang salah.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function bagi(a: number, b: number): number { if (b === 0) { throw new Error("Pembagian dengan nol tidak diperbolehkan!"); } return a / b; } try { console.log(bagi(10, 0)); } catch (error) { console.error("Terjadi error:", error); } |
Di sini, TypeScript bakal pastikan a dan b itu number, jadi error bisa lebih gampang dilacak.
2. Debugging dengan Source Maps
Waktu compile, TypeScript biasanya berubah jadi JavaScript. Nah, kalau ada bug, kamu bisa bingung karena error muncul di file .js. Untungnya ada source maps, yang membuat error tetap nunjuk ke file .ts.
Aktifkan di tsconfig.json:
|
1 2 3 4 5 |
{ "compilerOptions": { "sourceMap": true } } |
Dengan begini, kalau ada error, debugger bakal nunjuk langsung ke kode TypeScript, bukan JavaScript hasil compile.
3. Strict Mode Biar Lebih Aman
Kalau kamu serius belajar TypeScript, aktifkan mode strict di tsconfig.json.
|
1 2 3 4 5 |
{ "compilerOptions": { "strict": true } } |
Mode ini membuat TypeScript lebih ketat soal tipe data, sehingga banyak bug bisa ketahuan lebih awal.
Error handling dan debugging itu bagian penting dari perjalanan belajar TypeScript. Dengan latihan rutin, kamu bakal makin jago menghadapi error tanpa drama.
Akhir Perjalanan, Awal Serius Belajar TypeScript
Nah, sampai sini perjalanan kamu belajar TypeScript udah lumayan jauh. Dari mulai nyiapin lingkungan, ngerti tipe data dasar, bikin function, class, sampai pakai modul, generic, dan bahkan belajar cara menangani error.
Intinya, belajar TypeScript itu bukan sekadar belajar bahasa baru, tapi juga belajar cara mikir lebih terstruktur, rapi, dan aman dalam ngoding. Semakin sering kamu latihan, semakin kerasa manfaatnya, apalagi kalau nanti terjun ke project besar.
Kalau sekarang kamu masih ngerasa bingung di beberapa bagian, tenang aja, itu wajar banget. Yang penting, jangan berhenti latihan dan terus eksplor fitur-fitur lain yang belum sempat dibahas di sini.
Siap gas bikin project nyata? Jalankan aplikasi kamu di Cloud VPS DomaiNesia, biar performanya stabil, aman, dan siap dipakai untuk eksperimen maupun project serius. Dengan begitu, hasil dari perjalanan belajar TypeScript kamu bisa langsung dipraktikkan di dunia nyata.
Hazar Farras
Hi ! I'm a Technical Content Specialist in DomaiNesia. Passionate about challenges, technology enthusiast, and dedicated K-pop lover always exploring new horizons and trends
