TypeScript - Fungsi: Panduan untuk Pemula
Hai, para pemrogram yang sedang mencari ilmu! Hari ini, kita akan memulai perjalanan menarik ke dunia fungsi TypeScript. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah ini satu demi satu. Pada akhir tutorial ini, Anda akan terkejut dengan apa yang Anda bisa lakukan dengan fungsi di TypeScript!
Apa Itu Fungsi?
Sebelum kita mendalam, mari kita mengerti apa itu fungsi. PERTimbangkan fungsi sebagai resep yang dapat digunakan kembali. Seperti Anda mengikuti resep untuk membuat kue, fungsi adalah sebuah set instruksi yang melakukan tugas tertentu dalam program Anda.
Ini adalah contoh fungsi sederhana di TypeScript:
function greet(name: string): string {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!
Dalam contoh ini, greet
adalah fungsi kami. Itu mengambil name
sebagai masukan dan mengembalikan pesan salam. : string
setelah parameter dan setelah tanda kurung menandakan bahwa fungsi ini mengambil string sebagai masukan dan mengembalikan string.
Parameter Opsional
kadang-kadang, Anda mungkin ingin membuat parameter opsional. Dalam TypeScript, Anda dapat melakukan ini dengan menambahkan ?
setelah nama parameter.
function introduce(name: string, age?: number): string {
if (age) {
return `Hi, I'm ${name} and I'm ${age} years old.`;
} else {
return `Hi, I'm ${name}.`;
}
}
console.log(introduce("Bob")); // Output: Hi, I'm Bob.
console.log(introduce("Charlie", 30)); // Output: Hi, I'm Charlie and I'm 30 years old.
Dalam fungsi ini, age
adalah opsional. Jika itu disediakan, kita memasukkannya dalam pengenalan; jika tidak, kita melewatkan itu.
Parameter Sisa
Parameter sisa memungkinkan Anda bekerja dengan beberapa parameter sebagai array. Itu seperti mengatakan, "Saya tidak tahu berapa banyak bahan Anda akan memberikan, tapi saya akan menggunakannya semua dalam resep saya!"
function makeShake(...fruits: string[]): string {
return `I made a shake with ${fruits.join(", ")}.`;
}
console.log(makeShake("banana")); // Output: I made a shake with banana.
console.log(makeShake("strawberry", "mango", "kiwi")); // Output: I made a shake with strawberry, mango, kiwi.
Sintaks ...fruits
memberitahu TypeScript untuk mengambil semua argumen yang diberikan dan memasukkannya ke dalam array fruits
.
Parameter Default
Parameter default adalah seperti punya rencana cadangan. Jika seseorang tidak menyediakan nilai, kita akan gunakan yang default.
function orderCoffee(size: string = "medium", type: string = "latte"): string {
return `You ordered a ${size} ${type}.`;
}
console.log(orderCoffee()); // Output: You ordered a medium latte.
console.log(orderCoffee("large")); // Output: You ordered a large latte.
console.log(orderCoffee("small", "espresso")); // Output: You ordered a small espresso.
Jika Anda tidak menentukan ukuran atau jenis, itu default ke medium latte. Sangat mudah!
Fungsi Anonim
Fungsi anonim adalah seperti agen rahasia - mereka tidak punya nama! Mereka sering digunakan saat Anda memerlukan fungsi cepat yang Anda hanya akan gunakan sekali.
let greet = function(name: string): string {
return `Hello, ${name}!`;
};
console.log(greet("David")); // Output: Hello, David!
Di sini, kita menugaskan fungsi anonim ke variabel greet
. Kita kemudian dapat menggunakan greet
seperti fungsi biasa.
Konstruktor Fungsi
Konstruktor Fungsi adalah cara untuk membuat fungsi secara dinamis. Itu seperti membuat robot yang dapat melakukan tugas berdasarkan instruksi yang Anda berikan.
let multiply = new Function('a', 'b', 'return a * b');
console.log(multiply(4, 5)); // Output: 20
Dalam contoh ini, kita membuat fungsi yang mengalikan dua angka. Argumen terakhir selalu adalah tubuh fungsi, dan sisanya adalah nama parameter.
Rekursi dan Fungsi TypeScript
Rekursi adalah saat fungsi memanggil dirinya sendiri. Itu seperti boneka Rusia beranak - setiap boneka mengandung versi yang lebih kecil dari dirinya sendiri.
function countdown(n: number): void {
if (n <= 0) {
console.log("Blast off!");
} else {
console.log(n);
countdown(n - 1);
}
}
countdown(3);
// Output:
// 3
// 2
// 1
// Blast off!
Fungsi ini menghitung mundur dari nomor yang diberikan ke nol. Itu terus memanggil dirinya sendiri dengan nomor yang lebih kecil sampai mencapai nol.
Fungsi Lambda
Fungsi Lambda, juga dikenal sebagai fungsi panah, adalah cara singkat menulis fungsi. Itu seperti singkatan teks untuk fungsi!
let add = (a: number, b: number): number => a + b;
console.log(add(3, 4)); // Output: 7
Sintaks ini sangat berguna untuk fungsi pendek dan sederhana.
Variasi Tatabahasa
TypeScript menawarkan berbagai cara untuk mendefinisikan fungsi. Berikut adalah tabel yang menggabungkan sintaks yang berbeda:
Sintaks | Contoh |
---|---|
Deklarasi Fungsi |
function greet(name: string): string { return Hello, ${name}!; }
|
Eksprési Fungsi |
let greet = function(name: string): string { return Hello, ${name}!; };
|
Fungsi Panah |
let greet = (name: string): string => Hello, ${name}!;
|
Metode dalam Objek |
let obj = { greet(name: string): string { return Hello, ${name}!; } };
|
Fungsi Asinkron | async function fetchData(): Promise<void> { /* ... */ } |
Overload Fungsi
Overload fungsi memungkinkan Anda mendefinisikan beberapa tanda tangan fungsi untuk fungsi yang sama. Itu seperti memiliki beberapa resep untuk makanan yang sama, tergantung pada bahan yang Anda punyai.
function makeNoise(animal: "cat"): string;
function makeNoise(animal: "dog"): string;
function makeNoise(animal: string): string {
switch(animal) {
case "cat":
return "Meow";
case "dog":
return "Woof";
default:
return "Unknown animal";
}
}
console.log(makeNoise("cat")); // Output: Meow
console.log(makeNoise("dog")); // Output: Woof
Fungsi ini dapat menangani berbagai jenis hewan dan membuat suara yang sesuai.
Dan itu adalah! Kita telah menelusuri banyak hal hari ini, dari fungsi dasar ke konsep yang lebih maju seperti rekursi dan overload fungsi. Ingat, belajar mengkode adalah seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan khawatir untuk mencoba konsep ini dan membuat fungsi Anda sendiri. Sebelum Anda sadari, Anda akan menulis program kompleks dengan mudah. Semangat coding, dan lihat Anda di les berikutnya!
Credits: Image by storyset