Function

Trong TypeScript, function (hàm) là một khối mã được đóng gói lại, có thể được gọi từ các phần khác trong mã. Các function có thể nhận tham số và trả về giá trị.

Để khai báo một function trong TypeScript, ta sử dụng từ khóa function, sau đó là tên của function và danh sách các tham số nếu có, và cuối cùng là khối lệnh trong function. ví dụ

function greet(name: string){
	console.log(`Hello, ${name}!`;
}

greet("John"); // "Hello, John!"

Trong ví dụ trên, greet là tên của function, name là tham số của function và console.log là khối lệnh trong function. Function này chỉ đơn giản là in ra một thông báo chào mừng với tên được truyền vào.

Ngoài ra, TypeScript cũng hỗ trợ việc định kiểu cho các tham số và kiểu trả về của function.  Ví dụ:

function add(a: number, b: number): number{
	return a + b;
}

let result = add(2, 3); //result = 5

Trong ví dụ này, function add có hai tham số kiểu number và trả về một giá trị kiểu number. Khi gọi add(2, 3), giá trị trả về của function là 5 được lưu vào biến result.

Bên cạnh cách khai báo function truyền thống, TypeScript còn hỗ trợ khai báo function dưới dạng arrow function hoặc function expression:

  • Arrow function: là một cú pháp viết tắt cho khai báo function trong TypeScript.
let add = (a: number, b: number): number =>{
	return a + b;
}

let result = add(2, 3)
  • Function expression: là cách khai báo function bằng cách gán một biểu thức function cho một biến.
let greet = function (name: string) {
	console.log(`Hello, ${name}!`;
}

greet("John");

Function Parameters:

  1. Optional parameters Optional parameters trong TypeScript cho phép bạn khai báo các tham số của một hàm mà không bắt buộc phải truyền vào giá trị. Để khai báo optional parameter, bạn có thể đặt dấu hỏi sau tên tham số, như sau:

    function Greet(greeting: string, name?: string): string {
	return greeting + ' ' + name + '!';
}

Greet('Hello', 'Steve'); //return "Hello Steve!"
Greet('Hi'); // return "Hi !"
Greet('Hi', 'Bill', 'Gate'); // Compiler Error: Expected 1-2 arguments, but got 3.

  2. Default parameters TypeScript cho phép bạn khai báo các tham số của một hàm với giá trị mặc định. Nếu không có giá trị nào được truyền vào cho tham số đó, thì giá trị mặc định sẽ được sử dụng. Để khai báo default parameter, bạn có thể đặt giá trị mặc định cho tham số đó, như sau:

    function Greet(name: string,greeting: string = "Hello"): string {
	return greeting + ' ' + name + '!';
}

Greet('Steve'); // return "Hello Steve!"
Greet('Steve', 'Hi'); // return "Hi Steve!"

    Khi các tham số có giá trị mặc định đứng trước các tham số bắt buộc trong một hàm, chúng có thể được gọi bằng cách truyền giá trị :

    function Greet(greeting: string = "Hello", name: string): string {
	return greeting + ' ' + name + '!';
}

Greet(, 'Steve'); // return "Hello Steve!"
Greet('Hi', 'Steve'); // return "Hi Steve!"

  3. Rest parameters Rest parameters trong TypeScript cho phép bạn truyền vào một số lượng tham số không giới hạn vào một hàm bằng cách sử dụng toán tử rest (...). Tham số rest sẽ được đóng gói thành một mảng. Để khai báo rest parameter, bạn có thể đặt dấu ba chấm ... trước tên tham số, như sau:

    function Greet(greeting: string, ...names: string[]) {
	return greeting + " " + names.join(", ") + "!";
}

Greet('Hello', 'Steve', 'Bill'); // return "Hello Steve, Bill!"
Greet("Hello"); // return "Hello !"

    Hãy nhớ rằng tham số rest phải đứng cuối cùng trong khai báo của hàm, nếu không, trình biên dịch TypeScript sẽ hiển thị lỗi.

Function overloading

TypeScript cho phép bạn định nghĩa một hàm với nhiều chữ ký khác nhau. Khi bạn gọi hàm với các tham số khác nhau, TypeScript sẽ tìm chữ ký phù hợp nhất và sử dụng nó để thực hiện hành động trong hàm đó

Để định nghĩa một hàm với nhiều chữ ký, bạn có thể sử dụng từ khóa function và định nghĩa các chữ ký cùng tên, nhưng khác nhau về số lượng và kiểu tham số. Ví dụ:

function add(a: string, b: string): string;
function add(a: number, b: number): number;
function add(a: any, b: any): any {
	return a + b;
}

add("Hello ", "Steve"); // return "Hello Steve"
add(10, 20); // return 30

Tài liệu tham khảo

HomeAboutProjectsBlogs