TypeScript - Overview

Hai, para pengembang perangkat lunak yang sedang berkembang! Hari ini, kita akan memulai perjalanan yang menarik ke dunia TypeScript. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya disini untuk mengarahkan Anda melalui bahasa yang menarik ini. Jadi, siapkan tas virtual Anda, dan mari kita masuk ke dalam!

Apa Itu TypeScript?

Imaginasi Anda sedang membangun istana LEGO yang megah. JavaScript akan seperti memiliki set LEGO dasar, sedangkan TypeScript adalah seperti memiliki set yang sama tetapi dengan piece-pice khusus ekstra dan buku panduan detil. Itu sebenarnya apa TypeScript adalah - versi diperkuat JavaScript!

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

Berikut 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 menandakan bahwa name seharusnya adalah string, dan : void menunjukkan bahwa fungsi ini tidak mengembalikan apa-apa.

Fitur TypeScript

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

1. Tipe Statik

Fitur yang paling menonjol dari TypeScript adalah tipe statiknya yang opsional. Ini berarti Anda dapat menambahkan informasi tipe ke variabel, parameter fungsi, dan nilai kembalian fungsi. Itu seperti memasukkan blok berbentuk yang 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 tipe untuk variabel dan fungsi kami. Ini membantu menangkap kesalahan awal dan membuat kode kami lebih mudah untuk didokumentasikan.

2. Pemrograman Berorientasi Objek

TypeScript mendukung sepenuhnya konsep pemrograman berorientasi objek seperti kelas, antarmuka, dan modul. Itu seperti memiliki rancangan untuk membangun struktur yang 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 kontruktur dan metode. Itu adalah cara yang bagus untuk mengatur dan menstrukturkan kode Anda.

3. Antarmuka

Antarmuka di TypeScript memungkinkan Anda mendefinisikan struktur objek. Pensejukkan mereka sebagai 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 saya harus belajar TypeScript saat saya bisa menggunakan JavaScript saja?" Pertanyaan yang bagus! Biarkan saya share cerita singkat.

Ketika saya pertama kali mulai mengajar pemrograman, saya memiliki murid yang membuat proyek JavaScript besar. Semua tampak baik sampai mereka mencoba membuat 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 yang meyakinkan 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 Bacaan: Anotasi tipe membuat kode lebih mudah didokumentasikan.
4. Lebih Baik untuk Proyek Besar: Fitur TypeScript membuatnya lebih mudah untuk mengelola dan merefactorkan basis kode besar.
5. Fitur JavaScript di Masa Depan: TypeScript sering mengimplementasikan fitur JavaScript di masa depan sebelum mereka tersedia secara luas.

Komponen TypeScript

TypeScript terdiri dari tiga komponen utama:

Komponen	Deskripsi
Bahasa	Sintaks, kata kunci, dan anotasi tipe
Kompiler	Kompiler TypeScript (tsc) yang mengkonversi TypeScript ke JavaScript
Layanan Bahasa	Menyediakan cara bagi editor dan tool 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 berjalan di lingkungan apa pun.

Berikut adalah contoh sederhana 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 yang bersih dan standar yang dapat dijalankan di lingkungan JavaScript apa pun.

Dan itu saja, teman-teman! Kita telah mengambil langkah pertama ke dunia TypeScript. Ingat, belajar bahasa baru seperti belajar menunggang sepeda - mungkin tampak berayun awalnya, tapi dengan latihan, Anda akan mulai meluncur secepatnya. Tetap coding, tetap belajar, dan terutama, bersenang-senang!

Credits: Image by storyset