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
- Thực tập tạo và dùng hàm trong typescript
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ó 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 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 khi báo là 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();
Thực tập tạo và dùng hàm trong typescript
1. Tổ chức project typescript
a. Tạo folder Lab3 và cấu trúc file, folder
- file index.html
- file tsconfig.json
- file src/app.ts
- file public/css/style.css
- folder public/js
- folder public/images
b. Cấu hình biên dịch
Mở file tsconfig.json và cấu hình để biên dịch code theo version ECMA mới nhất, biên dịch mã .ts vào folder public/js, không lưu comment vào file đích và bật chế độ tự động biên dịch file .ts có chỉnh sửa.

c. Code file index.html
<head> <meta charset="utf-8"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <link href="public/css/style.css" rel="stylesheet"> <title>Họ tên sinh viên</title> </head> <body> <div class="container"> <header class="row bg-info"> <b id="hoten"></b> </header> <nav class="row bg-secondary"> </nav> <main class="row"> <div id="divhinhdep"> </div> </main> <footer class="row bg-dark text-white text-center"> <p>HỌ TÊN SINH VIÊN</p> </footer> </div> </body> <script src="public/js/app.js"></script>
Định dạng css trong file style.css
.container { width: 1200px;} .container > header { height: 90px; } .container > nav { height: 60px;} .container > footer { height: 45px;}
d. Chạy biên dịch tự động
Vào Terminal và chạy lệnh :
tsc
Xem thử trang web
2. Hàm thứ trong tuần
Yêu cầu
1. Tạo 1 biến có tên thuTrongTuan. Giá trị của biến là 1 hàm mũi tên có 1 tham số kiểu number. Giá trị mặc định của tham số này là -1. Hàm trả về kiểu chuỗi.
2. Hàm trả về tên của thứ trong tuần, 0 là chủ nhật, 1 là thứ hai, nếu tham số không phải từ 0 đến 6 thì trả về rỗng.
Định nghĩa hàm

Sử dụng hàm
let t:number = new Date().getDay(); let thu:string = thuTrongTuan(t); console.log(thu);
Mời bạn bổ sung thêm cho thú vị: cho chọn ngày trong form và hiện tên thứ tương ứng
3. Hàm xóa ký tự đặt biệt trong 1 chuỗi
Yêu cầu:
1. Tạo 1 biến có tên XoaKyTuDacBiet, giá trị của biến là 1 hàm mũi tên. Hàm này có 1 tham số str kiểu chuỗi. Hàm sẽ trả về kiểu chuỗi
2. Hàm sẽ thực hiện xóa hết các ký tự đặc biệt trong chuỗi tham số ngoại trừ các ký tự a-z, A-Z, 0-9 , – và khoảng trắng.
Định nghĩa hàm

Sử dụng hàm
let chuoi = `Hay@#; 'Y___"""eu" !N!+h*@*a?u %D&i`; chuoi = xoaKyTuDacBiet(chuoi); console.log(chuoi); //Hay Yeu Nhau Di
Mời bạn bổ sung thêm cho thú vị: giá trị của biến chuoi nhận từ form , replace luôn các khoảng trắng bằng dấu –
4. Hiện danh sách ảnh đẹp sử dụng type, arrow function
a. Tạo type và dữ liệu
– Viết code tạo 1 type mới có tên là hinhdep gồm 4 thành phần như sau: id (số), ten(chuỗi), url(chuỗi), mota(chuỗi)

– Tạo mảng hinhdep (theo type mới định nghĩa ở trên)

– Gán dữ liệu cho mảng mới định nghĩa
arr_hinh = [ {id:1, ten:'Hoa lan', url:'lan.jpg', mota:'Lan có mùi thơm dễ chịu, sang trọng, tao nhã'}, {id:2, ten:'Anh đào', url:'anhdao.jpg', mota:'Hoa mỏng manh, tượng trưng cho sắc đẹp và tinh khiết'}, {id:3, ten:'Thiên điểu', url:'thiendieu.jpg', mota:'Hoa có dạng chú chim đầy màu sắc'}, {id:4, ten:'Hoa tigon', url:'tigon.jpg', mota:'Hoa màu hồng, cánh mỏng manh.Mọc thành từng chùm.'}, {id:5, ten:'Thược dược', url:'thuocduoc.jpg', mota:'Hoa có nhiều màu, đẹp ngất ngây lòng người,'}, {id:6, ten:'Cẩm tú cầu', url:'camtucau.jpg', mota:'Đẹp trang nhã, nhẹ nhàng. Sống lâu năm'}, ];
– Copy Paste 6 phần tử trong mảng trên để mảng có được 12 phần tử. Sửa id các phần tử mảng để có các giá trị id từ 1-12.
– Tải file hình hoa về và lưu các file hình vào folder public/images
b. Hiện dữ liệu hình đẹp ra trang web
Lặp qua mảng dữ liệu để hiện hình, mỗi hình đặt trong div có class là hinh

c. Định dạng các hình mới hiện (style.css)
#divhinhdep { background-color: AliceBlue; padding: 0;} #divhinhdep div.hinh { float: left; width: 180px; height: 120px; margin: 5px; border: 1px solid darkorange; } #divhinhdep div.hinh:hover { cursor: pointer;} #divhinhdep img { width: 100%; height: 100%;}
Xem thử

d. Xáo trộn mảng để hiện ngẫu nhiên các hình
Thay thế dòng arr_hinh.forEach( hien1hinh); bằng code sau:
const arr_hinh1:hinhdep[] = arr_hinh.sort((a, b) => 0.5 - Math.random()); arr_hinh1.forEach( hien1hinh);
Xem lại sẽ thấy mỗi lần nạp trang là vị trí các hình thay đổi.
e. Tạo class css để ẩn hiện hình
Trong style.css, tạo 2 class ẩn hiện
.an { display: none;} .hien { display: block;}
f. Code ẩn các hình đẹp khi mới nạp trang

g. Code ẩn hiện khi click chuột vào div.hình

Xem thử: khi mới nạp trang thì mọi hình ẩn hết, khi nhắp vào hình nào thì hình đó mới hiện
