TypeScript - Pewarisan

Hai, para pemrogram masa depan! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia pewarisan di TypeScript. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya disini untuk mengorbit Anda melalui topik yang menarik ini. Jadi, siapkan tas virtual Anda, dan mari kita masuk ke dalamnya!

TypeScript - Inheritance

Apa Itu Pewarisan?

Sebelum kita mulai, mari kita pahami apa yang sebenarnya dimaksudkan oleh pewarisan. Bayangkan Anda membuat sebuah pohon keluarga. Setiap generasi baru mewarisi beberapa ciri dari orang tua mereka. Dalam pemrograman, pewarisan bekerja sama seperti itu. Ini memungkinkan kelas baru untuk didasarkan pada kelas yang sudah ada, mewarisi properti dan metode nya. Menarik, kan?

Pewarisan Kelas Tunggal

Mari kita mulai dengan bentuk paling sederhana dari pewarisan: pewarisan kelas tunggal. Ini adalah saat satu kelas (kelas anak) mewarisi dari kelas lain (kelas induk).

Contoh Dasar

class Animal {
name: string;

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

makeSound(): void {
console.log("Suara hewan generik");
}
}

class Dog extends Animal {
breed: string;

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

makeSound(): void {
console.log("Woof! Woof!");
}
}

let myDog = new Dog("Buddy", "Golden Retriever");
console.log(myDog.name);  // Output: Buddy
console.log(myDog.breed); // Output: Golden Retriever
myDog.makeSound();        // Output: Woof! Woof!

Dalam contoh ini, Dog mewarisi dari Animal. Kata kunci extends digunakan untuk membuat kelas yang adalah anak dari kelas lain.

Penjelasan

  1. Kita mendefinisikan kelas dasar Animal dengan properti name dan metode makeSound.
  2. Kemudian kita membuat kelas Dog yang mewarisi Animal.
  3. Kelas Dog memiliki properti breed nya sendiri.
  4. Kita menggunakan kata kunci super dalam kontruktur Dog untuk memanggil kontruktur Animal.
  5. Kita menimpa metode makeSound dalam kelas Dog.

Kata Kunci Super

Anda mungkin telah melihat kata kunci super dalam contoh sebelumnya. Mari kita masuk lebih dalam apa yang ia lakukan.

Contoh dengan Super

class Vehicle {
make: string;
model: string;

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

getInfo(): string {
return `${this.make} ${this.model}`;
}
}

class Car extends Vehicle {
numDoors: number;

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

getInfo(): string {
return `${super.getInfo()} dengan ${this.numDoors} pintu`;
}
}

let myCar = new Car("Toyota", "Corolla", 4);
console.log(myCar.getInfo()); // Output: Toyota Corolla dengan 4 pintu

Penjelasan

  1. Kata kunci super digunakan dalam konuktur Car untuk memanggil konuktur Vehicle.
  2. Dalam metode getInfo kelas Car, kita menggunakan super.getInfo() untuk memanggil metode getInfo kelas induk.

Kata kunci super memungkinkan kita untuk mengakses dan memanggil fungsi di objek induk.

Penimpaan Metode

Penimpaan metode terjadi saat kelas anak menyediakan implementasi khusus untuk metode yang sudah didefinisikan dalam kelas induk. Kita sebenarnya telah melihat ini dalam kedua contoh sebelumnya!

Contoh Penimpaan Metode Lainnya

class Shape {
getArea(): number {
return 0;
}
}

class Circle extends Shape {
radius: number;

constructor(radius: number) {
super();
this.radius = radius;
}

getArea(): number {
return Math.PI * this.radius * this.radius;
}
}

class Rectangle extends Shape {
width: number;
height: number;

constructor(width: number, height: number) {
super();
this.width = width;
this.height = height;
}

getArea(): number {
return this.width * this.height;
}
}

let myCircle = new Circle(5);
console.log(myCircle.getArea()); // Output: 78.53981633974483

let myRectangle = new Rectangle(4, 5);
console.log(myRectangle.getArea()); // Output: 20

Penjelasan

  1. Kita memiliki kelas dasar Shape dengan metode getArea yang mengembalikan 0.
  2. Kedua kelas Circle dan Rectangle mewarisi Shape dan menimpa metode getArea dengan implementasi mereka sendiri.
  3. Kelas Circle menghitung luas menggunakan rumus πr².
  4. Kelas Rectangle menghitung luas dengan mengkalikan lebar dan tinggi.

Pewarisan Multilevel

Pewarisan multilevel melibatkan kelas anak mewarisi dari kelas anak lain. Itu seperti pohon keluarga dengan beberapa generasi.

Contoh Pewarisan Multilevel

class Grandparent {
surname: string;

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

getSurname(): string {
return this.surname;
}
}

class Parent extends Grandparent {
firstName: string;

constructor(firstName: string, surname: string) {
super(surname);
this.firstName = firstName;
}

getFullName(): string {
return `${this.firstName} ${this.getSurname()}`;
}
}

class Child extends Parent {
middleName: string;

constructor(firstName: string, middleName: string, surname: string) {
super(firstName, surname);
this.middleName = middleName;
}

getFullName(): string {
return `${this.firstName} ${this.middleName} ${this.getSurname()}`;
}
}

let myChild = new Child("John", "Doe", "Smith");
console.log(myChild.getFullName()); // Output: John Doe Smith

Penjelasan

  1. Kita memiliki kelas Grandparent dengan properti surname.
  2. Kelas Parent mewarisi Grandparent dan menambahkan properti firstName.
  3. Kelas Child mewarisi Parent dan menambahkan properti middleName.
  4. Setiap kelas memiliki implementasi metode getFullName nya sendiri.

Ringkasan Metode Pewarisan

Berikut adalah tabel yang menggabungkan metode dan kata kunci utama yang kita diskusikan:

Metode/Kata Kunci Deskripsi
extends Digunakan untuk membuat kelas sebagai anak dari kelas lain
super() Memanggil konuktur kelas induk
super.method() Memanggil metode dari kelas induk
Penimpaan Metode Menyediakan implementasi baru untuk metode di kelas anak

Dan itu saja! Kita telah menutupi dasar-dasar pewarisan di TypeScript. Ingat, latihan membuatah. Jangan khawatir untuk mencoba konsep ini. Semoga Anda sukses, para ahli TypeScript masa depan!

Credits: Image by storyset