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 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

BÀI VIẾT LIÊN QUANXEM THÊM