TypeScript - Overview

Halo, para pemrogram yang sedang beranjak! Hari ini, kita akan memulai perjalanan menarik ke dunia TypeScript. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk memandu Anda melalui bahasa yang menarik ini. Jadi, siapkan tas virtual Anda, dan mari kita masuk ke dalam!

Apa itu TypeScript?

Imaginasikan Anda sedang membangun istana LEGO yang megah. JavaScript akan seperti memiliki set LEGO dasar, sedangkan TypeScript adalah seperti memiliki set yang sama tetapi dengan pieces khusus ekstra dan panduan detil. Itu sebenarnya apa yang TypeScript - versi supercharge dari JavaScript!

TypeScript adalah bahasa pemrograman open-source yang dikembangkan dan dipelihara oleh Microsoft. Itu adalah superset sintaksis ketat dari JavaScript, yang berarti bahwa setiap kode JavaScript yang valid juga valid sebagai kode TypeScript. Namun, TypeScript menambahkan tipe statik opsional dan fitur kuat lainnya di atas JavaScript.

Ini adalah contoh sederhana untuk mengilustrasikan perbedaan:

// JavaScript
function greet(name) {
console.log("Hello, " + name + "!");
}

// TypeScript
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}

Dalam versi TypeScript, kita menambahkan informasi tipe. : string setelah name menentukan bahwa name seharusnya adalah string, dan : void menandakan bahwa fungsi ini tidak mengembalikan apa-apa.

Fitur dari TypeScript

Sekarang, mari kita jelajahi beberapa fitur menarik yang membuat TypeScript tampak khusus:

1. Tipe Statis

Fitur yang paling menonjol dari TypeScript adalah tipe statisnya yang opsional. Ini berarti Anda dapat menambahkan informasi tipe ke variabel, parameter fungsi, dan nilai kembalian fungsi. Itu seperti memasukkan blok berbentuk tepat ke lubang yang tepat - itu membantu mencegah kesalahan!

let age: number = 30;
let name: string = "Alice";
let isStudent: boolean = true;

function multiply(a: number, b: number): number {
return a * b;
}

Dalam contoh ini, kita telah menentukan jenis untuk variabel dan fungsi kita. Ini membantu menangkap kesalahan awal dan membuat kode kita lebih mudah untuk didokumentasikan.

2. Pemrograman Berorientasi Objek

TypeScript mendukung sepenuhnya konsep pemrograman berorientasi objek seperti kelas, antarmuka, dan modul. Itu seperti memiliki blueprint untuk membangun struktur kompleks!

class Person {
private name: string;

constructor(name: string) {
this.name = name;
}

greet(): void {
console.log(`Hello, my name is ${this.name}`);
}
}

let alice = new Person("Alice");
alice.greet(); // Output: Hello, my name is Alice

Kode ini mendefinisikan kelas Person dengan constructor dan metode. Itu adalah cara bagus untuk mengatur dan mengorganisir kode Anda.

3. Antarmuka

Antarmuka di TypeScript memungkinkan Anda mendefinisikan struktur objek. Pensejukkan mereka seperti kontrak yang kode Anda harus mengikuti.

interface Vehicle {
brand: string;
speed: number;
accelerate(): void;
}

class Car implements Vehicle {
brand: string;
speed: number;

constructor(brand: string) {
this.brand = brand;
this.speed = 0;
}

accelerate(): void {
this.speed += 10;
console.log(`${this.brand} is now going ${this.speed} mph`);
}
}

let myCar = new Car("Toyota");
myCar.accelerate(); // Output: Toyota is now going 10 mph

Dalam contoh ini, kita mendefinisikan antarmuka Vehicle dan kelas Car yang mengimplementasinya. Ini memastikan bahwa Car memiliki semua properti dan metode yang ditentukan dalam Vehicle.

Mengapa Menggunakan TypeScript?

Anda mungkin berpikir, " Mengapa harus belajar TypeScript ketika saya bisa menggunakan JavaScript saja?" Pertanyaan yang bagus! Biarkan saya berkongsi cerita singkat.

Ketika saya pertama kali mulai mengajar pemrograman, saya memiliki seorang murid yang membuat proyek JavaScript besar. Semua tampak baik sampai mereka mencoba membuat beberapa perubahan beberapa bulan kemudian. Mereka menghabiskan jam mencari kesalahan yang bisa ditangkap segera dengan TypeScript. Itu saat saya menyadari nilai sebenarnya dari TypeScript.

Berikut adalah beberapa alasan menarik untuk menggunakan TypeScript:

1. Dukungan IDE yang Ditingkatkan: TypeScript menyediakan dukungan yang lebih baik untuk autocomplete, navigasi, dan refactoring dalam IDE Anda.
2. Deteksi Kesalahan Awal: Tangkap kesalahan pada saat kompilasi, bukan saat eksekusi.
3. Meningkatkan Keterbacaan: Anotasi jenis membuat kode lebih mudah didokumentasikan.
4. Lebih Baik untuk Proyek Besar: Fitur TypeScript membuatnya mudah untuk mengelola dan merefactorkan kode besar.
5. Fitur JavaScript Dalam Masa Depan: TypeScript sering mengimplementasikan fitur JavaScript di masa mendatang sebelum mereka tersedia secara luas.

Komponen TypeScript

TypeScript terdiri dari tiga komponen utama:

Komponen	Deskripsi
Bahasa	Sintaks, kata kunci, dan anotasi jenis
Kompiler	Kompiler TypeScript (tsc) yang mengkonversi TypeScript ke JavaScript
Layanan Bahasa	Menyediakan cara bagi editor dan tools lainnya untuk secara cerdas menganalisis kode TypeScript

Kompiler TypeScript adalah bagian penting dari ekosistem. Itu yang memungkinkan Anda untuk menggunakan semua fitur ini dan masih mendapatkan JavaScript yang dapat dijalankan di lingkungan apa pun.

Ini adalah contoh sederhana tentang bagaimana proses kompilasi bekerja:

// Kode TypeScript (hello.ts)
function greet(name: string): string {
return `Hello, ${name}!`;
}

console.log(greet("World"));

// Kompilasi dengan: tsc hello.ts

// Hasil JavaScript (hello.js)
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("World"));

Kompiler TypeScript mengambil kode TypeScript kita dan menghasilkan JavaScript bersih dan standar yang dapat dijalankan di lingkungan JavaScript apa pun.

Dan itu lah, teman-teman! Kita telah mengambil langkah pertama ke dunia TypeScript. Ingat, belajar bahasa baru adalah seperti belajar menunggang sepeda - mungkin tampak wobble di awal, tapi dengan latihan, Anda akan berjalan cepat dalam waktu singkat. Terus coding, terus belajar, dan yang paling penting, bersenang-senang!

Credits: Image by storyset