Skip to content

4. Class Pada TypeScript

1. Class Basic (Constructor, Properties, Method)

Di TypeScript, "class" adalah sebuah konsep yang digunakan untuk membuat sebuah blueprint atau cetak biru (blueprint) untuk menciptakan objek-objek dengan properti dan metode yang sama. Dalam arti sederhana, class adalah suatu kerangka kerja yang mendefinisikan struktur dan perilaku dari objek-objek yang akan dibuat berdasarkan class tersebut.

class User {
  id: number;
  firstName: string;
  lastName: string;

  constructor(id: number, firstName: string, lastName: string) {
    (this.id = id), (this.firstName = firstName), (this.lastName = lastName);
  }

  login(): boolean {
    return true;
  }
  register(): string {
    return "Register Berhasil";
  }
}

const myUser = new User(1, "ihsan", "santana"); // instance
console.log(myUser.firstName);

2. Class Modifiers (private, public, protected)

Class modifiers adalah kata kunci yang digunakan untuk mengatur aksesibilitas dan perilaku anggota (properti dan metode) dari suatu class dalam TypeScript. Dengan menggunakan class modifiers, Anda dapat mengontrol bagaimana anggota kelas dapat diakses dan dimanipulasi oleh kode di luar kelas tersebut.

Berikut adalah beberapa class modifiers yang dapat digunakan dalam TypeScript:

  1. public: Ini adalah modifier default untuk anggota kelas. Jika tidak diberikan modifier, maka anggota tersebut secara otomatis dianggap sebagai public. Anggota yang diberi modifier public dapat diakses dari mana saja, baik dari dalam kelas itu sendiri maupun dari luar kelas.

  2. private: Anggota kelas yang diberi modifier private hanya dapat diakses dari dalam kelas itu sendiri. Anggota yang bersifat private tidak dapat diakses dari luar kelas, termasuk turunan kelas (subclass).

  3. protected: Anggota kelas yang diberi modifier protected dapat diakses dari dalam kelas itu sendiri dan juga dari turunan kelas (subclass). Namun, anggota yang bersifat protected tetap tidak dapat diakses dari luar kelas atau dari luar turunan kelas.

  4. readonly: Modifier ini digunakan untuk mendefinisikan anggota kelas (properti) yang hanya dapat dibaca dan nilainya tidak dapat diubah setelah inisialisasi. Properti yang bersifat readonly hanya boleh diatur nilai awalnya di konstruktor atau pada saat deklarasi.

access modifier class sub-class instance
public
protected
private
class User {
  id: number;
  firstName: string;
  lastName: string;
  protected isActive: boolean;
  private token: number;

  constructor(id: number, firstName: string, lastName: string) {
    this.id = id,
    this.firstName = firstName,
    this.lastName = lastName,
    this.isActive = true;
    this.token = new Date().getTime();
  }

  login(): boolean {
    return true;
  }
  register(): string {
    return "Register Berhasil";
  }

  getToken(): number {
    return this.token;
  }
}

const myUser = new User(1, "ihsan", "santana"); // instance
console.log(myUser.firstName);
console.log(myUser.getToken());

class DetailUser extends User {
  age: number;
  constructor(age: number, id: number, firstName: string, lastName: string) {
    super(id, firstName, lastName);
    this.age = age;
    this.isActive = false;
  }

  getIsActive(): boolean {
    return this.isActive;
  }
}

const myDetailUser = new DetailUser(12, 1, "ihsdan", "santana");
console.log(myDetailUser.age);
console.log(myDetailUser.getIsActive());

3. Class Modifier ReadOnly

Dalam TypeScript, readonly digunakan untuk mendefinisikan properti pada suatu objek agar nilainya tidak dapat diubah setelah objek dibuat. Artinya, setelah nilai properti ditetapkan maka tidak bisa mengubahnya kembali.

class User {
 readonly id : number
  firstName : string;

  constructor (id : number , firstName : string){
    this.id = id
    this.firstName = firstName
  }

}


const myUser = new User(1, "ihsan")
console.log(myUser.id)
console.log(myUser.firstName)
myUser.firstName = "kaka"
console.log(myUser.firstName)
myUser.id = 20 //terjadi error Cannot assign to 'id' because it is a read-only property.
console.log(myUser.id)

Error di atas disebabkan karena property id bersifat readonly

4. Static Property

Berbeda dengan instance property, static property dibagi di antara semua instances dari sebuah class.

Untuk mendeklarasikan static property, kita dapat menambahkan kata kuncu static. Untuk mengakses properti statis dan di akses dengan className.propertyName

class User {
  id: number;
  firstName: string;
  lastName: string;
  protected isActive: boolean;
  private token: number;
  static max_limit: number = 3
  private retryLogin: number;

  constructor(id: number, firstName: string, lastName: string) {
    this.id = id,
    this.firstName = firstName,
    this.lastName = lastName,
    this.isActive = true;
    this.token = new Date().getTime();
    this.retryLogin = 0;
  }

  login(username: string, password: string): boolean | string {
    this.retryLogin += 1;

    if(this.retryLogin > User.max_limit){
      return "Coba beberapa saat lagi"
    }
    if (username === "admin" && password === "admin") {
      return true;
    }

    if(this.retryLogin === User.max_limit){
      return "Maximal Attemp"
    }



    return false;
  }
  register(): string {
    return "Register Berhasil";
  }

  getToken(): number {
    return this.token;
  }
}

const myUser = new User(1, "ihsan", "santana"); // instance
console.log(myUser.firstName);

console.log('max limit', User.max_limit);
console.log(myUser.login("admin", "tes"));
console.log(myUser.login("admin", "tes"));
console.log(myUser.login("admin", "tes"));
console.log(myUser.login("admin", "tes"));

5. Abstrack Classes

Abstrack Classes biasanya digunakan untuk mendefinisikan perilaku umum yang akan diperluas oleh class turunannya. Berbeda dengan class biasa, Abstrack Classes tidak dapat diinstansiasi secara langsung.

Abstrack Classes adalah class yang tidak dapat dibuat objeknya sendiri. Ini berarti kita tidak dapat membuat instance langsung dari Abstrack Classes. Sebaliknya, Abstrack Classes berfungsi sebagai blue print untuk class turunannya, memberikan struktur dan perilaku yang umum untuk class turunan.

abstract class Identitas {
  name: string;

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

  abstract getSalary() : number
}

class User extends Identitas {
  alamat: string;

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

  getSalary() : number {
return 200000
  }
}

const myUser = new User("ihsan", "bogor");
console.log(myUser.name);
console.log(myUser.getSalary())