Bagaimana untuk menulis kelebihan fungsi dalam TypeScript? Pengenalan kepada penulisan

Bagaimana untuk menulis lebihan fungsi dalam TypeScript? Artikel berikut akan memperkenalkan kepada anda cara menulis lebihan fungsi dalam TypeScript Saya harap ia akan membantu anda!

Kebanyakan fungsi menerima set parameter tetap.

Tetapi sesetengah fungsi boleh menerima bilangan argumen yang berubah-ubah, jenis argumen yang berbeza dan juga mengembalikan jenis yang berbeza bergantung pada cara anda memanggil fungsi tersebut. Untuk menganotasi fungsi tersebut, TypeScript menyediakan lebihan fungsi.

1. Tandatangan fungsi

Mari kita pertimbangkan dahulu fungsi yang mengembalikan mesej ucapan kepada orang tertentu.

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

Fungsi di atas menerima 1 parameter jenis aksara: nama orang itu. Memanggil fungsi ini sangat mudah:

greet('World'); // 'Hello, World!'

Bagaimana jika anda ingin menjadikan fungsi greet() lebih fleksibel? Sebagai contoh, biarkan ia juga menerima senarai orang untuk disambut.

Fungsi sedemikian akan menerima rentetan atau tatasusunan rentetan sebagai hujah dan mengembalikan rentetan atau tatasusunan rentetan.

Bagaimana untuk menganotasi fungsi sedemikian? Ada 2 cara.

Kaedah pertama adalah sangat mudah, iaitu mengubah suai terus tandatangan fungsi dengan mengemas kini parameter dan jenis pulangan. Inilah rupa greet() selepas pemfaktoran semula:

function greet(person: string | string[]): string | string[] {
  if (typeof person === 'string') {
    return `Hello, ${person}!`;
  } else if (Array.isArray(person)) {
    return person.map(name => `Hello, ${name}!`);
  }
  throw new Error('Unable to greet');
}

Kini kita boleh memanggil greet() dalam dua cara:

greet('World');          // 'Hello, World!'
greet(['小智', '大冶']); // ['Hello, 小智!', 'Hello, 大冶!']

Kemas kini terus tandatangan fungsi untuk menyokong berbilang Kaedah panggilan ini adalah kaedah biasa dan baik.

Walau bagaimanapun, dalam sesetengah kes, kami mungkin perlu mengambil pendekatan lain dan menentukan secara individu semua cara fungsi anda boleh dipanggil. Pendekatan ini dipanggil overloading fungsi.

2. Fungsi terlebih beban

Kaedah kedua ialah menggunakan fungsi lebihan beban. Saya mengesyorkan pendekatan ini apabila tandatangan fungsi agak kompleks dan melibatkan pelbagai jenis.

Mentakrifkan lebihan fungsi memerlukan penentuan tandatangan lebihan dan tandatangan pelaksanaan.

Tandatangan beban lampau mentakrifkan parameter formal dan jenis pengembalian fungsi, tanpa badan fungsi. Fungsi boleh mempunyai berbilang tandatangan terlebih beban: sepadan dengan cara yang berbeza untuk memanggil fungsi.

Sebaliknya, tandatangan pelaksanaan juga mempunyai jenis parameter dan jenis pulangan, dan juga mempunyai badan fungsi pelaksanaan, dan hanya boleh ada satu tandatangan pelaksanaan.

// 重载签名
function greet(person: string): string;
function greet(persons: string[]): string[];
 
// 实现签名
function greet(person: unknown): unknown {
  if (typeof person === 'string') {
    return `Hello, ${person}!`;
  } else if (Array.isArray(person)) {
    return person.map(name => `Hello, ${name}!`);
  }
  throw new Error('Unable to greet');
}

greet() Fungsi ini mempunyai dua tandatangan beban lampau dan tandatangan pelaksanaan.

Setiap tandatangan beban lampau menerangkan satu cara fungsi boleh dipanggil. Setakat fungsi greet(), kita boleh memanggilnya dalam dua cara: dengan parameter rentetan atau dengan parameter tatasusunan rentetan.

Tandatangan pelaksanaan function greet(person: unknown): unknown { ... } mengandungi logik yang sesuai untuk cara fungsi berfungsi.

Kini, seperti di atas, greet() boleh dipanggil dengan argumen jenis rentetan atau tatasusunan rentetan.

greet('World');          // 'Hello, World!'
greet(['小智', '大冶']); // ['Hello, 小智!', 'Hello, 大冶!']

2.1 Tandatangan terlebih beban boleh dipanggil

Walaupun tandatangan pelaksanaan melaksanakan gelagat fungsi, ia tidak boleh dipanggil secara langsung. Hanya tandatangan yang terlebih muatan boleh dipanggil.

greet('World');          // 重载签名可调用
greet(['小智', '大冶']); // 重载签名可调用

const someValue: unknown = 'Unknown';
greet(someValue);       // Implementation signature NOT callable

// 报错
No overload matches this call.
  Overload 1 of 2, '(person: string): string', gave the following error.
    Argument of type 'unknown' is not assignable to parameter of type 'string'.
  Overload 2 of 2, '(persons: string[]): string[]', gave the following error.
    Argument of type 'unknown' is not assignable to parameter of type 'string[]'.

Dalam contoh di atas, walaupun tandatangan pelaksanaan menerima parameter unknown, fungsi unknown (greet(someValue)) tidak boleh dipanggil dengan parameter jenis greet().

2.2 Tandatangan pelaksanaan mestilah generik

// 重载签名
function greet(person: string): string;
function greet(persons: string[]): string[]; 
// 此重载签名与其实现签名不兼容。

 
// 实现签名
function greet(person: unknown): string {
  // ...
  throw new Error('Unable to greet');
}

Fungsi tandatangan terlampau beban greet(person: string[]): string[] ditandakan sebagai tidak serasi dengan greet(person: unknown): string . Pelaksanaan

jenis pemulangan string yang ditandatangani tidak cukup generik dan tidak serasi dengan jenis pemulangan string[] yang ditandatangani terlebih muatan.

3. Kaedah terlebih beban

Walaupun dalam contoh sebelumnya, lebihan fungsi digunakan pada fungsi biasa. Tetapi kita juga boleh membebankan kaedah

Dalam selang kelebihan beban kaedah, tandatangan terlebih muatan dan tandatangan pelaksanaan adalah sebahagian daripada kelas.

Sebagai contoh, kami melaksanakan kelas Greeter dengan kaedah terlebih beban greet(). Kelas

class Greeter {
  message: string;
 
  constructor(message: string) {
    this.message = message;
  }
 
  // 重载签名
  greet(person: string): string;
  greet(persons: string[]): string[];
 
  // 实现签名
  greet(person: unknown): unknown {
    if (typeof person === 'string') {
      return `${this.message}, ${person}!`;
    } else if (Array.isArray(person)) {
      return person.map(name => `${this.message}, ${name}!`);
    }
    throw new Error('Unable to greet');
  }

Greeter mengandungi greet() kaedah terlebih beban: 2 tandatangan terlebih beban yang menerangkan cara memanggil kaedah dan tandatangan pelaksanaan yang mengandungi pelaksanaan yang betul

Kaedah wajar terlebih muatan, kita boleh memanggil hi.greet() dalam dua cara: menggunakan rentetan atau menggunakan tatasusunan rentetan sebagai parameter.

const hi = new Greeter('Hi');
 
hi.greet('小智');       // 'Hi, 小智!'
hi.greet(['王大冶', '大冶']); // ['Hi, 王大冶!', 'Hi, 大冶!']

4. Bila hendak menggunakan lebihan fungsi

Lebih muatan fungsi, jika digunakan dengan betul, boleh meningkatkan kebolehgunaan fungsi yang boleh dipanggil dalam pelbagai cara . Ini amat berguna semasa autolengkap: kami menyenaraikan semua kemungkinan lebihan dalam autolengkap.

Walau bagaimanapun, dalam beberapa kes adalah disyorkan untuk tidak menggunakan lebihan fungsi dan sebaliknya menggunakan tandatangan fungsi.

Sebagai contoh, jangan gunakan lebihan fungsi untuk parameter pilihan:

// 不推荐做法
function myFunc(): string;
function myFunc(param1: string): string;
function myFunc(param1: string, param2: string): string;
function myFunc(...args: string[]): string {
  // implementation...
}

Adalah memadai untuk menggunakan parameter pilihan dalam tandatangan fungsi:

// 推荐做法
function myFunc(param1?: string, param2: string): string {
  // implementation...
}

5. Ringkasan

Fungsi berlebihan dalam TypeScript membolehkan kami mentakrifkan fungsi yang dipanggil dalam pelbagai cara.

Menggunakan lebihan fungsi memerlukan penentuan tandatangan lebihan: satu set fungsi dengan parameter dan jenis pulangan, tetapi tiada isi. Tandatangan ini menunjukkan bagaimana fungsi itu harus dipanggil.

Selain itu, anda mesti menulis pelaksanaan yang betul (tandatangan pelaksanaan) fungsi: parameter dan jenis pulangan, dan badan fungsi . Ambil perhatian bahawa tandatangan pelaksanaan tidak boleh dipanggil.

Selain fungsi biasa, kaedah dalam kelas juga boleh dibebankan.

Alamat asal bahasa Inggeris: https://dmitripavltin.com/typeript-function-overloading/

Pengarang: dmitripavlutin

Penterjemah: front-end Xiaozhi

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk menulis kelebihan fungsi dalam TypeScript? Pengenalan kepada penulisan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!