TypeScript Tutorial

Pengenalan TypeScript 🔷

TypeScript adalah superset JavaScript yang diketik secara statis dan kuat, yang menambahkan tipe statis opsional, interface, dan banyak lagi ke dalam bahasa tersebut. TypeScript dirancang untuk membantu pengembang membangun aplikasi skala besar dengan keandalan yang lebih tinggi dan pemeliharaan kode yang lebih mudah.

Mengapa Belajar TypeScript? 🤔

1. Keamanan Tipe (Type Safety): Menangkap kesalahan lebih awal selama pengembangan.
2. Dukungan IDE yang Lebih Baik: Fitur autocompletion, navigasi, dan refactoring yang lebih baik.
3. Kualitas Kode yang Ditingkatkan: Dengan TypeScript, kode Anda lebih dapat diprediksi dan lebih mudah di-debug.
4. Integrasi JavaScript yang Mulus: TypeScript adalah superset dari JavaScript, jadi semua kode JavaScript adalah kode TypeScript yang valid.

Memulai 🚀

Menginstal TypeScript

Untuk menginstal TypeScript, Anda harus sudah menginstal Node.js. Anda dapat menginstal TypeScript secara global di mesin Anda menggunakan npm:

npm install -g typescript

Setelah instalasi, Anda dapat memeriksa versi TypeScript yang terinstal dengan menjalankan:

tsc --version

Menyiapkan Proyek TypeScript

Untuk memulai proyek TypeScript baru, Anda perlu menginisialisasinya dengan file tsconfig.json. File ini menyimpan semua opsi konfigurasi untuk compiler TypeScript.

tsc --init

Perintah ini akan menghasilkan file tsconfig.json dasar. Anda dapat menyesuaikannya sesuai dengan kebutuhan proyek Anda.

Tipe Dasar 🧱

TypeScript memperkenalkan beberapa tipe dasar yang mungkin sudah familiar bagi pengembang JavaScript, tetapi dengan tambahan anotasi tipe:

• Boolean: let selesai: boolean = false;
• Number: let desimal: number = 6;
• String: let warna: string = "biru";
• Array: let daftar: number[] = [1, 2, 3];
• Tuple: let x: [string, number]; x = ["halo", 10];
• Enum: enum Warna {Merah, Hijau, Biru};
• Any: let tidakYakin: any = 4; tidakYakin = "mungkin sebuah string";
• Void: function peringatiPengguna(): void { console.log("Ini adalah pesan peringatan"); }
• Null dan Undefined: let u: undefined = undefined; let n: null = null;

Tipe Lanjutan 📈

Interface

Interface mendefinisikan struktur yang harus dimiliki oleh sebuah objek. Ini adalah salah satu fitur utama TypeScript.

interface Orang {
    namaDepan: string;
    namaBelakang: string;
}
 
function sapa(orang: Orang) {
    return `Halo, ${orang.namaDepan} ${orang.namaBelakang}`;
}
 
let pengguna = { namaDepan: "John", namaBelakang: "Doe" };
console.log(sapa(pengguna));

Class

TypeScript mendukung class, yang merupakan cetak biru untuk membuat objek. Sebuah class dapat berisi properti dan metode.

class Penyapa {
    sapaan: string;
    constructor(pesan: string) {
        this.sapaan = pesan;
    }
    sapa() {
        return `Halo, ${this.sapaan}`;
    }
}
 
let penyapa = new Penyapa("dunia");
console.log(penyapa.sapa());

Generic

Generic menyediakan cara untuk membuat komponen yang dapat digunakan kembali. Mereka memungkinkan sebuah fungsi, class, atau interface untuk bekerja dengan tipe yang berbeda.

function identitas<T>(arg: T): T {
    return arg;
}
 
let output = identitas<string>("stringSaya");

Kesimpulan ✅

TypeScript adalah alat penting untuk pengembangan web modern, terutama untuk aplikasi skala besar. Fitur keamanan tipenya, bersama dengan integrasi yang mulus dengan JavaScript, menjadikannya pilihan populer di kalangan pengembang. Mulailah memasukkan TypeScript ke dalam proyek Anda hari ini untuk merasakan manfaat penuhnya!

Panduan ini menyediakan titik awal, tetapi masih banyak lagi yang bisa dieksplorasi di TypeScript. Teruslah berlatih dan selami topik yang lebih canggih seperti decorator, modul, dan namespace untuk menjadi mahir.