Kali ini aku akan membahas lebih jauh tentang class di TypeScript. Materi ini merupakan lanjutan dari materi tentang OOP di typescript. Agar dapat memahami materi ini dengan mudah, usahakan teman-teman sudah paham apa OOP. Pada materi ini aku akan fokus pada beberapa fitur class seperti inheritance, visibility, dan super.
Inheritance
Fitur pertama yang akan kita bahas adalah inheritance. Inheritance atau turunan kelas adalah fitur yang memungkinkan kita untuk membuat turunan dari suatu kelas. Kelas yang menjadi turunan disebut dengan child, sedangkan yang diturunkan disebut dengan parent. Child akan mewarisi semua attribute dan method yang dimiliki oleh parent classnya. Jika kita kembali kepada analogi binatang, kita bisa membuat class Binatang sebagai parent dan Burung sebagai child. Untuk lebih jelasnya mari kita perhatikan contoh berikut ini.
describe("Class in TypeScript", function (){
class User {
id: number;
name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
}
class Employee extends User {
}
it('should support inheritance', () => {
const employee: Employee = new Employee(1, "Ardhan");
console.info(employee);
});
});Pada contoh di atas, kelas Employee merupakan turunan dari kelas User. Jika kita tampilkan output dari kelas employee maka attribute pada kelas User juga akan ditampilkan.
Super Constructor
Kalau kita lihat contoh di atas, constructor yang digunakan oleh child adalah constructor milik parent-nya. Sekarang bagaimana jika kita ingin membuat constructor pada child class di TypeScript? Jika kita ingin membuat constructor di child class kita harus memanggil constructor parent dengan menggunakan kata kunci super. Untuk lebih jelasnya, mari kita lihat contoh di bawah ini:
describe("Class in TypeScript", function (){
class User {
id: number;
name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
}
class Employee extends User {
nik: string;
constructor(id: number, name: string, nik: string) {
super(id, name);
this.nik = nik;
}
}
it('should support inheritance', () => {
const employee: Employee = new Employee(1, "Ardhan", "12345678");
console.info(employee);
});
});Pada contoh di atas, super yang ada di dalam constructor child memanggil constructor parent.
Method Overriding
Di Typescript kita juga bisa melakukan method overriding. Cara melakukan method overriding pada typescript adalah dengan membuat nama method yang sama dengan parent class yang akan dioverride. Untuk lebih jelasnya perhatikan contoh berikut:
describe("Class in TypeScript", function (){
class User {
id: number;
name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
getName(): string {
return `Username is ${this.name}`;
}
}
class Employee extends User {
nik: string;
constructor(id: number, name: string, nik: string) {
super(id, name);
this.nik = nik;
}
getName(): string {
return `Employee Name is ${this.name}`
}
}
it('should support inheritance', () => {
const employee: Employee = new Employee(1, "Ardhan", "12345678");
console.info(employee.getName());
});
});Perhatikan pada contoh di atas kita punya method getName di parent dan juga di child. Jika kita punya 2 method yang sama persis di child dengan di parent maka method di child akan melakukan overriding parent methodnya.
Super Method Pada Class di Typescript
Pada beberapa kasus kita mungkin ingin tetap menggunakan parent method pada overriding. Misalnya, alih-alih mengembalikan “Employee Name is” pada child kita ingin menuliskan “Username is … and this user is Employee”. Dari pada kita melakukan overriding menyeluruh, kita bisa menggunakan parent method dan menambahkan dengan kode program yang kita inginkan. Perhatikan contoh berikut.
class Employee extends User {
nik: string;
constructor(id: number, name: string, nik: string) {
super(id, name);
this.nik = nik;
}
getName(): string {
let output:string = super.getName();
return `${output}, and this user is Employee`;
}
}Perhatikan getName pada contoh di atas, kita menggunakan super.getName() untuk memanggil method getName milik parent class.
Visibility Attribute dan Method Class di TypeScript
Dalam penggunaan class, visibility merupakan fitur yang sangat penting. Class di TypeScript juga memiliki dukungan untuk menambahkan visibility pada attribut dan method dalam class. Bagi teman-teman yang lupa, visibility ada 3 jenis, yaitu:
- private, hanya bisa dibaca oleh kelas itu sendiri
- protected, hanya bisa dibaca oleh kelas itu sendiri dan turunannya
- public, bisa dibaca dari mana saja
Perhatikan contoh berikut:
describe("Class in TypeScript", function (){
class User {
private id: number;
public name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
protected getUserName(): string {
return `Username is ${this.name}`;
}
public getId(): number {
return this.id;
}
}
class Employee extends User {
nik: string;
constructor(id: number, name: string, nik: string) {
super(id, name);
this.nik = nik;
}
public getEmployeeName(): string {
let output:string = super.getUserName();
return `${output}, and this user is Employee`;
}
}
});Pada contoh di atas id kita buat menjadi private sedangkan name kita buat menjadi public. Artinya, jika kita punya object employee: Employee kita bisa memanggil name dengan employee.name namun kita tidak akan bisa memanggil id dengan employee.id. Untuk itu kita sediakan method untuk mengambil id, yaitu getId(). Selanjutnya getUserName merupakan method yang protected sehingga kita tidak akan bisa memanggil employee.getUserName tapi kita bisa memanggilnya dari getEmployeeName pada child class. Misalkan kita mencoba membaca id atau getUserName secara langsung maka kita akan mendapatkan error seperti berikut ini.
Perlu diketahui juga, jika kita tidak menambahkan visibility terhadap attribute atau method maka secara default visibility-nya dibuat menjadi publik.
Penutup
Nah, demikianlah sedikit penjelasan tentang penggunaan class di typescript. Semoga tulisan ini memberikan wawasan kepada kita terkait penggunaan class. Sampai ketemu lagi di tulisan berikutnya.
