Tutorial TypeScript Class dan Module

Video Tutorial Class & Module di TypeScript

Class di TypeScript

Secara singkat class adalah template/kerangka yang digunakan untuk membentuk sebuah object. Dengan demikian object adalah data yang telah terstruktur sesuai dengan yang didefinisikan dalam sebuah class. Object adalah instance dari classnya. JavaScript mendukung class sejak ECMAScript 2015 atau dikenal juga dengan ES6.

Mendefinisikan Class di TypeScript

Untuk mendefinisikan sebuah class gunakan kata kunci class diikuti oleh nama class. Misalnya kita memiliki class Produk seperti di bawah

class Produk {

}

dan untuk membuat instance dari class gunakan kata kunci new seperti:

const baju  = new Produk();

Properti atau Field dari Class

Class kosong seperti produk di atas tidak begitu berguna karena tidak ada informasi yang dapat digunakan. Untuk menambahkan property dari sebuah class mirip seperti mendefinisikan sebuah variable seperti:

class Produk {
    nama: string;
    harga: number;
}

Secara default properti class bersifat public atau bisa diakses oleh dari luar object. Jadi public nama: string sama saja dengan nama: string. Jika ingin membuat property hanya bisa diakses di dalam class saja gunakan kata kunci private. Misal private namaSuplier. Jika ingin properti bisa diakses dari anak class, gunakan kata kunci protected seperti di bawah:

class Produk {
    nama: string;
    harga: number;
    protected discount: number;
}

Fungsi atau Method class

Sebuah class bisa memiliki fungsi atau method untuk melakukan sebuah tugas. Sama seperti properti fungsi juga bisa di set public (default), private dan protected. Mendifinisikan method dari class di TypeScript tidak perlu menggunakan kata kunci function, cukup nama method diikuti dengan return type dan kurung kurawal seperti:

class Produk {
    nama: string;
    harga: number;
    protected discount: number;

    setDiscount(discount: number): void {
        this.discount = discount;
    }

    getDiscount(): number {
        return this.discount;
    }

    getHarga(): number {
        const hargaFinal = (1 - this.discount / 100) * this.harga;
    }
}

Konstruktur / Constructor

Constructor adalah method spesial yang digunakan untuk membuat dan inisialisasi sebuah object dari sebuah class. Constructor bisa memiliki parameter tapi tidak bisa memiliki return type. Di bawah cara mendefinisikan konstruktur di TypeScript.

class Produk {
    nama: string;
    harga: number;
    protected discount: number;

    constructor(nama: string, harga: number) {
        this.nama = nama;
        this.harga = harga;
    }
}

Inheritance atau Pewarisan

Inheritance atau Pewarisan adalah sebuah mekanisme dimana satu atau lebih class diturunkan dari sebuah class lain. Class yang mewarisi atau diturunakn dari class lainnya disebut subclass dari class yang diwarisi. Hal ini sering dijelaskan dalam konteks ayah dan anak (parent dan child). Child class mewarisi semua karakteristik dari parent class. Karakteristik ini adalah properti dan method. Biasanya child class menambahkan fungsionalitas baru yang tidak dimiliki oleh parent class. Sebagai contoh produk digital seperti Film memiliki data spesifik seperti durasi dan produser.

Di TypeScript untuk membuat pewarisan kita menggunakan kata kunci extends seperti di bawah

class Film extends Produk {
    durasi: number;
    produser: string;
    format: string;

    play(): void {
        // fungsi untuk memutar field
    }

    pause(): void {
        // pause field
    }
}

Mengunakan Interface

Pada tutorial TypeScript sebelumnya kita membuat interface Siswa seperti di bawah:

interface Siswa {
    nama: string;
    email: string;
    nis: string;
    kelas: string;
}

Sebuah class bisa membuat implementasi dari sebuah interface. Dimana Interface dalam TypeScript lebih banyak digunakan untuk structur sebuah data, sedangkan setelah diimplementasi dalam sebuah class dalam memiliki fungsi. Di TypeScript kita menggunakan kata kunci implements seperti berikut

class Mahasiswa implements Siswa {
    nama: string;
    nis: string;
    email: string = '';
    kelas: string = '';

    private daftarIzin = {
        sakit: 0,
        alpa: 0
    };

    constructor(nis: string, nama: string) {
        this.nis = nis;
        this.nama = nama;
    }

    izin(tipe: 'sakit' | 'alpa') {
        this.daftarIzin[tipe] += 1;
    }
}

Module di TypeScript

Sebelum ES6 JavaScript tidak memiliki standar untuk memodularkan kode. CommonJs pada saat itu mendefinisikan cara untuk membuat module JavaScript. Kemudian tahun 2015, ES6 memperkenalkan standar untuk membuat module yang disebuh dengan ES Module. Dan pada tahun 2020 hampir semua browser sudah mengdukung fitur ini terutama browser modern.

Mendefinisikan Module di TypeScript

TypeScript mendukung cara mendefinisikan module termasuk dengan cara CommonJs dan ES Module. Dalam tutorial ini kita akan menggunakan ES Module. Untuk mendefinisikan sintaks / kata kunci export dan import. Sebuah file dapat didefinisikan sebagai module utama dengan export default seperti:

// file produk.ts
export default class Produk {
    nama: string;
    harga: number;
    protected discount: number;

    constructor(nama: string, harga: number) {
        this.nama = nama;
        this.harga = harga;
    }
}

kemudian cara menggunakan di file lain misal file lihat-produt.ts

import Produk from "./produk";
const baju = new Produk("Kaos", 1000);

Atau juga tanpa default sehingga satu file bisa meng-export lebih dari satu class, variable, fungsi ataupun interface seperti

// file module.ts
export class Produk {
    nama: string;
    harga: number;
    protected discount: number;

    constructor(nama: string, harga: number) {
        this.nama = nama;
        this.harga = harga;
    }
}

export interface Siswa {
    nama: string;
    email: string;
    nis: string;
    kelas: string;
    alamat?: string;
}

export Mahasiswa implements Siswa {
    private daftarIzin = {
        sakit: 0,
        alpa: 0
    };

    constructor(nis: string, nama: string) {
        this.nis = nis;
        this.nama = nama;
    }

    izin(tipe: 'sakit' | 'alpa') {
        this.daftarIzin[tipe] += 1;
    }
}

Kemudian cara import-nya adalah

import {Produk, Mahasiswa} from './index.ts'
const baju = new Produk("Kaos", 1000);
const siswa = new Mahasiswa("001", "Joni");

Bisa juga menggunakan alias dengan kata kunci as, misal ada dua object memberikan class dengan nama sama seperti

import {Produk as Baju} from './index.ts'
const baju = new Baju("Kaos", 1000);

Kita juga bisa mengambil/import semua komponen dari module menggunakan * seperti

import * as ModulUtama from './index.ts'
const baju = new ModulUtama.Produk("Kaos", 1000);
const siswa = new ModulUtama.Mahasiswa("001", "Joni");

Kesimpulan

Tutorial TypeScript ini telah membahas cara membuat class dan module di TypeScript. Untuk membuat class digunakan kata kunci class sedangkan untuk membuat module menggunakan kata kunci export dan menggunakan module menggunakan import. Tutorial ini dilengkapi dengan video tutorial untuk memperjelas cara membuat module dan class di TypeScript yang bisa dilihat di channel Youtube MyPHPTutorials di Video Tutorial Class & Module di TypeScript. Selamat mencoba, jika ada pertanyaan jangan ragu mengunakan kolom komentar di bawah.