Bài 8: TypeScript – Function
Function là một phần không thể thiếu trong các ngôn ngữ lập trình, ở phần này, chúng ta sẽ học về function trong typescript, về parameter và những thứ hay ho của nó. Đây là bài viết đầu tiên về phần function của typescript trong chuỗi series học 15 phút mỗi ngày cùng yeulaptrinh.vn, các bạn có thể xem các bài viết trong series này trên site của chúng mình nhé. Chúng ta cùng bắt đầu thôi
Nội dung của bài
Function trong JavaScript
Nhờ có function, JavaScript mới có thể trở thành functional programing language (ngôn ngữ lập trình hàm), bên cạnh đó, thời kỳ mà OOP (object-oriented programming – lập trình hướng đối tượng) lên ngôi, function có ích không nhỏ trong việc giúp JavaScript bắt kịp/ bắt chước/ triển khai các tính chất theo trào lưu đó.
Function trong TypeScript
Mặc dù TypeScript có những điểm nổi trội hơn so với JavaScript, với những class, module .., nhưng function vẫn là một phần không thể thiếu, những features của javascript function vẫn tiếp tục được giữ trên TypeScript
Trong TypeScript, có 2 loại function là named function và anonymous function, chúng ta cùng đi vào chi tiết
Named function
Như cái tên của nó, đó là những hàm có mang tên, định nghĩa rõ ràng
function greeting (name: string): string {
return `Welcome ${name} to yeulaptrinh.vn`
}
greeting("Uncle Bob") // Welcome Uncle Bob to yeulaptrinh.vn
Anonymous function
Hay còn gọi là hàm ẩn danh. Nhiều lúc trong lập trình, chúng ta gặp những hàm chỉ cần sử dụng một lần duy nhất, ví dụ như hàm xử lý event, hàm khai báo config hay hàm callback, thay vì đau đầu nghĩ ra tên cho chúng, tránh trùng lặp tên các hàm cũ, chúng ta có thể sử dụng anonymous function.
(function(x:number, y:number): number {
return (x + y)
})
Nếu như muốn tái sử dụng chúng, thì chúng ta cần phải gán nó vào một biến cụ thể
let sum = (function(x:number, y:number): number{
return (x + y)
})
sum(10, 20) // 30
function total (people: string, sum: number): string {
return `${people} has ${sum} Bitcoins in the wallet`
}
total("Uncle Bob", sum(5,10)) // Uncle Bob has 15 Bitcoins in the wallet
Parameters
Không giống trong JavaScript khi chỉ cần khai báo ít hơn tổng số parameter trong function, với TypeScript chúng ta cần khai báo chính xác các giá trị và số lượng parameter trong function vì khi khai báo thông thường, mặc định các parameter đều là bắt buộc (required parameters)
function greeting (name: string): string {
return `Welcome ${name} to yeulaptrinh.vn`
}
greeting() //Expected 1 arguments, but got 0
greeting("Uncle Bob") // Welcome Uncle Bob to yeulaptrinh.vn
greeting("Trump", "Biden") //Expected 1 arguments, but got 2
Trong trường hợp một số biến có thể có có thể không, chúng ta có thể sử dụng optional parameter với dấu ? ngay sau parameter của mình.
function greeting (name: string, grade?: string ): string {
return `Welcome ${name} to ${grade}`
}
greeting() //Expected 1-2 arguments, but got 0
greeting("Uncle Bob")
greeting("Trump", "4A")
Tuy nhiên chúng ta cần lưu ý rằng, không thể để required parameters liền kề sau một optional parameter.
function greeting (name: string, grade?: string, age: number ): string {
return `Welcome ${name} to ${grade}`
} //A required parameter cannot follow an optional parameter
Trong function, chúng ta cũng có thể khai báo các giá trị mặc định cho các parameter (default parameter). Cùng xem ví dụ sau
function greeting (name: string, site: string = "yeulaptrinh.vn" ): string {
return `Welcome ${name} to ${site}`
}
greeting("Uncle Bob") //Welcome Uncle Bob to yeulaptrinh.vn
greeting("Uncle Bob", "Google.com") //Welcome Uncle Bob to Google.com
Với hàm greeting ở trên, nếu không khai báo giá trị cho parameter site, thì chúng sẽ được lấy giá trị mặc định là yeulaptrinh.vn.
Nếu như chúng ta muốn thêm một required parameter ngay sau một default parameter thì chúng ta cần khai báo undefined vào vị trí của default parameter ấy
function greeting (name: string, site: string = "yeulaptrinh.vn", from: String): string {
return `Welcome ${name} to ${site} from ${from}`
}
greeting("Uncle Bob", "Vietnam") //Expected 3 arguments, but got 2
greeting("Uncle Bob", undefined, "Vietnam") //Welcome Uncle Bob to yeulaptrinh.vn from Vietnam
Sumary
Vậy là chúng ta đã kết thúc bài học đầu tiên về Function trong TypeScript, hi vọng bài viết sẽ giúp đỡ được các bạn nhiều trong công việc cũng như học tập, rất mong nhận được sự đóng góp của các bạn để mình hoàn thiện bài viết hơn. Hãy cùng đón chờ bài viết tiếp theo trong series học 15 phút mỗi ngày cùng yeulaptrinh.vn trên trang của bọn mình nhé.