Function trong TypeScript

Mỗi khi chúng ta bắt đầu tìm hiểu một ngôn ngữ lập trình mới thì ai cũng phải đi từ cơ bản đến nâng cao. Phần cơ bản là phần rất quan trong vì nó chính là tiền đề, tạo nền móng để chúng ta tiếp tục tìm hiểu ngôn ngữ đó một cách dễ dàng nhất. Giúp chúng ta có thể tiếp tục đào sâu kiến thức.

Có một nhà hiền triết đã từng nói: ”Kiến thức cơ bản mà vững thì chắc chắn sẽ học được nâng cao và còn có thể sáng tạo. Ngược lại kiến thức cơ bản mà không vững vẫn có thể học nâng cao nhưng chắc chắn không sáng tạo được . ”

Tìm hiểu TypeScript cũng vậy chúng ta có những phần cơ bản như : Basic Type, Variable Declarations, Function, Class, và Object (đối với những ngôn ngữ lập trình hướng đối tượng)

Trong bài viết này tôi và các bạn cùng tìm hiểu về Function (hàm) trong TypeScript.

1. Khai báo

Giống như trong Javascript(Js) hàm trong Typescript(Ts) có cú pháp khai báo cũng rất đơn giản : 

- Name function: 
function add(x: number, y: number): number {
   return x + y;
};

- Anonymous function: 
let myAdd = function(x: number, y: number): number {
   return x + y; 
};

Bên trên là 2 cách khai báo function cơ bản nhất trong TypeScript :

• Chúng ta bắt đầu với từ ‘function’ quen thuộc rồi đến ‘add’ (tên function) và bên trong dấu ngoặc đơn sẽ là các parameters(tham số). Đến đây chúng ta sẽ nhận thấy điều khác biệt lớn nhất trong cách khai báo hàm giữa Js và Ts là chúng ta sẽ khai báo cả kiểu cho tham số. Tiếp đến là chúng ta sẽ khai báo kiểu trả về cho hàm. Và cuối cùng là chúng ta sẽ viết code logic vào phần thân hàm.
• Type script có thể tìm ra kiểu trả về thông qua các câu lệnh return, vì vậy chúng ta có thể tuỳ ý bỏ qua khai báo kiểu trả về trong nhiều trường hợp.

2. Function type (kiểu hàm):

Bạn có thể khai báo một biến có kiểu là một hàm như sau: 

let varFun: (hello: number, word: number) => number = function(x: number, y: number): number {
   return x + y;
};

Một function type có 2 phần. Kiểu của các đối số về kiểu trả về. 2 phần này là bắt buộc khi chúng ta muốn khai báo một biến với function type

• Phần đầu là mình khai báo kiểu và số lượng tham số, xếp theo thứ tự tham số chuyền vào hàm tương ứng.
• Tiếp theo là phần chỉ ra kiểu trả về của hàm đó, bằng cách sử dụng ‘=>’ ngăn giữa các tham số và loại trả về. Vì đây là phần bắt  buộc nên khi hàm không trả về gì thì ta sẽ điền là ‘void’ thay vì bỏ đi.

3. Inferring the type (suy kiểu)

Khi bạn khai báo một biến với function type như sau: 

let varFun: (hello: number, word: string) => number = function(x, y): number {
   return x + y; 
};

• Trình biên dịch sẽ tự động suy ra kiểu của các tham số x, y lần lượt là number và string.
• Điều này được gọi là ‘contextual typing’ (suy kiểu theo ngữ cảnh). Nó giúp chúng ta giảm bớt công gõ code.

4. Optional and default parameter (tham số tuỳ chọn và mặc định)

 –  Khi gọi một hàm thì ta phải chắc chắn số lượng đối số được cung cấp phải khớp với số lượng tham số mà hàm mong đợi. Ví dụ như: 

function setName(nameOne: string, nameTwo: string): string {
   return nameOne + nameTwo
}

const result1 = setName('superman') // error, too few parameters
const result2 = setName('ironman', 'spiderman', 'batman') // error, too many parameters
const result3 = setName('hello', 'word' ) // hello word

–  Trong Javascript mọi tham số là tuỳ chọn và họ có thể bỏ qua một trong số chúng nếu họ muốn. Chúng ta cũng có thế làm điều này với typescript bằng cách thêm ‘?’ vào sau tham số mà chúng ta muốn nó là tuỳ chọn. Ví dụ như: 

function setName(nameOne: string, nameTwo?: string): string {
   if(nameTwo) return nameOne + nameTwo;
   else return nameOne;
} 
const result1 = setName('superman') // superman
const result2 = setName('ironman', 'spiderman', 'batman') // error, too many parameters 
const result3 = setName('hello', 'word' ) // hello word

Lưu ý: Trong hàm thì tham số tuỳ chọn không thể đứng đầu mà nó chỉ có thể viết sau tham số bắt buộc.

–  Trong Typescript, chúng ta có thể set một giá trị cho một tham số khi người dùng không cung cấp. Chúng được gọi là tham số khởi tạo mặc định. Ví dụ như : 

function setName(nameOne: string, nameTwo = "man"): string {
 return nameOne + " " + nameTwo;
} 
const result1 = setName('super') // super man 
const result2 = setName('ironman', 'spiderman', 'batman') // error, too many parameters 
const result3 = setName('hello', 'word' ) // hello word
const result4 = setName('wonder', undefined) // wonder man

Lưu ý: Cũng giống như các tham số tuỳ chọn, vị trí của tham số mặc định phải nên được viết sau tất cả các tham số bắt buộc. Tuy nhiên nếu chúng ta vẫn muốn viết chúng trước các tham số bắt buộc thì khi gọi hàm đó chúng ta một là phải truyền giá trị cho chúng, hai là vượt qua dùng giá trị mặc định bằng cách truyền ‘undefined’.

5. Rest Parameter

Đôi khi bạn sẽ muốn làm việc với rất nhiều tham số trong một kiểu. Hay là bạn không biết phải nên có bao nhiêu tham số cho hàm này.

Trong TypeScript chúng ta sẽ tập hợp những tham số đó lại thành 1 biến. Ví dụ như: 

function setName(nameOne: string,... arrayNameTwo: string[]): string {
 return nameOne + " " + arrayNameTwo.join(""); 
} 

=> Khi đó chúng ta có thể truyền bao nhiêu tham số tuỳ thích.
let result = setName("ironman", "superman", "batman", "spiderman").

Rest parameter được coi là vô số các tham số tuỳ chọn. Khi truyền đối số cho rest parameter thì ta có thể truyền bao nhiêu tuỳ ý. Trình biên dịch sẽ tạo thành 1 mảng các đối số truyền vào với tên được đặt sau dấu (…), cho phép bạn sử dụng nó trong hàm của mình.

6. Tham khảo:

Phía trên là những kiến thức cơ bản nhất về hàm (function) trong typescript. Vì vậy nếu bạn mà muốn tìm hiểu thêm và sâu hơn, nâng cao hơn thì tham khảo tại : 

https://www.typescriptlang.org/docs/handbook/functions.html