Sử dụng default parameters trong TypeScript

Giới thiệu về default parameters JavaScript hỗ trợ các default parameters kể từ ES2015 (hoặc ES6) với cú pháp sau: functionname(parameter1=defaultValue1,...){// do something} Trong cú pháp này, nếu bạn không truyền các đối số hoặc truyền undefined vào bên trong hàm khi goi nó, hàm sẽ nhận các giá trị khởi tạo mặc định cho

Giới thiệu về default parameters

JavaScript hỗ trợ các default parameters kể từ ES2015 (hoặc ES6) với cú pháp sau:

functionname(parameter1=defaultValue1,...){// do something}

Trong cú pháp này, nếu bạn không truyền các đối số hoặc truyền undefined vào bên trong hàm khi goi nó, hàm sẽ nhận các giá trị khởi tạo mặc định cho các tham số bị bỏ qua.Ví dụ

functionapplyDiscount(price, discount =0.05){return price *(1- discount);}console.log(applyDiscount(100));// 95

Trong ví dụ này, hàm applyDiscount() có tham số discount làm tham số mặc định.
Khi bạn không truyền đối số discount vào hàm applyDiscount(), hàm sẽ sử dụng giá trị mặc định là 0,05.
Tương tự như JavaScript, bạn có thể sử dụng các tham số mặc định trong TypeScript với cùng một cú pháp:

function name(parameter1:type=defaultvalue1, parameter2:type=defaultvalue2,...) {
   //
}

Ví dụ sau sử dụng các tham số mặc định cho hàm applyDiscount():

functionapplyDiscount(price:number, discount:number=0.05):number{return price *(1- discount);}console.log(applyDiscount(100));// 95

Lưu ý rằng bạn không thể bao gồm các tham số mặc định trong định nghĩa loại hàm. Đoạn mã sau sẽ dẫn đến lỗi:

letpromotion:(price:number, discount:number=0.05)=>number;

Error:

error TS2371:A parameter initializer is only allowed in a function or constructor implementation.

Default parameters and Optional parameters

Giống như các optional parameters(tham số tùy chọn), các tham số mặc định cũng là tùy chọn, có nghĩa là bạn có thể bỏ qua các tham số mặc định khi gọi hàm.
Ngoài ra, cả tham số mặc định và tham số mặc định theo sau đều có chung một loại. Ví dụ: hàm sau:

functionapplyDiscount(price:number, discount:number=0.05):number{// ...}

functionapplyDiscount(price:number, discount?:number):number{// ...}

cùng loại:

(price: number, discount?: number) => number

Các tham số tùy chọn phải đứng sau các tham số bắt buộc. Tuy nhiên, các tham số mặc định không cần xuất hiện sau các tham số bắt buộc.
Hàm sau trả về số ngày trong một tháng và năm cụ thể:

functiongetDay(year:number=newDate().getFullYear(), month:number):number{let day =0;switch(month){case1:case3:case5:case7:case8:case10:case12:
            day =31;break;case4:case6:case9:case11:
            day =30;break;case2:// leap yearif(((year %4==0)&&!(year %100==0))||(year %400==0))
                day =29;else
                day =28;break;default:throwError('Invalid month');}return day;}

Trong ví dụ này, giá trị mặc định của năm là năm hiện tại nếu bạn không truyền đối số hoặc truyền giá trị undefined.
Ví dụ sau sử dụng hàm getDay() để lấy số ngày trong tháng 2 năm 2019:

let day =getDay(2019,2);console.log(day);// 28

Để nhận được số ngày trong tháng 2 của năm hiện tại, bạn cần truyền vào undefined cho tham số năm như sau:

let day =getDay(undefined,2);console.log(day);

Tóm tắt:

  • Sử dụng default parameter với cú pháp parameter:=defaultValue nếu bạn muốn đặt giá trị khởi tạo cho tham số.
  • Các default parameter là tùy chọn
  • Để sử dụng giá trị khởi tạo mặc định của một tham số, bạn bỏ qua đối số khi gọi hàm hoặc truyền vào undefined.

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ