Fungsi dalam TypeScript

Artikel ini menjelaskan fungsi dalam TypeScript.

YouTube Video

Fungsi dalam TypeScript

Fungsi dalam TypeScript adalah fungsi JavaScript dengan anotasi tipe tambahan. Dalam TypeScript, Anda dapat menulis kode yang lebih andal dengan mendefinisikan tipe input (parameter) dan output (nilai pengembalian) secara jelas pada fungsi. Di bawah ini, kami memperkenalkan metode dasar untuk mendefinisikan fungsi dan beberapa karakteristik fungsi dalam TypeScript.

Definisi Fungsi Dasar

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• Fungsi add menerima dua argumen bertipe number dan mengembalikan nilai bertipe number.
• Fungsi ini menerima dua argumen, x dan y, keduanya bertipe number, dengan tipe mereka yang dispesifikasikan secara eksplisit.
• Tipe nilai kembali juga dispesifikasikan sebagai : number.

Fungsi Tanpa Nama (Ekspresi Fungsi)

Fungsi tanpa nama dan ekspresi fungsi juga dapat digunakan dalam TypeScript. Tipe dapat diberi anotasi dengan cara yang sama.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• Anda dapat menetapkan fungsi anonim ke sebuah variabel dan memanggilnya nanti.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• Anda dapat menggunakan ekspresi fungsi bernama untuk memungkinkan pemanggilan rekursif.

Fungsi Panah (Arrow Functions)

Anotasi tipe juga dapat digunakan dengan fungsi panah.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

Kode ini mendefinisikan fungsi panah subtract dengan anotasi tipe yang menerima dua angka sebagai argumen dan mengembalikan selisihnya.

Parameter Opsional dan Default

Parameter dapat dibuat opsional atau diberi nilai default.

Parameter Opsional

Menambahkan ? setelah nama parameter membuatnya menjadi opsional.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

Kode ini menerima argumen opsional; jika argumen diberikan, maka akan menyapa dengan nama, jika tidak akan mengembalikan salam umum/genetik.

Parameter Default

Anda juga dapat menetapkan nilai default untuk parameter.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

Fungsi ini menggunakan "Guest" sebagai nilai default jika tidak ada argumen yang diberikan, dan menyapa menggunakan nama yang ditentukan atau nama default.

Definisi Tipe Fungsi

Dimungkinkan juga untuk mendefinisikan tipe dari fungsi itu sendiri. Sebagai contoh, ini digunakan ketika mengoper fungsi sebagai argumen.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

Kode ini mendefinisikan tipe fungsi Operation yang menerima dua angka dan mengembalikan sebuah angka, lalu menggunakannya untuk membuat dan menjalankan fungsi penjumlahan dan perkalian.

Ketika Tidak Ada Nilai Pengembalian (tipe void)

Untuk fungsi tanpa nilai kembalian, tentukan tipe void.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

Kode ini mendefinisikan fungsi void bernama logMessage yang menerima pesan string dan mencetaknya ke konsol tanpa mengembalikan nilai.

Fungsi Callback

Melewatkan sebuah fungsi sebagai argumen ke fungsi lain dan mengeksekusinya nanti disebut fungsi callback. Ini sering digunakan dalam pemrosesan asinkron dan penanganan event.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

Dalam contoh ini, sebuah fungsi yang menampilkan nilai ke konsol dilewatkan sebagai fungsi callback.

Sebagai alternatif, Anda dapat mendefinisikan tipe callback menggunakan type atau interface.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

Mendefinisikan tipe callback dengan menggunakan type atau interface meningkatkan kegunaan ulang.

Overloading Fungsi

Overloading fungsi memungkinkan Anda mendefinisikan fungsi dengan nama yang sama tetapi daftar parameter yang berbeda. Dalam TypeScript, Anda dapat mendefinisikan beberapa fungsi dengan nama yang sama dan melakukan operasi yang berbeda berdasarkan jenis dan jumlah parameter.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

Dalam TypeScript, overloading dilakukan sebagai berikut:.

• Tanda Tangan Overload

  • Mendefinisikan bagaimana fungsi dapat digunakan (tanda tangannya). Dengan menuliskannya beberapa kali, overloading menjadi mungkin.

• Tanda Tangan Implementasi

  • Mengimplementasikan tubuh fungsi yang sebenarnya. Bagian ini didefinisikan hanya sekali dan menangani semua kasus yang dinyatakan dalam tanda tangan overload.

Aturan untuk Overloading

Aturan berikut berlaku untuk overloading fungsi:.

• Urutan Definisi Tanda Tangan Overload

  • Karena evaluasi dilakukan dari atas ke bawah, disarankan untuk mendefinisikan tipe spesifik terlebih dahulu, diikuti oleh tipe yang lebih umum.

• Kompatibilitas Tanda Tangan Implementasi

  • Tanda tangan implementasi harus kompatibel dengan argumen dan nilai kembalian dari semua tanda tangan overload.

• Spesifikasikan Detail pada Tanda Tangan Overload

  • Tanda tangan implementasi cenderung ambigu, oleh karena itu detail harus dispesifikasikan pada tanda tangan overload.
  • Jika hanya tanda tangan implementasi yang didefinisikan, pengambilan kesimpulan tipe untuk fungsi akan tidak mencukupi.

Ringkasan

Fungsi-fungsi dalam TypeScript memiliki karakteristik berikut.

• Anotasi Tipe
  • Dengan menentukan tipe untuk argumen dan nilai kembali, Anda dapat menulis kode yang lebih aman.
• Fungsi Anonim dan Fungsi Panah
  • Fungsi-fungsi tersebut dapat digunakan seperti di JavaScript, dan menambahkan anotasi tipe meningkatkan keamanan tipe.
• Parameter Opsional dan Default
  • Anda dapat membuat spesifikasi argumen menjadi lebih fleksibel sesuai kebutuhan.
• Definisi Tipe Fungsi
  • Tentukan tipe dari fungsi itu sendiri untuk melakukan pemeriksaan tipe.
• Peng-overload-an Fungsi
  • Anda dapat mendukung argumen yang berbeda dengan nama fungsi yang sama.

Dengan memanfaatkan ini, Anda dapat menulis kode yang lebih jelas dan lebih tangguh di TypeScript.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video