Hàm trong typescript

Hàm trong typescript đề cập về cách định nghĩa và dùng hàm trong TypeScript. Cụ thể là các loại hàm, cách dùng tham số, hàm mũi tên…

---

---

Hàm là gì

Làm là 1 khối lệnh được tạo ra để gọi thi hành. bạn tạo ra hàm nhằm để xử lý 1 chức năng cụ thể nào đỏ. Khi hàm được gọi, nó có thể trả về 1 giá trị nào đó hoặc không trả về gì cả.

Mỗi hàm có thể có 0 hoặc có nhiều tham số.

Hàm trong typescript có nhiều loại. Và có thể định nghĩa kiểu dữ liệu trả về khi định nghĩa hàm

Các loại hàm trong TypeScript

Trong TypeScript, có loại hàm có tên (named function) và có loại hàm không có tên (anonymous function).
Hàm có tên tức là hàm được đặt tên cụ thể khi định nghĩa hàm. Hàm có tên có thể được gọi nhiều lần, ở nhiều nơi. Code trong hàm sẽ chạy khi tên hàm được gọi. Ví dụ

function tăng1(n:number){
    return n+1;
}
let tt = tăng1(4);

Hàm không tên còn gọi là hàm ẩn danh. Các hàm này thường được gọi dùng như là tham số cho 1 hàm khác. Hàm không tên thường được ứng dụng để gọi như là hàm callback để xử lý cho các hàm chính. Hoặc hàm ẩn danh được chỉ định thi hàm trong các sự kiện. Ví dụ: hàm không tên tiếp nhận từ hàm chính (find) từng phần tử của mảng để xử lý

let m1 = [7,8,2,13,16];
let kq1 = m1.find(  function(e){ return e>=10 } );
console.log(kq1);

Có thể định nghĩa hàm không tên như là 1 biến để sử dụng

let m1 = [7,8,2,13,16];
let xl = function(e) { return e>=15 };
let kq1 = m1.find( xl );
console.log(kq1);

Tham số cho hàm trong TypeScript

Mỗi hàm có thể có tham số, mỗi tham số cần chỉ định kiểu cho nó. Mặc định các tham số là bắt buộc phải truyền khi gọi hàm ngoại trừ bạn có chỉ định tham số là optional. Ví dụ:

let tbp = function( a:number , b:number){
    let tổngbìnhphương = Math.pow(a,2) + Math.pow(b,2);
    return tổngbìnhphương;
}
let kq2 = tbp( 3, 4); 
console.log(kq2); //25
let kq3 = tbp(3); //lỗi

Tham số tùy chọn  – Optional parameter

Là tham số mà bạn chỉ định để khi gọi hàm, có thể không cần truyền cũng được. Khi đó thì dùng dấu ? ở ngay sau tham số khi định nghĩa

let tbp = function(a:number, b?:number){
    if (b==undefined) b=0;
    let tổngbìnhphương = Math.pow(a,2) + Math.pow(b,2);
    return tổngbìnhphương;
}
let kq3 = tbp( 3 ); console.log(kq3); //9
let kq4 = tbp(3,1); console.log(kq4); //10

Giá trị mặc định của tham số

Khi định nghĩa hàm, có thể chỉ định giá trị mặc định cho tham số. Giá trị mặc định sẽ được dùng khi gọi hàm mà không truyền tham số.

Tham số có giá trị mặc định có thể khỏi khai báo kiểu dữ liệu cũng được (typescript suy ra) . Tham số có giá trị mặc định nên đặt ở sau cùng trong các tham số của hàm.

let tbp = function(a:number, b = 1){
    let tổngbìnhphương = Math.pow(a,2) + Math.pow(b,2);
    return tổngbìnhphương;
}
let kq5 = tbp( 3 ); console.log(kq5); //10

Trong trường hợp tham số có giá trị mặc định không phải là sau cùng (phía sau nó còn required parameter) thì truyền undefined

let tbp = function(a:number, b= 0, c:number){
    let tổngbìnhphương = Math.pow(a,2) + Math.pow(b,2) + c*c;
    return tổngbìnhphương;
}
let kq5 = tbp( 3, undefined , 2 ); console.log(kq5); //13
let kq6 = tbp( 3, 1 , 2 ); console.log(kq6); //14

Tham số thừa – rest parameter

Một hàm trong TypeScript có thể chấp nhận 0 hoặc nhiều tham số. Trong TypeScript các rest parameter tuân theo các quy tắc sau:

Trong TypeScript mỗi hàm chỉ có một rest parameter. Rest parameter là 1 mảng và đặt ở cuối các tham số. Để dùng rest parameter, bạn nhập ba dấu chấm và dùng kiểu mảng làm chú thích kiểu:

function tổngtiềncủakh(hoten:string, ...tien: number[]): number {
    let t = 0;
    tien.forEach( n => t += n );
    return t;
}
console.log( tổngtiềncủakh('Tèo') ); // 0
console.log( tổngtiềncủakh('Tý', 1, 2) ); // 3
console.log( tổngtiềncủakh('Lượm', 1, 2, 3, 4) ); // 10

Hàm mũi tên – arrow function

Đây là loại hàm khá mới trong javascript. Thay vì định nghĩa hàm với từ khóa function như đã biết thì giờ đây bạn có thể định nghĩa hàm mà không cần dùng từ khóa function nữa. Hàm mũi tên (arrow function) được viết gọn hơn nhiều. Ví dụ:

let tienVND = function(usd=0){ return usd*25000; }
let tienVN = (usd = 0) => { return usd*25000; }
console.log(tienVND(10)); //250000
console.log(tienVN(10)); //250000

Khi hàm mũi tên chỉ có 1 tham số

Nếu hàm mũi tên chỉ có 1 tham số, có thể bỏ dấu () bao quanh tham số.

let tienVN = usd => { return usd*25000; }
console.log(tienVN(10)); //250000

Khi hàm mũi tên chỉ có 1 lệnh return

Nếu chỉ có 1 lệnh return trong thân của hàm arrow thì có thể bỏ bỏ qua chữ return và  {}

let tienVN = usd => usd*25000; 
console.log(tienVN(5)); //125000

Hàm mũi tên không có this

Hàm mũi tên không quan tâm đến ngữ cảnh (context) lắm , nên không có this . Do đó, this sẽ tương ứng với ngữ cảnh gần nhất của nó.

const kh1 = {
    hoten:'Tèo',
    getHT: function(){ return this.hoten }, 
    layHT: () => this.hoten
}
var hoten:string='Tý'; 
console.log(  kh1.getHT() );  // Tèo
console.log(  kh1.layHT() );  // Tý

Có thể sửa ví dụ trên bằng cách bind vào kh1 hoặc đơn giản khai báo trực tiếp kh1 chứ không dùng this trong hàm mũi tên. Xem ví dụ sau:

const kh1 = {
    hoten:'Tèo',
    getHT: function(){ return this.hoten }, 
    layHT: () => kh1.hoten
}
var hoten:string='Tý'; 
console.log(  kh1.layHT() );  // Tèo

Bởi vì trong hàm mũi tên, từ khóa this chưa chắc là đối tượng hiện hành.  Cho nên hàm mũi tên không phù hợp khi định nghĩa hàm trong đối tượng. Trong các đối tượng , khi khai báo method, cứ dùng function thường để dùng this cho đúng.

Kiểu trả về của hàm

Trong TypeScript, khi định nghĩa hàm bạn nên khai báo kiểu dữ liệu trả về của hàm luôn. Thực hiện khai báo kiểu trả về sau các tham số của hàm như sau:

function tăng1(n:number):number{
    return n+1;
}
let tt = tăng1(4);

Nếu dùng hàm mũi tên thì cũng khai báo kiểu trả về sau các  tham số

let tienVN = (usd=0):number => { return usd*25000; }
console.log(tienVN(10)); //250000

let m1 = [7,8,2,13,16];
let xl = (e):boolean => e>=15;
let kq1 = m1.find( xl );
console.log(kq1);

Nếu hàm không trả về gì cả thì khai báo kiểu trả về là void

let f1 = ():void =>{
    console.log('Chào bạn');
}
f1();