TypeScript OOP – Encasulaption Dan Inheritance

Assalamualaikum Warahmatullahi Wabarakatuh.

Hai teman – teman semuanyaaaa!! Pada artikel kali ini kita akan melanjutkan tentang pembahasan TypeScript OOP sebelumnya. Jika kalian belum membaca bagian sebelumnya dapat membuka artikel ini, TypeScript OOP – Class Dan Object.

Sesuai judulnya, kita akan membahas tentang encasulaption dan inheritance pada TypeScript OOP. Dan kita juga akan melanjutkan program yang telah dibuat sebelumnya, jadi bagi kalian yang belum membaca artikel sebelumnya silahkan dibuka terlebih dahulu. Yaudah yuk langsung kita mulai aja pembahasannya.

Mengenal OOP

Jika kalian telah membaca artikel TypeScript OOP sebelumnya, maka kalian telah tahu bahwa pada bagian ini kita akan membahas istilah yang mungkin kita temui dalam pembahasan ini.

Encasulaption merupakan sebuah metode penyatuan atau pengikatan atribut atau metode agar tidak sembarangan diakses.

Inheritance merupakan sebuah metode pewarisan properti dari class satu ke class lainnya.

Pembuatan Program

Kita akan melanjutkan program sebelumnya. Jika sebelumnya kita telah membuat class Car untuk dapat membuat sebuah objek mobil, sekarang kita akan menerapkan encasulaption pada class Car tersebut. Lalu kita akan membuat sebuah class baru berdasarkan brand dari mobil yang akan ikut dalam kompetisi.

Berikut merupakan progres dari program yang telah kita buat.

class Car {
    brand: string;
    speed: number;
    price: number;

    getBrand(): string {
        return this.brand;
    };

    getSpeed(): number {
        return this.speed;
    }

    getPrice(): string {
        return `$${ this.price }`;
    }

    getName(): string {
        return this.brand;
    };
    
    move(): void {
        console.log(`${ this.brand } berjalan dengan kencang`);
    };
}

const ferrari = new Car();
ferrari.brand = 'Ferrari';
ferrari.speed = 220;
ferrari.price = 1000000;

console.log(ferrari.getSpeed());
ferrari.move();
console.log(ferrari.price);

Encasulaption

Sekarang kita akan melakukan encasulaption dengan membuat attribute brand, speed dan price menjadi private.

private brand: string;
private speed: number;
private price: number;

Ini berdampak kita tidak dapat mengakses attribute secara langsung, contohnya kita tidak dapat lagi menggunakan ferrari.brand. Tapi kita dapat mengakses nilai dari attribute ini dengan perantara method ataupun constructor. Sekarang kita akan menambahkan method dan constuctor ke dalam class kita.

class Car {
    private brand: string;
    private speed: number;
    private price: number;

    constructor(brand: string, speed: number, price: number) {
        this.brand = brand;
        this.speed = speed;
        this.price = price;
    }

    setBrand(brand: string): void {
        this.brand = brand;
    };

    getBrand(brand: string): string {
        return this.brand;
    };

    setSpeed(speed: number): void {
        this.speed = speed;
    };

    getSpeed(): number {
        return this.speed;
    }

    setPrice(price: number): void {
        this.price = price;
    };

    getPrice(): string {
        return `$${ this.price }`;
    }
    
    getName(): string {
        return this.brand;
    };
    
    move(): void {
        console.log(`${ this.brand } berjalan dengan kencang`);
    };
}

Karena sekarang kita tidak dapat mengakses attribute secara langsung, kita akan mengandalkan constructor dan juga method getter dan setter baik untuk membuat object dan mengakses nilai pada attribute.

const ferrari = new Car('Ferrari', 220, 1000000);
ferrari.move();

/* Mengakses nilai dari attribute speed */
ferrari.setSpeed(1000);
console.log(ferrari.getSpeed());

Inheritance

Sekarang kita akan masuk ke tahap selanjutnya, yaitu inheritance. Kita akan membuat beberapa class sesuai dengan brand mobil yang mengikut kompetisi, yaitu Hennessey, Koenigsegg, Bugatti dan McLaren. semua class tersebut memiliki attribute model.

class Hennessey extends Car {
    private model: string;
}

class Koenigsegg extends Car {
    private model: string;
}

class Bugatti extends Car {
    private model: string;
}

class McLaren extends Car {
    private model: string;
}

Dapat kita lihat keempat class tersebut menggunakan extends sebagai bukti penerapan dari inheritance. Ini menjadikan Car sebagai superclass dan Hennessey sebagai subclass.

Sekarang kita akan memberikan constructor pada masing – masing subclass. Karena class ini berupa subclass kita harus menambahkan super() ke dalamnya.

class Bugatti extends Car {
    private model: string;

    constructor(speed: number, price: number, model: string) {
        super('Bugatti', speed, price);
        this.model = model;
    }
}

Jika kalian perhatikan dengan seksama isi dari super() merupakan parameter dari constructor superclass, yaitu Car.

Seperti pengertiannya, mewariskan attribute dan method, subclass tersebut memiliki properti superclass-nya. Kita akan mencoba untuk melakukan overriding atau penulisan kembali method yang dimiliki superclass menjadi method baru.

export class McLaren extends Car {
    private model: string;
    
    constructor(speed: number, price: number, model: string) {
        super('McLaren', speed, price);
        this.model = model;
    }


    /* Overriding */
    move(): void {
        console.log(`${ this.getName() } berjalan dengan kecepatan ${ this.getSpeed() } mph`);
    }

    getName(): string {
        return `${ this.brand } ${ this.model }`;
    }
}

Jika program itu dijalankan maka akan terjadi error. Mengapa? Karena method getName() mencoba memanggil brand yang merupakan attribute superclass. Jika kita cek kembali brand memiliki akses private, yang berarti brand tidak dapat diakses diluar class tersebut. Kita dapat merubah akses private menjadi protected yang memungkinkan attribute tersebut untuk diakses oleh subclass-nya.

protected brand: string;

Sekarang kita akan mencoba memisahkan setiap file kita menjadi bentuk module. Ini berfungsi agar program yang kita buat dapat lebih rapi. Kita akan memulai dengan memisahkan class ke dalam beberapa file. Untuk class Car, kita akan menambahkan export yang berfungsi agar class ini nantinya dapat di-import. Sedangkan untuk subclass kita akan menambahkan import untuk meng-import class Car.

export class Car {
    ...
}

import { Car } from './car';

Dan yang terakhir kita akan membuat object untuk mobil balap kita. Berikut kodenya.

const venom = new Hennessey(270, 1200000, 'Venom GT');
const agera = new Koenigsegg(273, 2500000, 'Agera RS');
const chiron = new Bugatti(304, 3800000, 'Chiron Super Sport 300+');
const speedtail = new McLaren(250, 2200000,'Speedtail');

venom.move();
agera.move();
chiron.move();
speedtail.move();

Dan selesaaaiiiii!!! Wah sepertinya artikel kali ini lumayan panjang hehe. Mungkin Banyak diantara kalian masih kebingungan. Tidak papa, belajar tidak harus langsung bisa, sedikit demi sedikit tidak masalah. Just take your time. Seperti sebelumnya program dapat diakses di Github.

Sekian untuk pembahasan pada artikel kali ini. Jika terdapat kekurangan serta kesalah pada penulisan artikel ini, penulis memohon maaf yang sebesar – besarnya. Semoga ilmu yang diperoleh dapat bermanfaat kedepannya.

Wassalamualaikum Warahmatullahi Wabarakatuh.