CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết blog CFSDN này giải thích cách viết nạp chồng hàm trong TypeScript. Bạn đang ở cấp độ nào? Được tác giả sưu tầm và biên soạn. Nếu các bạn quan tâm tới bài viết này thì nhớ like nhé.

Hầu hết các hàm đều chấp nhận một bộ tham số cố định.

Nhưng một số hàm có thể chấp nhận số lượng đối số thay đổi, các kiểu đối số khác nhau và thậm chí trả về các kiểu khác nhau tùy thuộc vào cách bạn gọi hàm. Để chú thích các hàm như vậy, TypeScript cung cấp chức năng nạp chồng hàm.

1. Chữ ký hàm

Trước tiên chúng ta hãy xem xét một hàm trả về tin nhắn chào mừng tới một người cụ thể.

1. chức năng chào(người: chuỗi): chuỗi {
2. trở lại `Xin chào, ${person}!`;
3. }

Hàm trên chấp nhận tham số loại 1 ký tự: tên người. Gọi hàm này rất đơn giản

1. chào('Thế giới'); // 'Xin chào thế giới!'

Điều gì sẽ xảy ra nếu bạn muốn làm cho hàm hello() linh hoạt hơn? Ví dụ: làm cho nó chấp nhận một danh sách bổ sung những người cần chào hỏi.

Hàm như vậy sẽ chấp nhận một chuỗi hoặc mảng chuỗi làm đối số và trả về một chuỗi hoặc mảng chuỗi.

Làm thế nào để chú thích một chức năng như vậy? Có 2 cách.

Phương pháp đầu tiên rất đơn giản, đó là sửa đổi trực tiếp chữ ký hàm bằng cách cập nhật các tham số và kiểu trả về. Đây là giao diện của hello() sau khi tái cấu trúc:

1. chức năng chào(người: chuỗi | chuỗi[]): chuỗi | chuỗi[] {
2. nếu (kiểu người === 'string') {
3. trở lại `Xin chào, ${person}!`;
4. } khác nếu (Array.isArray(person)) {
5. trở lại người.bản đồ(tên => `Xin chào, ${tên}!`);
6. }
7. ném Lỗi mới('Không thể chào hỏi');
8. }

Bây giờ chúng ta có thể gọi hello() theo hai cách

1. chào('Thế giới'); // 'Xin chào thế giới!'
2. chào(['Tiểu Chí', 'Ngày']); // ['Xin chào, Ash!', 'Xin chào, Daye!']

Thực tiễn tốt là cập nhật trực tiếp chữ ký hàm để hỗ trợ nhiều phương thức gọi.

Tuy nhiên, trong một số trường hợp, chúng tôi có thể cần thực hiện một cách tiếp cận khác và xác định riêng tất cả các cách mà hàm của bạn có thể được gọi. Cách tiếp cận này được gọi là nạp chồng hàm.

2. Quá tải hàm

Phương pháp thứ hai là sử dụng tính năng nạp chồng hàm. Tôi khuyên bạn nên sử dụng phương pháp này khi chữ ký hàm tương đối phức tạp và liên quan đến nhiều loại.

Việc xác định tình trạng quá tải hàm yêu cầu xác định chữ ký quá tải và chữ ký triển khai.

Chữ ký quá tải xác định các tham số chính thức và kiểu trả về của hàm không có thân hàm. Một hàm có thể có nhiều chữ ký quá tải: tương ứng với các cách gọi hàm khác nhau.

Mặt khác, chữ ký triển khai cũng có các kiểu tham số và kiểu trả về, nhưng cũng có phần nội dung của hàm triển khai và chỉ có thể có một chữ ký triển khai.

1. // Chữ ký quá tải
2. chức năng chào(người: chuỗi): chuỗi;
3. chức năng chào(người: chuỗi[]): chuỗi[];
5. // Thực hiện chữ ký
6. chức năng chào(người: không rõ): không rõ {
7. nếu (kiểu người === 'string') {
8. trở lại `Xin chào, ${person}!`;
9. } khác nếu (Array.isArray(person)) {
10. trở lại người.bản đồ(tên => `Xin chào, ${tên}!`);
11. }
12. ném Lỗi mới('Không thể chào hỏi');
13. }

Hàm hello() có hai chữ ký quá tải và một chữ ký triển khai.

Mỗi chữ ký quá tải mô tả cách gọi hàm. Đối với hàm hello(), chúng ta có thể gọi nó theo hai cách: với tham số chuỗi hoặc với tham số mảng chuỗi.

Việc triển khai hàm chữ ký chào(người: không xác định): không xác định { ... } chứa logic thích hợp cho cách hoạt động của hàm.

Bây giờ, như trên, hello() có thể được gọi với các đối số kiểu chuỗi hoặc mảng chuỗi.

1. chào('Thế giới'); // 'Xin chào thế giới!'
2. chào(['Tiểu Chí', 'Ngày']); // ['Xin chào, Ash!', 'Xin chào, Daye!']

2.1 Chữ ký quá tải có thể gọi được

Mặc dù chữ ký triển khai thực hiện hành vi của hàm nhưng nó không thể được gọi trực tiếp. Chỉ có chữ ký quá tải mới có thể gọi được.

1. chào('Thế giới'); // Chữ ký quá tải có thể được gọi
2. chào(['Tiểu Chí', 'Ngày']); // Chữ ký quá tải có thể được gọi
4. const someValue: không xác định = 'Không rõ';
5. hello(someValue); // Chữ ký triển khai KHÔNG có thể gọi được
7. // Báo cáo lỗi
8. KHÔNG quá tải phù hợp với lệnh gọi này.
9. Quá tải 1 của 2, '(người: chuỗi): chuỗi', đã đưa ra lỗi sau.
10. Lý lẽ của kiểu 'không rõ' là không có thể chuyển nhượng ĐẾN tham số của kiểu 'string'.
11. Quá tải 2 của 2, '(người: chuỗi[]): chuỗi[]', đã đưa ra lỗi sau.
12. Lý lẽ của kiểu 'không rõ' là không có thể chuyển nhượng ĐẾN tham số của kiểu 'sợi dây[]'.

Trong ví dụ trên, hàm hello() không thể được gọi với tham số thuộc loại không xác định (greet(someValue)) mặc dù chữ ký triển khai chấp nhận tham số không xác định.

2.1 Chữ ký thực hiện phải phổ quát

1. // Chữ ký quá tải
2. chức năng chào(người: chuỗi): chuỗi;
3. chức năng chào(người: chuỗi[]): chuỗi[];
4. // Chữ ký quá tải này không tương thích với chữ ký triển khai của nó.
7. // Thực hiện chữ ký
8. chức năng chào(người: không xác định): chuỗi {
9. // ...
10. ném Lỗi mới('Không thể chào hỏi');
11. }

Hàm chữ ký quá tải hello(person: string[]): string[] được đánh dấu là không tương thích với hello(person: known): string.

Việc triển khai kiểu trả về chuỗi đã ký là không đủ chung và không tương thích với kiểu trả về chuỗi đã ký [] bị quá tải.

3. Nạp chồng phương thức

Mặc dù trong ví dụ trước, nạp chồng hàm đã được áp dụng cho hàm bình thường. Nhưng chúng ta cũng có thể quá tải một phương thức.

Trong phần nạp chồng phương thức, chữ ký quá tải và chữ ký triển khai là một phần của lớp.

Ví dụ: chúng ta triển khai một lớp Greeter với phương thức được nạp chồng lời chào().

1. Người chào đón lớp {
2. tin nhắn: chuỗi;
4. constructor(thông điệp: chuỗi) {
5. this.message = tin nhắn;
6. }
8. // Chữ ký quá tải
9. chào(người: chuỗi): chuỗi;
10. chào(người: chuỗi[]): chuỗi[];
12. // Thực hiện chữ ký
13. chào(người: không rõ): không rõ {
14. nếu (kiểu người === 'string') {
15. trở lại `${tin nhắn này}, ${người}!`;
16. } khác nếu (Array.isArray(person)) {
17. trở lại người.bản đồ(tên => `${tin nhắn này}, ${tên}!`);
18. }
19. ném Lỗi mới('Không thể chào hỏi');
20. }

Lớp Greeter chứa phương thức nạp chồng chào(): 2 chữ ký quá tải mô tả cách gọi phương thức và một chữ ký triển khai chứa cách triển khai chính xác.

Nhờ nạp chồng phương thức, chúng ta có thể gọi hi.greet() theo hai cách: bằng một chuỗi hoặc với một mảng chuỗi làm đối số.

1. const hi = new Người chào đón('CHÀO');
3. Xin chào('Tiểu Chí'); // 'Xin chào, Tiểu Chi!'
4. xin chào(['Vương Đại Nghiệp', 'Ngày']); // ['Chào, Vương Đại Nghiệp!', 'Chào Daye!']

4. Khi nào nên sử dụng nạp chồng hàm

Nạp chồng hàm, nếu được sử dụng đúng cách, có thể làm tăng đáng kể khả năng sử dụng của một hàm có thể được gọi theo nhiều cách. Điều này đặc biệt hữu ích trong quá trình tự động hoàn thành: chúng tôi sẽ liệt kê tất cả các tình trạng quá tải có thể xảy ra trong quá trình tự động hoàn thành.

Tuy nhiên, trong một số trường hợp, không nên sử dụng nạp chồng hàm mà thay vào đó hãy sử dụng chữ ký hàm.

Ví dụ: không sử dụng nạp chồng hàm với các tham số tùy chọn:

1. // Không khuyến khích
2. chức năng myFunc(): chuỗi;
3. chức năng myFunc(param1: chuỗi): chuỗi;
4. chức năng myFunc(param1: chuỗi, param2: chuỗi): chuỗi;
5. chức năng myFunc(...args: string[]): chuỗi {
6. // thực hiện...
7. }

Chỉ cần sử dụng các tham số tùy chọn trong chữ ký hàm là đủ

1. // Các phương pháp được đề xuất
2. chức năng myFunc(param1?: chuỗi, param2: chuỗi): chuỗi {
3. // thực hiện...
4. }

5. Tóm tắt

Nạp chồng hàm trong TypeScript cho phép chúng ta xác định các hàm được gọi theo nhiều cách.

Việc sử dụng nạp chồng hàm yêu cầu xác định chữ ký quá tải: một tập hợp các hàm có tham số và kiểu trả về nhưng không có nội dung. Những chữ ký này cho biết hàm nên được gọi như thế nào.

Ngoài ra, bạn phải viết ra cách triển khai chính xác (chữ ký triển khai) của hàm: tham số và kiểu trả về, cũng như phần thân hàm**. Lưu ý rằng chữ ký triển khai không thể gọi được. **.

Ngoài các hàm thông thường, các phương thức trong lớp cũng có thể bị quá tải.

Tác giả: dmitripavlutin Người dịch: front-end Xiaozhi.

Nguồn: dmitripavlutin Văn bản gốc: https://dmitripavltin.com/typeript-function-overloading/.

Liên kết gốc: https://mp.weixin.qq.com/s/uwD01tyDK0WGHUs9bCYZdg.

Cuối cùng, bài viết này nói về nạp chồng hàm trong TypeScript. Bạn đang ở cấp độ nào? Bài viết này chỉ vậy thôi. Nếu bạn muốn biết thêm về nạp chồng hàm trong TypeScript, bạn đang ở cấp độ nào? Về nội dung, vui lòng tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .