Articles
Pengenalan kepada TypeScript
Fungsi dalam TypeScript

Fungsi dalam TypeScript

Artikel ini menerangkan fungsi dalam TypeScript.

YouTube Video

Fungsi dalam TypeScript

Fungsi dalam TypeScript adalah fungsi JavaScript dengan anotasi jenis tambahan. Dalam TypeScript, anda boleh menulis kod yang lebih mantap dengan jelas mentakrifkan jenis input (parameter) dan output (nilai pulangan) untuk fungsi. Di bawah ini, kami memperkenalkan kaedah asas untuk mentakrifkan fungsi dan beberapa ciri fungsi dalam TypeScript.

Definisi Fungsi Asas 

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15
  • Fungsi add mengambil dua argumen bertipe number dan mengembalikan nilai bertipe number.
  • Ia menerima dua argumen, x dan y, kedua-duanya bertipe number, dengan tipe mereka dinyatakan secara eksplisit.
  • Tipe pulangan juga dinyatakan sebagai : number.

Fungsi Tanpa Nama (Ekspresi Fungsi)

Fungsi tanpa nama dan ekspresi fungsi juga boleh digunakan dalam TypeScript. Jenis boleh dianotasi 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 boleh menetapkan fungsi tanpa nama kepada satu pembolehubah dan memanggilnya kemudian.
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 boleh menggunakan ekspresi fungsi yang dinamakan untuk membolehkan panggilan rekursif.

Fungsi Panah

Anotasi jenis boleh digunakan dengan fungsi panah juga.

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

Kod ini mentakrifkan fungsi anak panah subtract dengan anotasi tipe yang menerima dua nombor sebagai argumen dan mengembalikan perbezaan mereka.

Parameter Pilihan dan Parameter Lalai

Parameter boleh dijadikan pilihan atau diberikan nilai lalai.

Parameter Pilihan

Menambah ? selepas nama parameter menjadikannya pilihan.

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

Kod ini menerima argumen pilihan; jika argumen diberikan, ia memberi salam menggunakan nama tersebut, jika tidak, ia mengembalikan salam umum.

Parameter Lalai

Anda juga boleh menetapkan nilai lalai 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 lalai jika tiada argumen dimasukkan, dan memberi salam menggunakan nama yang ditentukan atau lalai.

Definisi Jenis Fungsi

Ia juga mungkin untuk mentakrifkan jenis fungsi itu sendiri. Sebagai contoh, ini digunakan semasa menghantar 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

Kod ini mentakrifkan tipe fungsi Operation yang mengambil dua nombor dan mengembalikan satu nombor, kemudian menggunakannya untuk mencipta dan menjalankan fungsi penambahan dan pendaraban.

Apabila Tiada Nilai Dikembalikan (jenis void)

Untuk fungsi tanpa nilai pemulangan, tentukan jenis void.

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

Kod ini mentakrifkan fungsi void bernama logMessage yang menerima mesej berjenis string dan mencetaknya ke konsol tanpa mengembalikan nilai.

Fungsi Panggilan Balik

Memberikan fungsi sebagai argumen kepada fungsi lain dan melaksanakannya kemudian dipanggil sebagai fungsi panggilan balik. Ia sering digunakan dalam pemprosesan tak segerak dan pengendalian acara.

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, fungsi yang mengeluarkan nilai ke konsol diberikan sebagai fungsi panggilan balik.

Sebagai alternatif, anda boleh mentakrif jenis panggilan balik 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});

Mentakrif jenis panggilan balik menggunakan type atau interface meningkatkan kebolehgunaan semula.

Fungsi Penglebihan Beban

Penggunaan lebih muatan fungsi membolehkan anda mentakrif fungsi dengan nama yang sama tetapi senarai parameter yang berbeza. Dalam TypeScript, anda boleh mendefinisikan pelbagai fungsi dengan nama yang sama dan melaksanakan operasi yang berbeza berdasarkan jenis dan bilangan 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, penglebihan beban dicapai seperti berikut:.

  • Tandatangan Penglebihan Beban

    • Mentakrifkan bagaimana fungsi tersebut boleh digunakan (tandatangannya). Dengan menulis ini beberapa kali, penglebihan beban menjadi mungkin.

  • Tandatangan Pelaksanaan

    • Melaksanakan badan fungsi sebenar. Bahagian ini hanya ditakrifkan sekali dan mengendalikan semua kes yang dinyatakan dalam tandatangan penglebihan beban.

Peraturan untuk Penglebihan Beban

Peraturan berikut terpakai kepada penglebihan beban fungsi:.

  • Susunan Definisi Tandatangan Penglebihan Beban

    • Oleh kerana penilaian berlaku dari atas ke bawah, adalah disarankan untuk mendefinisikan jenis tertentu terlebih dahulu, diikuti oleh jenis yang lebih umum.

  • Keserasian Tandatangan Pelaksanaan

    • Tandatangan pelaksanaan mesti serasi dengan hujah dan nilai pulangan semua tandatangan bebanan berlebihan.

  • Nyatakan Butiran dalam Tandatangan Bebanan Berlebihan

    • Tandatangan pelaksanaan cenderung kabur, jadi butiran harus dinyatakan dalam tandatangan bebanan berlebihan.
    • Jika hanya tandatangan pelaksanaan ditakrifkan, inferens jenis untuk fungsi tersebut akan tidak mencukupi.

Ringkasan

Fungsi dalam TypeScript mempunyai ciri-ciri berikut.

  • Anotasi Jenis
    • Dengan menetapkan jenis untuk argumen dan nilai balik, anda boleh menulis kod yang lebih selamat.
  • Fungsi Tanpa Nama dan Fungsi Anak Panah
    • Ia boleh digunakan seperti dalam JavaScript, dan menambah anotasi jenis meningkatkan keselamatan jenis.
  • Parameter Opsional dan Lalai
    • Anda boleh menjadikan spesifikasi argumen lebih fleksibel mengikut keperluan.
  • Definisi Jenis Fungsi
    • Tentukan jenis fungsi itu sendiri untuk melakukan semakan jenis.
  • Fungsi Berlebihan
    • Anda boleh menyokong argumen yang berbeza dengan nama fungsi yang sama.

Dengan menggunakan ini, anda boleh menulis kod yang lebih jelas dan kukuh dalam TypeScript.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Fungsi Terbina dalam TypeScriptClosure dalam TypeScript