TypeScript - Ciri-ciri: Panduan Pemula

Hai, para pemrogram masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia TypeScript. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya telah melihat secara langsung betapa kuat dan transformatif TypeScript bisa menjadi. Jadi, mari kita masuk dan jelajahi ciri-ciri yang menakjubkan yang membuat TypeScript menjadi teman terbaik seorang pengembang!

Apa Itu TypeScript?

Sebelum kita melompat ke ciri-ciri, mari kita mengerti apa itu TypeScript secara cepat. Bayangkan Anda membangun rumah dengan blok Lego. JavaScript seperti memiliki kotak besar berisi blok berwarna-warni, tapi TypeScript seperti memiliki blok yang sama dengan petunjuk dan aturan khusus bagaimana mereka cocok bersama. Itu membantu Anda membangun struktur yang lebih stabil dan bebas dari kesalahan!

Sekarang, mari kita jelajahi ciri-ciri yang membuat TypeScript begitu spesial.

Anotasi Tipe

Dasar Anotasi Tipe

Anotasi tipe seperti memberi label pada kotak untuk menjelaskan apa yang ada di dalamnya. Dalam TypeScript, kita gunakan itu untuk memberitahu komputer jenis data apa yang kita gunakan.

let myName: string = "Alice";
let myAge: number = 30;
let isStudent: boolean = true;

Dalam contoh ini, kita memberitahu TypeScript bahwa:

• myName hanya boleh berisi teks (string)
• myAge hanya boleh berupa angka
• isStudent hanya bisa benar atau salah (boolean)

Ini membantu mencegah kesalahan bodoh, seperti mencoba melakukan matematika dengan nama seseorang!

Mengapa Itu Berguna

Bayangkan Anda sedang memasak dan secara tidak sengaja mencampur gula ke saus spageti Anda sebagai ganti garam. Anotasi tipe membantu mencegah kesalahan seperti ini dalam kode Anda. Itu menangkap kesalahan sebelum mereka terjadi, menyelamatkan waktu dan kepalan Anda!

Antarmuka (Interfaces)

Antarmuka seperti rancangan untuk objek. Mereka menentukan struktur yang harus dimiliki objek.

interface Person {
name: string;
age: number;
greet(): void;
}

let student: Person = {
name: "Bob",
age: 20,
greet: function() {
console.log("Hello, I'm " + this.name);
}
};

Di sini, kita telah membuat antarmuka Person yang mengatakan bahwa setiap objek Person harus memiliki name, age, dan fungsi greet. Itu seperti mengatakan ke seseorang, "Jika Anda ingin menjadi orang dalam program ini, Anda butuh hal ini!"

Kelas (Classes)

Kelas seperti pemotong kue untuk objek. Mereka memungkinkan kita untuk membuat banyak objek dengan struktur dan perilaku yang sama.

class Dog {
name: string;
breed: string;

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

bark() {
console.log(this.name + " says Woof!");
}
}

let myDog = new Dog("Buddy", "Golden Retriever");
myDog.bark(); // Output: Buddy says Woof!

Dalam contoh ini, kita telah membuat kelas Dog. Itu seperti template untuk membuat objek anjing. Setiap anjing memiliki nama dan jenis, dan bisa menjerit. Itu jauh lebih mudah daripada menulis properti dan metode setiap anjing secara individual!

Penerusan (Inheritance)

Penerusan seperti meneruskan ciri-ciri dari orang tua ke anak. Dalam pemrograman, itu memungkinkan kelas mewarisi properti dan metode dari kelas lain.

class Animal {
name: string;

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

move() {
console.log(this.name + " is moving.");
}
}

class Cat extends Animal {
meow() {
console.log(this.name + " says Meow!");
}
}

let myCat = new Cat("Whiskers");
myCat.move(); // Output: Whiskers is moving.
myCat.meow(); // Output: Whiskers says Meow!

Di sini, Cat mewarisi dari Animal. Ini berarti Cat memiliki segala sesuatu yang Animal punya (seperti properti name dan metode move), plus metode meow yang uniknya.

Enums

Enums seperti daftar pilihan yang telah ditentukan. Mereka bagus untuk saat Anda memiliki set nilai tetap yang sesuatu bisa menjadi.

enum DaysOfWeek {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
}

let today: DaysOfWeek = DaysOfWeek.Wednesday;
console.log(today); // Output: 2 (karena itu adalah item ketiga dalam daftar, dimulai dari 0)

Enums membuat kode Anda lebih mudah dibaca dan membantu mencegah kesalahan dengan membatasi nilai yang mungkin sebuah variabel bisa punya.

Generics

Generics seperti kartu wild card dalam permainan kartu. Mereka memungkinkan Anda menulis fungsi dan kelas yang fleksibel dan dapat digunakan kembali yang bisa bekerja dengan jenis yang berbeda.

function identity<T>(arg: T): T {
return arg;
}

let output1 = identity<string>("Hello");
let output2 = identity<number>(42);

console.log(output1); // Output: Hello
console.log(output2); // Output: 42

Dalam contoh ini, <T> adalah variabel jenis. Itu memungkinkan fungsi identity bekerja dengan jenis apa pun, sambil tetap menjaga keselamatan jenis.

Tipe Gabungan (Union Types)

Tipe gabungan seperti memiliki beberapa jenis kepribadian. Mereka memungkinkan variabel menjadi salah satu dari beberapa jenis.

let mixedType: string | number;
mixedType = "Hello";
console.log(mixedType); // Output: Hello

mixedType = 42;
console.log(mixedType); // Output: 42

Ini berguna saat Anda tidak yakin jenis data apa yang Anda akan menerima, tetapi Anda tahu itu bisa menjadi salah satu dari beberapa jenis tertentu.

Penjagaan Tipe (Type Guards)

Penjagaan tipe seperti pemeriksaan keamanan dalam kode Anda. Mereka membantu Anda mengecilkan jenis variabel dalam blok kode tertentu.

function printLength(obj: string | string[]) {
if (typeof obj === "string") {
console.log("Length of string: " + obj.length);
} else {
console.log("Length of array: " + obj.length);
}
}

printLength("Hello"); // Output: Length of string: 5
printLength(["a", "b", "c"]); // Output: Length of array: 3

Penjagaan tipe membantu TypeScript mengerti jenis variabel dalam konteks yang berbeda, memungkinkan Anda menggunaikan operasi jenis spesifik dengan aman.

Kesimpulan

Dan itu adalah dia, teman-teman! Kita telah berpergian melalui landscape menarik ciri-ciri TypeScript. Ingat, belajar mengoding seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan takut untuk mencoba dan membuat kesalahan; itu adalah bagaimana kita belajar terbaik!

Tetap mengoding, tetap belajar, dan sebelum Anda tahu, Anda akan membuat hal-hal yang menakjubkan dengan TypeScript. Selamat coding, semua orang!

Ciri	Deskripsi
Anotasi Tipe	Menentukan jenis variabel, parameter fungsi, atau nilai kembalian
Antarmuka	Menentukan struktur objek
Kelas	Blueprint untuk membuat objek dengan properti dan metode
Penerusan	Memungkinkan kelas mewarisi properti dan metode dari kelas lain
Enums	Menentukan set konstanta yang dinamai
Generics	Memungkinkan penulisan komponen yang dapat digunakan kembali yang bisa bekerja dengan jenis yang berbeda
Tipe Gabungan	Memungkinkan variabel menjadi salah satu dari beberapa jenis
Penjagaan Tipe	Bantu mengecilkan jenis variabel dalam blok kode tertentu

Credits: Image by storyset