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 trong typescript
- Hàm là gì
- Các loại hàm trong TypeScript
- Tham số cho hàm trong TypeScript
- Hàm mũi tên – arrow function
- Kiểu trả về của hàm
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();
