TypeScript - Classes: A Beginner's Guide

Hai there, bakat coding masa depan! ? Adakah anda bersedia untuk melangkah ke dunia yang menarik TypeScript classes? Jangan bimbang jika anda belum pernah menulis baris kode sebelum ini - kita akan mulakan dari dasar dan membina ke arah atas. Pada akhir panduan ini, anda akan dapat mencipta classes seperti seorang pro! Jadi, mari kita mulakan pengembaraan ini bersama.

Apa Itu Classes?

Sebelum kita masuk ke dalam perincian, mari kita memahami apa itu classes. Anggap class sebagai blueprint untuk mencipta objek. Seperti arkitek yang menggunakan blueprint untuk membina rumah, kita menggunakan classes untuk mencipta objek dalam kod kita. Objek ini boleh memiliki ciri-ciri (seperti warna rumah) dan metode (seperti membuka pintu).

Mencipta Classes

Mari kita mula dengan mencipta class pertama kita. Kita akan mencipta class Car yang mudah.

class Car {
make: string;
model: string;
year: number;

constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

honk() {
console.log("Beep beep!");
}
}

mari kitaongkoskan ini:

1. Kita mula dengan kata kunci class diikuti dengan nama class kita, Car.
2. Dalam class, kita tentukan ciri-ciri: make, model, dan year.
3. constructor adalah metode khas yang dipanggil saat kita mencipta objek Car baru. Ia menetapkan nilai awal untuk ciri-ciri kita.
4. Kita juga ada metode honk yang, ketika dipanggil, akan mencetak "Beep beep!" ke konsol.

Mencipta Instance Objek

Sekarang kita ada class Car, mari kita cipta beberapa objek kereta sebenar!

let myCar = new Car("Toyota", "Corolla", 2020);
let yourCar = new Car("Honda", "Civic", 2019);

Di sini, kita telah mencipta dua objek Car: myCar dan yourCar. Kata kunci new memberitahu TypeScript untuk mencipta instance baru daripada class Car kita.

Mengakses Atribut dan Fungsi

Sekarang kita ada objek kereta, bagaimana kita menggunakannya? Mari kita lihat:

console.log(myCar.make);  // Output: Toyota
console.log(yourCar.year);  // Output: 2019

myCar.honk();  // Output: Beep beep!

Kita menggunakan notasi titik untuk mengakses ciri-ciri dan metode objek kita. Ia seperti mengatakan, "Hey, myCar! Apa make anda?" atau "Hey, myCar! Beri kami honk!"

Pewarisan Class

Pewarisan adalah ciri kuat yang membolehkan kita mencipta classes baru berdasarkan classes yang ada. Mari kita cipta class SportsCar yang mewarisi daripada class Car kita:

class SportsCar extends Car {
topSpeed: number;

constructor(make: string, model: string, year: number, topSpeed: number) {
super(make, model, year);
this.topSpeed = topSpeed;
}

race() {
console.log(`Racing at ${this.topSpeed} mph!`);
}
}

let mySpeedster = new SportsCar("Ferrari", "F8", 2021, 210);
mySpeedster.honk();  // Output: Beep beep!
mySpeedster.race();  // Output: Racing at 210 mph!

Ini adalah apa yang berlaku:

1. Kita menggunakan kata kunci extends untuk mewarisi daripada Car.
2. Kita menambahkan ciri-ciri baru topSpeed.
3. Dalam constructor, kita memanggil super() untuk menginitialkan ciri-ciri daripada class induk.
4. Kita menambahkan metode race khusus untuk SportsCar.

SportsCar kita memiliki semua ciri-ciri dan metode Car, ditambah penambahan sendiri!

Menimpa Metode

Kadang-kadang, kita mahu mengubah bagaimana metode daripada class induk bekerja dalam class anak. Ini dipanggil menimpa metode. Mari kita menimpa metode honk dalam SportsCar:

class SportsCar extends Car {
// ... kod sebelumnya ...

honk() {
console.log("Vroom vroom!");
}
}

mySpeedster.honk();  // Output: Vroom vroom!

Sekarang, ketika kita panggil honk() pada SportsCar, ia memberikan bunyi yang lebih sportif!

Kata Kunci static

Kata kunci static membolehkan kita mencipta ciri-ciri dan metode yang milik class itu sendiri, bukan instance class. Mari kita tambah metode statik ke class Car kita:

class Car {
// ... kod sebelumnya ...

static numberOfWheels() {
return 4;
}
}

console.log(Car.numberOfWheels());  // Output: 4

Kita dapat memanggil metode ini pada class Car sendiri, tanpa perlu mencipta instance.

Operator instanceof

Operator instanceof membolehkan kita memeriksa jika objek adalah instance daripada class tertentu:

console.log(myCar instanceof Car);  // Output: true
console.log(mySpeedster instanceof SportsCar);  // Output: true
console.log(mySpeedster instanceof Car);  // Output: true
console.log(myCar instanceof SportsCar);  // Output: false

Ini berguna saat anda perlu memeriksa jenis objek yang anda hadapi.

Penyembungan Data

Dalam TypeScript, kita dapat menggunakan pengubahsuai akses untuk mengawal ketampakan ahli class. Tiga pengubahsuai akses adalah public, private, dan protected:

class BankAccount {
private balance: number;

constructor(initialBalance: number) {
this.balance = initialBalance;
}

public deposit(amount: number) {
this.balance += amount;
}

public withdraw(amount: number) {
if (amount <= this.balance) {
this.balance -= amount;
} else {
console.log("Insufficient funds!");
}
}

protected getBalance() {
return this.balance;
}
}

• private: Hanya dapat diakses dalam class.
• public: Dapat diakses dari mana-mana (default jika tidak ditentukan).
• protected: Dapat diakses dalam class dan subclass.

Classes dan Interfaces

Interfaces di TypeScript membolehkan kita menentukan kontrak untuk classes kita. Mari kita cipta interface untuk class Car:

interface Vehicle {
make: string;
model: string;
year: number;
honk(): void;
}

class Car implements Vehicle {
// ... implementasi ...
}

Dengan mengimplementasi interface, kita memastikan class kita mengikuti struktur tertentu.

Ringkasan Metode

Ini adalah ringkasan metode yang kita telah pelajari dalam panduan ini:

Metode	Deskripsi
constructor()	Menginitialkan instance baru daripada class
honk()	Membuat kereta honk
race()	Simulasi perlumbaan (untuk SportsCar)
static numberOfWheels()	Mengembalikan bilangan roda (untuk class Car)
deposit()	Menambah wang ke akaun bank
withdraw()	Mengeluarkan wang daripada akaun bank
getBalance()	Mengembalikan balans sekarang daripada akaun bank

Dan itu lah! Anda telah membuat langkah pertama ke dunia TypeScript classes. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencuba konsep ini. Cipta class anda sendiri, campur aduk ciri-ciri berbeza, dan terutamanya, bersenang-senang dalam coding! Siapa tahu, mungkin anda yang akan mengajar kelas ini kali berikutnya! ?

Credits: Image by storyset