Bài viết “Các kiểu dữ liệu trong TypeScript” giới thiệu về các loại dữ liệu sử dụng trong TypeScript, bao gồm cả các kiểu dữ liệu cơ bản và các kiểu dữ liệu bổ sung.
Kiểu dữ liệu là gì
Trong quá trình lập trình, việc quản lý và xử lý các giá trị là một phần quan trọng. Để thực hiện điều này, chúng ta thường sử dụng các nơi lưu trữ như biến và hằng. Các giá trị trong các biến và hằng cần được xác định thuộc một loại dữ liệu cụ thể để có thể sử dụng chúng đúng đắn trong các phép toán và xử lý dữ liệu.
Ví dụ, kiểu dữ liệu “number” (số) được sử dụng để lưu trữ các giá trị số. Điều này cho phép chúng ta thực hiện các phép toán số học như cộng (“++”) hoặc trừ (“-“). Ngược lại, kiểu dữ liệu “string” (chuỗi) thường được sử dụng để lưu trữ văn bản và có thể chuyển đổi giữa các dạng chữ thường và chữ hoa.
Qua đó, việc sử dụng các kiểu dữ liệu phù hợp giúp chúng ta hiệu quả khi xử lý và biểu diễn thông tin trong lập trình.
TypeScript có nhiều kiểu dữ liệu phục vụ cho nhiều tính toán rất tốt. như boolean, number, string, tuple,array, any…
Khai báo biến trong typeScript
Để khai báo biến trong TypeScript, dùng từ khóa var , let hoặc const. Ví dụ
var tenbh = 'Hãy yêu nhau đi'; let namsangtac = 1970; const tygia = 250000;
Trong typescript, khi khai báo biến sẽ tốt hơn nếu có khai báo luôn kiểu dữ liệu. Code như sau:
let tensach : string = "Hiểu về trái tim"; var gia:number = 150000; const tenLoai:string = 'Điện thoại';
Không nhất thiết phải gán giá trị khi khai báo biến. Khai báo biến trước rồi gán giá trị cho nó sau đó cũng được.
let anhien : boolean; let soluong:number; anhien=true; soluong=5;
Kiểu boolean trong typescript
Kiểu boolean là kiểu dữ liệu chỉ có hai giá trị là true, false. Nghĩa là biến nào được khai báo là boolean thì chỉ có thể gán vào đó 1 trong 2 giá trị là true hoặc false. Ví dụ:
let trangthai: boolean; trangthai = false; let diem = 7 ; let ketquathi:boolean = diem>=5 ;
Các biến kiểu boolean thường được dùng trong các điều kiện (if) để xử lý, tính toán tùy theo giá trị true false.
Kiểu number trong typescript
Đây là kiểu số, bao gồm cả số nguyên và số thực. Có thể gán, thay đổi giá trị các biến kiểu số với các toán tử tăng, giảm, +, – , *, / , %
let gia:number = 150; gia += 10; gia= 150.5;
Kiểu string trong typescript
String là kiểu chuỗi. Khi 1 biến được khai báo là kiểu string thì có thể gián 1 chuỗi giá trị cho nó. Chuỗi giá trị này được bao quanh bởi dấu ” hoặc dấu ‘ hoặc dấu `
let tieuDe:string = 'Kệ Thị Tịch';
let tacGia:string ="Vạn Hạnh";
let noidung = `
Thân như điện ảnh hữu hoàn vô
Vạn mộc xuân vinh, thu hựu khô.
Nhậm vận thịnh suy vô bố uý
Thịnh suy như lộ thảo đầu phô.
`;
Kiểu array trong typescript
Biến nào thuộc kiểu array thì có thể chứa được nhiều giá trị trong đó. Các giá trị trong array thuộc cùng 1 kiểu (number, string…) .
Có 2 cách khai báo array trong typescript. Đó là sử dụng cú pháp type[] hoặc dùng Array<type>
Cách 1: khai báo mảng dùng kiểu type[]
let arr_sanpham: string[] = ['Chuối nướng', "Gạo ST25", `Kẹo mè`]; let arr_soluong: number[] = [5, 2, 1];
Cách 2: khai báo mảng dùng kiểu Array<type>
let arr_tp: Array<string> = ['TPHCM', 'Hà Nội', "Đà Nẵng", `Cần Thơ`]; let arr_sốdân: Array<number> = [8.9, 8.4 , 1.2 , 2.0]; //triệu
Kiểu tuple trong typescript
Kiểu dữ liệu tuple là 1 mảng cố định số phần tử mà mỗi phần tử có kiểu dữ liệu khác nhau. Ví dụ
let sp1: [string, number] = [‘Gạo ST25’, 27000];
Kiểu enum trong typescript
Enum là kiểu liệt kê. Bạn định nghĩa ra kiểu này với các thành viên được liệt kê tên ra. Giá trị (value) của từng thành viên tăng từ 0, 1, 2….
enum role {REGISTER, AUTHOR, EDITOR, ADMIN}; //0, 1 , 2 , 3let r1: role = role.ADMIN; // 3
let r2: role = role.AUTHOR; // 1
console.log(r1, r2); // 1 3
Các thành viên trong enum có name và value. name thì phải khai báo như ví dụ trên, còn value nếu không chỉ định thì sẽ tăng 1 từ giá trị của thành viên trước đó. Giá trị của các thành viên có thể trùng nhau . Xem ví dụ sau:
enum MAVUNG {HCM=28, CAMAU, DANANG=36, CANTHO=36};
let hcm = MAVUNG.HCM; // 28
let cm = MAVUNG.CAMAU; // 29
let ct = MAVUNG.CANTHO; // 36
console.log(hcm, cm, ct ); //28 29 36
Kiểu enum giúp viết code lập trình được tường minh hơn. Như trong ví dụ trên, ghi MAVUNG.HCM thì rõ ràng hơn là 28.
Kiểu boolean trong typescript cũng chính là kiểu enum, chỉ có 2 giá trị true, false.
Kiểu union trong typescript
Union là kết hợp nhiều kiểu dữ liệu với nhau, dùng union để chỉ định các loại dữ liệu có thể gán cho biến.
let ketquathi : string | boolean; ketquathi = "Đậu"; ketquathi = true;
let arr_gia : string[] | number[];
arr_gia = ['15 $', '25000 VNĐ', '140000 đồng'];
arr_gia = [375000, 25000, 140000];
Kiểu object trong typescript
Kiểu object còn gọi là kiểu đối tượng, khai báo và sử dụng như các object javascript. Biến kiểu đối tượng được đặt trong dấu {}, các thành viên cách nhau bởi dấu phẩy. Từng thành viên là từng cặp name:value
const nhanvien1 = {
hoten:"Nguyễn Văn Tèo",
tuoi: 25,
phones: ['0917438274','095632421']
}
let ht = nhanvien1.hoten;
console.log(ht);//Nguyễn Văn Tèo
Kiểu any trong typescript
any là kiểu dữ liệu cho phép bạn gán giá trị bất kì vào biến. Lúc thì gán số, lúc khác gán string đều được.
let ketqua: any = true; // kiểu boolean ketqua = "Đậu"; //lúc khác gán kiểu chuỗi ketqua = 9; // gán số đều ok let sp1:any[] = [2, 'Corddoba Guitar Guclcor', true];
Nên hạn chế sử dụng any, vì khi đó TypeScript sẽ bỏ qua kiểm tra kiểu khi bạn tính toán, xử lý giá trị của biến này.
Kiểu unknown trong typescript
Kểu dữ liệu unkown tương tự như any. Bạn có thể gán giá trị bất kỳ cho biến kiểu này. Gán 1 biến unkown cho 1 biến có kiểu tường minh sẽ bị lỗi, còn any thì không.
let un :unknown = 9; let a:number = un; //ok let an:any = 8; let b:number = an; //not ok
Để gán giá trị unknow cho biến khác, bạn cần xác định kiểu rõ ràng rồi mới gán
let un :unknown = 9;
if (typeof un=='number'){
let a:number = un; //ok
}
Phân biệt giá trị null và undefine của biến
Null
- Có giá trị gán cho biến
- Có thể gán cho biến không trỏ đến bất kỳ đối tượng nào
- Typeof là object
- Null có thể là rỗng hoặc không tồn tại
- Sự vắng mặt của giá trị cho một biến
- Null có thể được chuyển đổi thành 0
let a = null; console.log(a); //null console.log(typeof(a)); //object
- Không có giá trị gán cho biến
- Biến đã được khai báo nhưng vẫn chưa gán giá trị
- Typeof là undefined
- Được dùng khi biến không được gán giá trị
- Sự vắng mặt của biến đó
- Có thể được chuyển đổi thành NaN
let x ; console.log(x); //undefined console.log(typeof(x)); //undefined console.log(typeof(x1)); //undefined
Ép kiểu trong typescript
Ép kiểu tức thực hiện chuyển đổi kiểu dữ liệu của biến sang dạng khác để xử lý, tính toán với các toán tử phù hợp. Ví dụ chuyển đổi chuỗi ’12’ thành số 12…
Có 2 cách ép kiểu trong Typescript, cách 1 là dùng <type> còn cách 2 là dùng từ khóa as. Ví dụ:
let userInput:unknown = prompt("Mời nhập cái gì đó");
let sokytu: number = ( <string> userInput ).length;
console.log(sokytu);
let userInput:unknown = prompt("Mời nhập cái gì đó");
let sokytu: number = (userInput as string).length;
console.log(sokytu);
Tạo kiểu dữ liệu trong typescript
Với dữ liệu có cấu trúc phức tạp. Cần phải phối hợp các kiểu cơ bản lại để tạo nên 1 kiểu mới, mô tả chính cấu trúc của dữ liệu thì code sẽ trực quan hơn. Để tạo type mới, dùng từ khóa type , sau đó là tên và {}
type chó = {
ten: string ;
namsinh: number ;
màulông:string ;
tênchủ:string ;
};
let c1:chó = { ten:"Nô nô", namsinh:2009, màulông:'Vàng', tênchủ:'Tèo'}
let c2:chó = { ten:"Mập", namsinh:2021, màulông:'Đen', tênchủ:'Tý' }
Thực tập kiểu dữ liệu trong TypeScript
(Công cụ code online: Simple Online Code Editor)
1. Tổ chức project typescript
– Tạo folder Lab2, trong đó tạo : index.html, style.css, file tsconfig.json, folder js, src/app.ts
– 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 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
– Code file index.html
<head> <meta charset="utf-8" <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js <title>Họ tên sinh viên</title> </head> <body> <div id="app"></div> </body> http://js/app.js
Xem thử trang web
2. Tạo và sử dụng type trong typescript
a. Tạo type sanpham với các thành phần: id (số), ten(chuỗi), gia(số), hinh(chuỗi), màu (một trong các giá trị Đỏ xanh, đen , trắng)
b. Tạo biến sp1 với kiểu sanpham và gán giá trị cho nó
c. Hiện giá trị của sp1 ra trang web
d. Định dạng trang và xem kết quả
3. Thực tập với tuple
a. Định nghĩa tuple spInCart và mảng các tuple
b. Gán giá trị cho mảng cart
cart = [
[7, 'Thuật Xử Thế Của Người Xưa', 80000, 2, 'xuthe.jpg'],
[2, 'Sống Như Nhân Duyên', 96000, 1, 'songnd.jpg'],
[3, 'Con đường hạnh phúc', 30000, 1, 'cdhp.jpg'],
[9, 'Giá trị của sự tử tế', 75000, 3, 'tute.jpg'],
];
cart.push([5,'Nhẹ gánh ưu phiền', 82000, 1, 'nheganh.jpg']);
console.log(cart);
c. Hiện mảng cart
d. Định dạng và hiển thị
4. Thực tập với tuple và api
a. Đăng ký apikey trong pexels.com
– Vào https://www.pexels.com , nhắp Join để đăng ký tài khoản. Xong vào https://www.pexels.com/api/new/ để lấy api key
– Vào https://www.pexels.com/api/documentation/#photos-search để đọc tài liệu về cách lấy api theo từ khóa.
b. Định nghĩa type mới để mô tả hình ảnh đổ về
Trong app.ts, định nghĩa type hìnhảnh như sau
c. Code goi API
Trong app.ts, code để gọi api và tạm show dữ liệu trong console
Xem thử kết quả
d. Code show dữ liệu
– Hiện cấu trúc từng hình trả về bằng cách lặp qua mảng photos : Xóa lệnh console.log(data) ở trên và code lại như sau:
– Xem kết quả sẻ thấy chi tiết từng hình hiện ra
– Hiện thông tin của hình ra web : Xóa lệnh console.log(hinh) ở trên và code:
Định dạng thêm css để được như sau:
Dưới đây, chúng ta sẽ kết thúc phần giới thiệu về các kiểu dữ liệu trong TypeScript. Một số bạn thực tập cũng đã có cơ hội thực hành. Hãy nghỉ ngơi một chút nếu bạn cảm thấy mệt mỏi, nhé!
One thought on “Các kiểu dữ liệu trong TypeScript”