Lecture ini membahas satu konsep penting di TypeScript, yaitu:

Interface bisa digunakan sebagai type untuk sebuah function.

Selain itu, lecture juga menjelaskan perbedaan type dan interface ketika digunakan untuk function, serta kenapa interface yang ada di TypeScript tidak menghasilkan JavaScript code setelah proses compile.

Mari kita bahas pelan-pelan.

1. Konsep dasarnya: function juga punya “type”

Biasanya kita sudah terbiasa memberikan type kepada variable:

let age: number = 25;
let name: string = "John";

Kita juga bisa memberikan type kepada function.

Misalnya kita punya function:

function add(num1: number, num2: number): number {
    return num1 + num2;
}

Function tersebut mempunyai aturan:

Nama function : add

Parameter:
├── num1 → number
└── num2 → number

Return:
└── number

Jadi function add harus:

• menerima 2 parameter
• parameter pertama harus number
• parameter kedua harus number
• mengembalikan number

Inilah yang disebut function signature.

2. Apa itu function signature?

Function signature sederhananya adalah bentuk/kontrak sebuah function.

Contoh:

(num1: number, num2: number) => number

Artinya:

Function ini menerima dua number dan menghasilkan satu number.

Kalau kita punya:

(num1: number, num2: number) => number

maka function seperti ini cocok:

(num1: number, num2: number): number => {
    return num1 + num2;
}

Tetapi function seperti ini tidak cocok:

(num1: number): number => {
    return num1;
}

Karena hanya mempunyai satu parameter.

Begitu juga:

(num1: number, num2: number, text: string): number => {
    return num1 + num2;
}

Tidak cocok dengan signature sebelumnya karena mempunyai parameter tambahan.

3. Cara pertama: menggunakan type

Dalam lecture, pertama-tama dibuat sebuah type bernama SumFn.

type SumFn = (num1: number, num2: number) => number;

Perhatikan struktur ini:

type SumFn
     │
     ▼
(num1: number, num2: number) => number

Artinya kita membuat sebuah type khusus untuk function.

SumFn sekarang bisa dianggap sebagai aturan:

“Function yang menggunakan type SumFn harus menerima dua number dan mengembalikan number.”

4. Menggunakan SumFn pada variable

Misalnya:

let add: SumFn;

Artinya:

Variable add hanya boleh menyimpan function yang memenuhi aturan SumFn.

Kemudian kita isi:

let add: SumFn = (num1: number, num2: number) => {
    return num1 + num2;
};

Ini valid karena:

SumFn
 │
 ├── num1 → number
 ├── num2 → number
 └── return → number

add
 │
 ├── num1 → number ✅
 ├── num2 → number ✅
 └── return → number ✅

Jadi signature-nya cocok.

5. Kalau function tidak sesuai signature?

Misalnya kita menambahkan parameter:

let add: SumFn = (
    num1: number,
    num2: number,
    str: string
) => {
    return num1 + num2;
};

Type SumFn mengatakan:

Harus:
(num1: number, num2: number) => number

Tetapi function yang kita berikan:

(num1: number, num2: number, str: string) => number

Tidak sama.

Karena function tersebut membutuhkan parameter tambahan.

Akibatnya TypeScript akan memberikan error.

6. Kenapa TypeScript melakukan pengecekan ini?

Ini salah satu manfaat utama TypeScript.

Bayangkan function yang seharusnya menerima:

(num1: number, num2: number)

Tetapi kita secara tidak sengaja membuat:

(num1: number, num2: number, str: string)

TypeScript akan memberitahu kita:

“Hey, function ini tidak sesuai dengan kontrak yang sudah ditentukan.”

Jadi error bisa ditemukan sebelum program dijalankan.

7. Sekarang menggunakan interface

Nah, bagian menarik dari lecture.

Selain menggunakan:

type SumFn = (num1: number, num2: number) => number;

Kita juga bisa menggunakan interface untuk mendefinisikan function signature.

Contohnya:

interface SumFn {
    (num1: number, num2: number): number;
}

Perhatikan perbedaannya.

Dengan type:

type SumFn = (num1: number, num2: number) => number;

Dengan interface:

interface SumFn {
    (num1: number, num2: number): number;
}

Konsepnya sama:

SumFn adalah type yang menggambarkan sebuah function.

8. Cara membaca interface function

Bagian ini:

interface SumFn {
    (num1: number, num2: number): number;
}

Mungkin terlihat agak aneh kalau baru pertama kali melihatnya.

Biasanya interface kita lihat seperti:

interface User {
    name: string;
    age: number;
}

Tetapi pada function interface:

interface SumFn {
    (num1: number, num2: number): number;
}

Tidak ada nama method seperti:

getName()

Kenapa?

Karena interface tersebut secara langsung mendefinisikan signature dari function.

Cara membacanya:

“Sebuah value yang menggunakan interface SumFn harus berupa function yang menerima num1 dan num2, keduanya number, dan menghasilkan number.”

9. Menggunakan interface tersebut

Sekarang kita bisa melakukan:

let add: SumFn = (num1: number, num2: number) => {
    return num1 + num2;
};

Artinya:

add
 │
 └── harus mengikuti SumFn
          │
          ├── num1 → number
          ├── num2 → number
          └── return → number

Function tersebut cocok, sehingga tidak ada error.

10. Kalau signature-nya tidak cocok

Misalnya:

interface SumFn {
    (num1: number, num2: number): number;
}

Tetapi:

let add: SumFn = (
    num1: number,
    num2: number,
    text: string
) => {
    return num1 + num2;
};

TypeScript akan memberikan error.

Karena interface mengatakan:

2 parameter

sedangkan function kita mempunyai:

3 parameter

11. Jadi type dan interface bisa sama-sama digunakan?

Ya.

Untuk kasus ini:

Menggunakan type

type SumFn = (num1: number, num2: number) => number;

Menggunakan interface

interface SumFn {
    (num1: number, num2: number): number;
}

Keduanya bisa digunakan seperti:

let add: SumFn = (num1, num2) => {
    return num1 + num2;
};

12. Mana yang lebih sering digunakan?

Menurut lecture, untuk function type seperti ini, biasanya developer lebih sering menggunakan type.

Contohnya:

type SumFn = (num1: number, num2: number) => number;

Daripada:

interface SumFn {
    (num1: number, num2: number): number;
}

Keduanya valid, tetapi type biasanya lebih jelas dan umum digunakan untuk mendefinisikan function type.

Jadi ketika kamu melihat:

type Callback = (value: string) => void;

jangan bingung.

Itu hanya berarti:

Kita membuat type bernama Callback yang harus berupa function dengan signature tertentu.

13. Kenapa lecture tetap membahas interface?

Karena kamu mungkin akan menemukan kode seperti ini di project TypeScript:

interface Callback {
    (value: string): void;
}

Kalau sebelumnya kamu hanya tahu interface untuk object:

interface User {
    name: string;
}

kamu mungkin bertanya:

“Lho, kenapa interface tidak punya property, tetapi langsung ada parameter function?”

Nah, sekarang kamu sudah tahu.

Itu adalah interface yang digunakan untuk mendefinisikan function signature.

14. Hubungannya dengan konsep interface sebelumnya

Sebelumnya kita belajar interface seperti:

interface User {
    name: string;
    age: number;
    getName(): string;
}

Interface berfungsi sebagai kontrak.

Sekarang konsep yang sama digunakan untuk function:

interface SumFn {
    (num1: number, num2: number): number;
}

Jadi interface mengatakan:

“Kalau kamu menggunakan SumFn, kamu harus mempunyai bentuk function seperti ini.”

15. Hal yang sangat penting: interface tidak ada di JavaScript

Ini salah satu poin terakhir yang ditekankan lecture.

Misalnya TypeScript kita:

interface SumFn {
    (num1: number, num2: number): number;
}

let add: SumFn = (num1, num2) => {
    return num1 + num2;
};

Ketika TypeScript di-compile menjadi JavaScript, interface tersebut akan hilang.

JavaScript hasil compile kira-kira menjadi:

let add = (num1, num2) => {
    return num1 + num2;
};

Tidak ada:

interface SumFn {
}

Kenapa?

Karena JavaScript memang tidak mempunyai konsep interface seperti TypeScript.

16. Interface hanya membantu saat development

Ini konsep yang sangat penting.

Interface TypeScript membantu developer saat menulis kode:

              TYPESCRIPT
                  │
                  ▼
        ┌──────────────────┐
        │     Interface    │
        │                  │
        │ Validasi type    │
        │ Cek kontrak      │
        │ Cegah kesalahan  │
        └────────┬─────────┘
                 │
              compile
                 │
                 ▼
             JAVASCRIPT
                 │
                 │
                 └── Interface hilang

Jadi interface terutama digunakan untuk:

• type checking
• membantu IDE
• autocomplete
• mendeteksi error
• memastikan kontrak dipenuhi
• membantu developer selama development

Tetapi interface tidak menjadi runtime feature di JavaScript hasil compile.

17. Contoh sederhana

Misalnya:

interface User {
    name: string;
    age: number;
}

Kemudian:

const user: User = {
    name: "John",
    age: 25
};

TypeScript akan memeriksa:

User
├── name → string ✅
└── age  → number ✅

Tetapi setelah compile:

const user = {
    name: "John",
    age: 25
};

Tidak ada lagi:

User

Interface hanya digunakan TypeScript untuk melakukan pengecekan ketika development/compile.

18. Analogi paling mudah

Bayangkan kamu mau membangun rumah.

Interface adalah seperti blueprint atau dokumen aturan pembangunan.

Misalnya blueprint mengatakan:

Rumah harus punya:
- 2 pintu
- 3 jendela
- 1 kamar mandi

Blueprint membantu tukang memastikan rumah dibangun sesuai aturan.

Tetapi setelah rumah selesai:

Blueprint tersebut bukan bagian dari rumah.

Begitu juga interface.

Interface
    ↓
Membantu saat development
    ↓
TypeScript compile
    ↓
JavaScript
    ↓
Interface tidak ada

19. Perbedaan type dan interface dalam kasus ini

Cara gampang mengingatnya:

type

type SumFn = (a: number, b: number) => number;

Cocok untuk:

“Saya ingin membuat sebuah type yang bentuknya adalah function.”

interface

interface SumFn {
    (a: number, b: number): number;
}

Juga bisa.

Tetapi penggunaannya untuk function signature seperti ini lebih jarang dibanding type.

20. Gambaran keseluruhan lecture

                 FUNCTION TYPE
                      │
            ┌─────────┴─────────┐
            │                   │
           type             interface
            │                   │
            ▼                   ▼
type SumFn =             interface SumFn {
(a: number,                (a: number,
 b: number) => number;      b: number): number;
                           }
            │                   │
            └─────────┬─────────┘
                      │
                      ▼
                 let add: SumFn
                      │
                      ▼
              harus berupa function
                      │
             ┌────────┴────────┐
             │                 │
          cocok             tidak cocok
             │                 │
             ▼                 ▼
           ✅ OK             ❌ Error

21. Yang perlu kamu ingat

Kalau dirangkum menjadi beberapa poin:

1. Function juga mempunyai type

(num1: number, num2: number) => number

Artinya function menerima dua number dan mengembalikan number.

2. Kita bisa membuat function type dengan type

type SumFn = (num1: number, num2: number) => number;

3. Kita juga bisa membuat function type dengan interface

interface SumFn {
    (num1: number, num2: number): number;
}

4. Function yang diberikan harus sesuai signature

let add: SumFn = (num1, num2) => {
    return num1 + num2;
};

5. Kalau signature tidak cocok → TypeScript error

Misalnya jumlah atau tipe parameter tidak sesuai.

6. Untuk function type, type biasanya lebih umum digunakan

type SumFn = (a: number, b: number) => number;

7. Interface tidak menghasilkan JavaScript code

Interface hanya membantu TypeScript saat development dan compile-time, bukan saat runtime.

🧠 Cheat Sheet

TYPE FUNCTION
│
├── Cara umum
│   type SumFn = (a: number, b: number) => number;
│
└── Bisa juga dengan interface
    interface SumFn {
        (a: number, b: number): number;
    }


KETIKA DIPAKAI
│
└── let add: SumFn = (a, b) => a + b;


HASIL COMPILE
│
└── interface → DIHAPUS
    karena JavaScript tidak memiliki interface

Kalimat kunci lecture ini:

Interface tidak hanya bisa digunakan untuk mendefinisikan bentuk object/class; interface juga bisa digunakan untuk mendefinisikan signature sebuah function. Namun untuk function type, type biasanya lebih umum digunakan.