TypeScript - Tipe Fungsi

Hai, para programer muda! Hari ini, kita akan menyelam ke dunia yang menarik jenis tipe fungsi TypeScript. Jangan khawatir jika Anda baru dalam programming; saya akan mengarahkan Anda step-by-step untuk setiap konsep, seperti yang saya lakukan bagi ribuan murid selama tahun-tahun mengajar saya. Mari kita mulai perjalanan menarik ini bersama!

Mengetik Fungsi

Dalam TypeScript, fungsi adalah penduduk pertama kelas, artinya kita dapat memperlakukannya seperti nilai lainnya. Tetapi yang membuat TypeScript istimewa adalah kemampuannya untuk mengetikkan jenis-jenis fungsi ini. Bayangkan Anda adalah seorang koki (fungsi) dengan resep khusus (tipe fungsi). Resep itu memberitahu Anda tentang bahan-bahan yang Anda butuhkan (parameter) dan makanan apa yang Anda akan buat (tipe kembalian).

mari lihat contoh sederhana:

function greet(name: string): string {
return `Hello, ${name}!`;
}

Dalam contoh ini, greet adalah fungsi kita. Itu mengambil name tipe string sebagai masukan dan mengembalikan string. : string setelah tanda kurung bulet menentukan tipe kembalian.

Sekarang, mari kita coba menggunakan fungsi ini:

const greeting = greet("Alice");
console.log(greeting); // Output: Hello, Alice!

TypeScript memastikan bahwa kita menggunakan fungsi dengan benar. Jika kita mencoba untuk mengirimkan bilangan saja:

greet(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

TypeScript akan menangkap kesalahan ini sebelum kita menjalankan kode. Itu seperti memiliki asisten yang membantu di dapur, memastikan Anda tidak secara tak sengaja menggunakan gula sebagai garam!

Ekspresi Tipe Fungsi TypeScript

Sekarang, mari belajar tentang ekspresi tipe fungsi. Ini seperti blueprint untuk fungsi kita. Mereka menjelaskan bagaimana fungsi harus terlihat tanpa benar-benar mengimplentasikannya.

Ini adalah sintaks umum:

(parameter1: type1, parameter2: type2, ...) => returnType

Misalnya:

let mathOperation: (x: number, y: number) => number;

Ini mendeklarasikan mathOperation sebagai variabel yang dapat menampung setiap fungsi yang menerima dua bilangan dan mengembalikan bilangan. Itu seperti mengatakan, "Saya butuh seorang koki yang dapat mengambil dua bahan dan menghasilkan satu hidangan."

Kemudian kita dapat menugaskan fungsi ke variabel ini:

mathOperation = function(x, y) {
return x + y;
}

console.log(mathOperation(5, 3)); // Output: 8

Mendeklarasikan Variabel Tipe Fungsi

Kita juga dapat menggunakan alias tipe untuk memberi nama kepada tipe fungsi kita. Ini sangat berguna ketika kita ingin menggunakan tipe fungsi yang sama di beberapa tempat.

type GreetFunction = (name: string) => string;

let greet: GreetFunction;

greet = function(name) {
return `Hello, ${name}!`;
}

console.log(greet("Bob")); // Output: Hello, Bob!

Dalam contoh ini, GreetFunction adalah alias tipe kita. Itu seperti memberi nama resep kita sehingga kita dapat mudah merujuk kepadanya kemudian.

Menentukan Parameter Fungsi sebagai Fungsi

kadang-kadang, kita ingin menjadikan fungsi sebagai parameter ke fungsi lain. Ini adalah konsep yang kuat dalam programming yang disebut "fungsi tingkat tinggi". Itu seperti memiliki koki utama yang dapat mengarahkan koki lain.

mari lihat contoh:

function applyOperation(x: number, y: number, operation: (a: number, b: number) => number): number {
return operation(x, y);
}

let result = applyOperation(5, 3, (a, b) => a + b);
console.log(result); // Output: 8

result = applyOperation(5, 3, (a, b) => a * b);
console.log(result); // Output: 15

Di sini, applyOperation adalah fungsi tingkat tinggi kita. Itu menerima dua bilangan dan fungsi operasi sebagai parameter. Kita dapat mengirimkan fungsi operasi yang berbeda untuk mendapatkan hasil yang berbeda.

Menggunakan Alias Tipe ke Tipe Fungsi

Alias tipe dapat membuat kode kita lebih mudah dibaca saat berurusan dengan tipe fungsi kompleks. mari lihat contoh yang lebih kompleks:

type MathOperation = (x: number, y: number) => number;
type MathOperationWithDescription = (description: string, operation: MathOperation) => string;

const add: MathOperation = (x, y) => x + y;
const subtract: MathOperation = (x, y) => x - y;

const describeMathOperation: MathOperationWithDescription = (description, operation) => {
return `${description}: ${operation(10, 5)}`;
}

console.log(describeMathOperation("Addition", add)); // Output: Addition: 15
console.log(describeMathOperation("Subtraction", subtract)); // Output: Subtraction: 5

Dalam contoh ini, kita telah menciptakan dua alias tipe: MathOperation dan MathOperationWithDescription. Ini membuat kode kita jauh lebih mudah dibaca dan maintainable.

Berikut adalah tabel yang menggabungkan jenis fungsi yang kita pelajari:

Jenis Fungsi	Deskripsi	Contoh
Tipe Fungsi Dasar	Menentukan tipe parameter dan tipe kembalian	(name: string) => string
Variabel Tipe Fungsi	Variabel yang dapat menampung fungsi tipe tertentu	let greet: (name: string) => string;
Alias Tipe Fungsi	Nama tipe fungsi yang dapat digunakan kembali	type GreetFunction = (name: string) => string;
Fungsi Tingkat Tinggi	Fungsi yang menerima fungsi sebagai parameter	(x: number, y: number, operation: (a: number, b: number) => number) => number

Ingat, tipe fungsi TypeScript tentang memastikan kita menggunakan fungsi kita dengan benar. Mereka seperti penjaga jalan, membantu kita tetap dalam jalur dan menghindari kesalahan. Dengan latihan, Anda akan menemukan bahwa mereka membuat kode Anda lebih kuat dan mudah dipahami.

Tetap mengoding, tetap belajar, dan jangan lupa untuk bersenang-senang dalam perjaluran Anda!

Credits: Image by storyset