TypeScript: Tìm hiểu cách chuyển một hàm dưới dạng tham số – cách chuyển một hàm dưới dạng tham số

Tận dụng sức mạnh của TypeScript để chuyển các hàm dưới dạng tham số và xác định giá trị trả về của các hàm tham số trong hướng dẫn thân thiện với người mới bắt đầu này.

Bạn đang xem : cách chuyển một hàm dưới dạng tham số

Kể từ thời điểm TypeScript được phát triển, nó đã giúp các nhà phát triển JavaScript mắc lỗi do thiếu kiểu định nghĩa và các quy tắc được xác định khi sử dụng compilerOptions bên trong tệp tsconfig.json. Một mẫu phổ biến trong JavaScript là chuyển các hàm gọi lại làm tham số khi kích hoạt các hàm khác. Trong bài viết này, bạn sẽ tìm hiểu cách làm tương tự trong TypeScript.

Tương tự như JavaScript, để chuyển một hàm dưới dạng tham số trong TypeScript, hãy xác định một hàm mong đợi một tham số sẽ nhận được hàm gọi lại, sau đó kích hoạt hàm gọi lại bên trong hàm mẹ . Ví dụ: hãy lưu ý cách chúng tôi chuyển bar làm hàm gọi lại khi gọi hàm foo trong ví dụ sau:

  function foo (callback) {
  console.log ('foo () hàm được gọi!');
  gọi lại();
}

thanh chức năng () {
  console.log ('hàm bar () được gọi!');
}

foo (bar);  

Tuy nhiên, có một vấn đề với mã này. Chúng tôi không tận dụng hết sức mạnh của TypeScript. Nếu bạn sao chép mã này và dán vào tệp JavaScript, sẽ không có bất kỳ lỗi cú pháp nào vì chúng tôi không sử dụng bất kỳ loại TypeScript nào.

Ngoài ra, chúng tôi có khả năng truyền bất kỳ giá trị tham số nào, có nghĩa là chúng tôi có thể cung cấp một chuỗi thay vì một hàm dưới dạng đối số của foo mà không “gặp lỗi” cho đến khi mã được thực thi, một lỗi có thể dễ dàng xảy ra nếu sử dụng JavaScript.

  const a = '';
foo (a);  

Tùy thuộc vào cấu hình TypeScript Tslint, chúng tôi có thể thực thi các quy tắc như không cho phép các tham số ngầm định có bất kỳ loại nào.

Cấu hình Tslint Không có bất kỳ quy tắc nào

Xác định kiểu tham số bằng cách sử dụng Hàm type

Tại thời điểm này, chúng tôi vẫn chưa giải quyết được vấn đề xác định loại cho callback , ít nhất logic này sẽ không thành công tại thời điểm xây dựng, thay vì thời gian chạy.

Để giải quyết vấn đề, hãy xảy ra lỗi sau: < / p>

Tham số 'callback' mặc nhiên có 'any' type.ts (7006)

Xác định loại tham số callback as Function .

  function foo (callback: Function) {
  console.log ('foo () hàm được gọi!');
  gọi lại();
}  

Bây giờ, nếu chúng ta thử thêm một lần nữa để truyền một thứ gì đó khác với hàm gọi lại, TypeScript sẽ chỉ ra lỗi trong câu lệnh nơi foo được kích hoạt.

Lỗi hiển thị khi gọi hàm foo

Xác định giá trị mong đợi được trả về từ Hàm type

< / h2>

Sử dụng kiểu Hàm là một bước quan trọng trong việc ngăn ngừa các lỗi phổ biến do thiếu định nghĩa kiểu trong JavaScript. Tuy nhiên, việc sử dụng loại Function vẫn để lại chỗ cho các lỗi tiềm ẩn trong logic.

Điều gì sẽ xảy ra nếu hàm nhận hàm gọi lại sử dụng giá trị trả về từ hàm gọi lại để chạy bổ sung quá trình? Để làm rõ hơn giả định này, hãy thực hiện các thay đổi đối với hàm foo .

  function foo (callback: Function ) {
  console.log ('foo () hàm được gọi!');
  const number = callback ();
  return Math.sqrt (số);
}  

Lưu ý rằng hàm foo không chỉ gọi lệnh gọi lại nhưng cũng sử dụng giá trị được trả về từ hàm callback để lấy căn bậc hai của giá trị, giả sử giá trị được trả về bởi hàm callback là một số.

Nếu bạn nhìn lại định nghĩa của hàm back , thì hàm này sẽ không trả về bất kỳ thứ gì và khi không có gì được trả về trong một hàm thì JavaScript sẽ mặc định giá trị trả về là undefined .

  // hàm bar trả về 'undefined'
thanh chức năng () {
  console.log ('hàm bar () được gọi!');
}  

Do đó, nếu chúng tôi chuyển bar làm hàm callback của foo , thì có thể không có bất kỳ lỗi nào trong thời gian chạy, nhưng có thể có hành vi không mong muốn khi kích hoạt quá trình này.

  function foo (callback: Function) {
  console.log ('foo () hàm được gọi!');
  const number = callback ();
  return Math.sqrt (số);
}

thanh chức năng () {
  console.log ('hàm bar () được gọi!');
}

console.log (foo (bar));
// Kết quả mong đợi: NaN  

Thay vì mong đợi một số từ việc gọi foo (bar) , kết quả thực sẽ là NaN viết tắt của
“Not-a-number”. Trớ trêu thay, Nan được coi là một số trong JavaScript bất kể định nghĩa của nó như thế nào
.

Nan là một số trong JavaScript

Phải nói rằng, kết quả cuối cùng là một số NaN , không phải là một số. Trừ khi chúng tôi tính đến NaN một tùy chọn khả thi trong logic của chúng tôi, bộ não con người không "có dây" để nghĩ về NaN như một con số. Do đó, các nhà phát triển thường sẽ mong đợi một con số thực.

< p> May mắn thay, chúng tôi có thể ngăn chặn hành vi không mong muốn này trong TypeScript bằng cách xác định loại giá trị trả về mong đợi từ hàm gọi lại. Rất tiếc, chúng tôi không thể sử dụng loại Hàm cho giải pháp này nữa. Thay vào đó, hãy sử dụng biểu thức hàm mũi tên trả về một kiểu để cung cấp định nghĩa kiểu hợp lệ. Hãy sửa đổi một lần nữa định nghĩa của hàm foo để hiểu khái niệm này.

  function foo (callback: () = & gt; number): số {
  console.log ('foo () hàm được gọi!');
  const number = callback ();
  return Math.sqrt (số);
}  

Cú pháp () = & gt; number thoạt đầu có thể gây nhầm lẫn, nhưng nó cho trình biên dịch biết rằng tham số callback phải là một hàm trả về một số.

Bạn có thể thực hiện việc này với các kiểu khác nhau bên cạnh loại number , thậm chí cả các đối tượng tùy chỉnh.

  hàm A (callback: () = & gt; number) {}
hàm B (gọi lại: () = & gt; string) {}
hàm C (gọi lại: () = & gt; Mảng & lt; string & gt;) {}
hàm D (gọi lại: () = & gt; Mảng & lt; number & gt;) {}
hàm E (gọi lại: () = & gt; Đối tượng) {}
function F (callback: () = & gt; {firstName: string; lastName: string}) {}  

Nếu chúng ta quay lại hàm foo đã cập nhật và di chuột qua biến number , bạn sẽ thấy nó yêu cầu biến có loại number .

 Lấy định nghĩa kiểu biến của number

Bây giờ, chúng ta sẽ gặp lỗi biên dịch nếu chúng ta thử gọi foo (bar) .

Đối số kiểu '() = & gt; void 'không thể gán cho tham số kiểu' () = & gt; number '.
Không thể chỉ định loại' void 'cho loại' number '.

Còn tốt hơn nữa, điều này sẽ cho phép IDE của chúng tôi cho chúng tôi biết ngay lập tức chúng tôi có lỗi ở đâu trong mã .

Lỗi khi chuyển bar làm hàm gọi lại

​​Như bạn có thể nghĩ , để giải quyết lỗi này, chúng ta cần cập nhật hàm bar để trả về một số.

  thanh chức năng () {
  console.log ('hàm bar () được gọi!');
  return Math.random ();
}  

Bây giờ, sẽ không có bất kỳ lỗi nào khi chạy mã sau, hàm

  foo (gọi lại: () = & gt; number): số {
  console.log ('foo () hàm được gọi!');
  const number = callback ();
  return Math.sqrt (số);
}

thanh hàm (): số {
  console.log ('hàm bar () được gọi!');
  return Math.random ();
}

console.log (foo (bar));  

và nó phải ghi lại căn bậc hai của một số ngẫu nhiên.

Kết quả từ việc ghi căn bậc hai của một số ngẫu nhiên

Phần thưởng: Xác định Loại tùy chỉnh được trả về từ hàm gọi lại

Cuối cùng, đây là phần thưởng để nắm vững cách truyền một hàm dưới dạng tham số. Có thể xác định các kiểu giá trị tùy chỉnh được trả về bởi một hàm gọi lại. Ví dụ: chúng ta có thể coi callback chỉ trả về 1 .

  hàm foo (gọi lại: () = & gt; 1): số {
  console.log ('foo () hàm được gọi!');
  const number = callback ();
  return Math.sqrt (số);
}  

Tuy nhiên, ngay sau khi chúng tôi thực hiện thay đổi này, chúng tôi sẽ gặp lỗi in linting khi gọi foo (bar) .

 Lỗi lót sau khi thay đổi loại thành 1

Không phải bar phải trả lại một số?

Điều đó chính xác. Hàm bar được mong đợi sẽ trả về một số. Tuy nhiên, foo đang mong đợi tham số callback là một hàm trả về giá trị 1. Bạn có thể nghĩ đây là một trường hợp kỳ lạ, nhưng có những trường hợp bạn muốn để mong đợi các giá trị cụ thể.

Điều này có nghĩa là, hàm bar cần được cập nhật để trả về loại 1 .

  thanh chức năng (): 1 {
  console.log ('hàm bar () được gọi!');
  trả về 1;
}  

Lưu ý rằng điều này sẽ không thành công nếu loại giá trị được trả về từ hàm bar number , ngay cả khi hàm trả về 1 .

Lỗi vì loại giá trị trả về của hàm thanh không phải là 1 mà là số

Để có giải pháp tốt hơn, hãy tạo một loại mới với tất cả các giá trị tùy chỉnh có thể được chấp nhận bởi callback chức năng.

  type AcceptedNumbers = 1 | 2;  

Khi loại được xác định, vấn đề chỉ là cập nhật mọi chức năng khi nó cần.

  loại AcceptedNumbers = 1 | 2;

function foo (callback: () = & gt; AcceptedNumbers): number {
  console.log ('foo () hàm được gọi!');
  const number = callback ();
  return Math.sqrt (số);
}

thanh chức năng (): AcceptedNumbers {
  console.log ('hàm bar () được gọi!');
  trả về 1;
}

console.log (foo (bar));  

Kết luận

Trong bài viết này, bạn đã học cách truyền một hàm dưới dạng tham số trong TypeScript, bắt đầu bằng việc truyền một hàm gọi lại chung bằng cách sử dụng kiểu Hàm < / code>, đồng thời học cách truyền các hàm tham số trả về các loại giá trị cụ thể và thậm chí cả các đối tượng tùy chỉnh. Điều này giúp mã của chúng tôi không chỉ dễ dự đoán hơn mà còn ngăn chặn các hành vi không mong muốn thường do JavaScript thiếu định nghĩa kiểu.

Các mẹo khác về TypeScript!

Vì bạn đã đọc bài viết này, tôi nghĩ bạn có thể quan tâm đến việc đọc các bài viết về TypeScript khác của tôi. được viết rằng bạn có thể quan tâm đến việc kiểm tra.

Bạn có thích bài viết này không?

Chia sẻ suy nghĩ của bạn bằng cách trả lời trên Twitter của Trở thành một lập trình viên giỏi hơn hoặc cho tài khoản Twitter cá nhân của tôi.


Xem thêm những thông tin liên quan đến chủ đề cách chuyển một hàm dưới dạng tham số

Tích phân phụ thuộc tham số có cận là hàm theo tham số | Lý thuyết và bài tập

alt

  • Tác giả: HÀ CHÍ CÔNG
  • Ngày đăng: 2021-10-12
  • Đánh giá: 4 ⭐ ( 7640 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: toán cao cấp và toán kinh tế

Hàm VALUE Và Các Tùy Chọn Khác Giúp Chuyển Chuỗi Thành Số Trong Excel

  • Tác giả: hoctin.vn
  • Đánh giá: 4 ⭐ ( 3476 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết giới thiệu cách chuyển đổi số được lưu trữ dưới dạng text thành number bằng cách sử dụng hàm VALUE hoặc Error Checking/ Paste Special trong Excel

Hàm NUMBERVALUE trong Excel, chuyển văn bản sang dạng số

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 1057 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm NUMBERVALUE trong Excel, chuyển văn bản sang dạng số. Cùng tham khảo bài viết sau để có thể sử dụng hàm hiệu quả nhất.

Chuyển đổi số được lưu dưới dạng văn bản sang dạng số

  • Tác giả: support.microsoft.com
  • Đánh giá: 3 ⭐ ( 6796 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi số được lưu trong ô dưới dạng văn bản, có thể xảy ra trục trặc trong tính toán hoặc sắp xếp. Hãy đọc bài viết này để tìm hiểu cách giải quyết vấn đề.

Tìm tham số m để hàm số đơn điệu

  • Tác giả: vnhoctap.com
  • Đánh giá: 3 ⭐ ( 2749 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: VnHocTap.com giới thiệu đến các em học sinh lớp 12 bài viết Tìm tham số m để hàm số đơn điệu, nhằm giúp các em học tốt chương trình Toán 12.

Đạo hàm của một hàm ở dạng tham số

  • Tác giả: tintuctuyensinh.vn
  • Đánh giá: 5 ⭐ ( 4726 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các dẫn xuất của một hàm ở dạng tham số: Có những trường hợp thay vì xác định một hàm một cách rõ ràng hoặc ngầm hiểu, chúng tôi xác định nó bằng cách sử dụng

Truyền mảng dưới dạng tham số hàm trong C

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 2967 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Truyền mảng dưới dạng tham số hàm trong C - Học C cơ bản và nâng cao theo các bước đơn giản và ví dụ dễ hiểu bắt đầu từ cơ bản về C, Toán tử, kiểu dữ liệu, hàm, vòng lặp, mảng, con trỏ, cấu trúc, chuỗi, lệnh, input và output, quản lý bộ nhớ, bộ tiền xử lý, điều khiển luồng etc.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách thêm biểu tượng yêu thích vào trang web của bạn - cách thêm biểu tượng yêu thích vào trang web