Function pada Typescript

Kali ini kita akan belajar tentang function pada typescript. Function ini sebenarnya sama dengan function pada javascript. Untuk penulisannya juga hampir mirip dengan javascript tapi kita harus menentukan tipe data untuk parameter dan juga returnnya. Seperti halnya bahasa pemrograman lain, function yang tidak mengembalikan data kita set sebagai void. Untuk lebih jelasnya mari kita perhatikan contoh berikut ini.

describe("Function", function (){
    it('should support function', () => {
        function saySomething(name: string): string {
            return `Halo ${name}, how are you?`
        }
        
        expect(saySomething("Ardhan")).toBe("Halo Ardhan, how are you?");
        
        function printYourName(name: string): void {
            console.info(`Your name is ${name}`);
        }
        
        printYourName("Ardhan");
    });
});

Contoh pertama di atas adalah fungsi saySomething yang mana parameternya adalah name dengan tipe data string. Fungsi saySomething mengembalikan nilai berupa string juga. Untuk contoh yang kedua adalah fungsi printYourName. Pada fungsi ini kita tidak mengembalikan nilai sehingga tipe data balikannya adalah void.

Parameter Function pada TypeScript

Seperti bahasa pemrograman pada umumnya, function pada typescript bisa memiliki banyak parameter. Tapi ada yang beda dengan typescript dimana di typescript parameternya mendukung variable argument dan juga default value. Di typescript kita juga bisa menjadikan parameternya menjadi optional.

Default Parameter

Berikut ini adalah contoh penggunaan default parameter pada typescript.

describe("Function", function (){
    it('should support default value', () => {
        function saySomething(name: string = "Guest"): string {
            return `Halo ${name}, how are you?`
        }

        expect(saySomething()).toBe("Halo Guest, how are you?");
        expect(saySomething("Ardhan")).toBe("Halo Ardhan, how are you?");
    });
});

Pada contoh di atas fungsi saySomething memiliki nilai default parameter yaitu Guest. Dengan begitu, jika kita tidak mengisi name-nya maka dia akan menggunakan nilai default yang sudah kita tentukan tersebut.

Variable Argument

Parameter variable argument ditulis dengan cara menambahkan titik 3 sebelum nama parameter. Berikut ini adalah contoh penggunaan variable argumen untuk function pada typescript.

describe("Function", function (){
    it('should support variable argument', () => {
        function sum(...values: number[]): number {
            let total: number = 0;
            for (const value of values) {
                total += value;
            }

            return total;
        }

        expect(sum(1,2,3)).toBe(6);

    });
});

Pada contoh di atas kita punya sebuah fungsi yang menjumlahkan semua argument. Untuk pemanggilan fungsi kita bisa menggunakan banyak parameter contoh 1,2, dan 3. Nantinya hasil fungsinya adalah 1+2+3 = 6.

Optional Parameter Function pada Typescript

Seperti halnya variable, parameter pada function juga bisa kita set menjadi optional. Artinya, parameter tersebut bisa diisi atau bisa tidak diisi. Cara menjadikan optional sama dengan variable, yaitu menggunakan tanda tannya (?) setelah variable. Untuk lebih jelasnya, perhatikan contoh berikut ini.

describe("Function", function (){
    it('should support optional parameter', () => {
        function greeting(firstName: string, lastName?: string): string {
            let text:string = `Hallo ${firstName}`;
            if (lastName) {
                text += ` ${lastName}`;
            }

            return text;
        }

        console.info(greeting("Ardhan", "Rahmannu"));
        console.info(greeting("Ardhan"));
    });
});

Perhatikan contoh di atas. Pada contoh tersebut lastName dibuat menjadi optional sehingga saat kita memanggil greeting(“Ardhan”) tidak menyebabkan error.

Function Overloading

Function overloading adalah kemampuan untuk membuat fungsi dengan nama yang sama namun menggunakan input parameter yang berbeda. Typescript tidak seperti Java yang bisa secara otomatis menangani overloading. Agar kita bisa menggunakan overloading pada typescript kita harus membuat daftar function yang akan kita overloading tanpa mengisi deklarasinya. Jika sudah kita membuat function overloadingnya dengan parameter dengan tipe any. Untuk lebih jelasnya perhatikan contoh berikut.

describe("Function", function (){
    it('should support overloading function', () => {
        function guessType(value1: string, value2: string): string;
        function guessType(value1: number, value2: number): number;

        function guessType(value1: any, value2: any) {
            if (typeof value1 === "string" && typeof value2 === "string") {
                return value1 + value2;
            } else if (typeof value1 === "number" && typeof value2 === "number") {
                return (value1 + value2) * 10;
            }
        }

        console.info(guessType("Ardhan", "Rahmanu"));
        console.info(guessType(100, 200));
    });
});

Contoh di atas kita akan melakukan overloading terhadap function guessType. Jika guessType kedua parameternya adalah string maka kita akan melakukan penggabungan string dan mengembalikan nilai dengan tipe string. Jika keduanya adalah number maka kita jumlahkan kedunya lalu kalikan dengan 10 dan kita kembalikan nilainya dengan tipe number. Dengan overloading di atas kita akan mendapatkan hasil seperti ini:

Function sebagai Parameter

Di typescript function bisa digunakan sebagai parameter seperti halnya pada javascript. Untuk menjadikan function sebagai parameter kita bisa menggunakan interface atau langsung menyebutkan function tersebut pada parameternya. Untuk lebih jelasnya, perhatikan contoh berikut ini.

describe("Function", function (){
    it('should support function as parameter', () => {
        function greeting(name: string, format: (name:string) => string) {
            return `Good morning, ${format(name)}`;
        }

        function toUpper(name: string): string {
            return name.toUpperCase();
        }

        function toLower(name: string): string {
            return name.toLowerCase();
        }

        console.info(greeting("Ardhan", toUpper));
        console.info(greeting("Ardhan", toLower));
    });
});

Pada contoh di atas function greeting memiliki 2 parameter, parameter yang pertama adalah string sedangkan parameter yang kedua adalah function format: (name:string) => string). Perlu diperhatikan bahwa format bukanlah syntax format adalah nama variable. Perlu diperhatikan juga bahwa fungsi yang akan kita jadikan sebagai parameter harus sama dengan parameter yang sudah ditentukan.

Penutup Function pada TypeScript

Nah, demikianlah sedikit penjelasan tentang function pada typescript. Materi typescript sebenarnya masih banyak. Akan aku tulis lagi jika ada waktu.