Chào các bạn, TypeScript là một ngôn ngữ lập trình mở rộng từ JavaScript, cho phép sử dụng kiểu tĩnh, giúp phát hiện lỗi trong quá trình phát triển dễ dàng hơn. Bài viết này sẽ hướng dẫn sử dụng TypeScript với các cheat sheet cơ bản qua ví dụ thực tế.
1. Basic types
1.1. Kiểu dữ liệu số (numeric data type)
TypeScript sử dụng number để biểu diễn số nguyên và số thực.
let tuoi: number = 25;
let gia: number = 99.99;1.2. Kiểu dữ liệu chuỗi (string data type)
Dữ liệu dạng văn bản được biểu diễn bằng kiểu string.
let ten: string = "Nguyen Van A";
let chao: string = `Xin chào, ${ten}!`;1.3. Kiểu dữ liệu boolean (boolean data type)
Kiểu boolean chỉ có hai giá trị: true và false.
let daDangNhap: boolean = true;1.4. Kiểu trả về của hàm (function return type)
Bạn có thể định nghĩa kiểu trả về cho hàm.
function congHaiSo(a: number, b: number): number {
return a + b;
}1.5. Kiểu any
Kiểu any cho phép một biến nhận bất kỳ kiểu dữ liệu nào.
let giaTriBatKy: any = "Xin chào";
giaTriBatKy = 42; // Không bị lỗi1.6. Kiểu null
Biến kiểu null chỉ có giá trị null.
let giaTriRong: null = null;1.7. Kiểu undefined
Biến kiểu undefined không được gán bất kỳ giá trị nào.
let chuaXacDinh: undefined = undefined;2. Function
2.1. Hàm với tham số và kiểu trả về được định nghĩa (function with typed parameters and return type)
Bạn có thể định nghĩa kiểu dữ liệu cho tham số và kiểu trả về của hàm.
function nhanHaiSo(a: number, b: number): number {
return a * b;
}2.2. Hàm với tham số tùy chọn (function with optional parameter)
Dùng ? để định nghĩa tham số tùy chọn.
function chaoHoi(ten?: string): string {
return `Xin chào, ${ten || "bạn"}!`;
}2.3. Hàm với tham số mặc định (function with default parameter)
Bạn có thể gán giá trị mặc định cho tham số.
function tinhGiaTri(a: number, b: number = 10): number {
return a + b;
}2.4. Hàm với tham số còn lại (function with rest parameter)
Dùng ... để gom các tham số còn lại thành một mảng.
function tinhTong(...so: number[]): number {
return so.reduce((tong, giaTri) => tong + giaTri, 0);
}2.5. Hàm với chữ ký quá tải (function with overloaded signatures)
Dùng quá tải hàm để hỗ trợ nhiều kiểu dữ liệu đầu vào.
function layThongTin(id: number): string;
function layThongTin(ten: string): string;
function layThongTin(idOrTen: number | string): string {
if (typeof idOrTen === "number") {
return `ID là ${idOrTen}`;
} else {
return `Tên là ${idOrTen}`;
}
}3. Interfaces
3.1 Interface cơ bản (basic interface)
Interface định nghĩa kiểu dữ liệu cho đối tượng.
interface Nguoi {
ten: string;
tuoi: number;
}
let nguoi: Nguoi = { ten: "Nguyen Van A", tuoi: 30 };3.2. Interface với thuộc tính tùy chọn (interface with optional property)
Dùng ? để định nghĩa thuộc tính tùy chọn.
interface SinhVien {
ten: string;
lop?: string;
}
let sv: SinhVien = { ten: "Nguyen Van B" };3.3. Interface với thuộc tính chỉ đọc (interface with readonly property)
Dùng readonly để định nghĩa thuộc tính không thể thay đổi.
interface TaiKhoan {
readonly id: number;
ten: string;
}
let taiKhoan: TaiKhoan = { id: 1, ten: "Admin" };
// taiKhoan.id = 2; // Lỗi3.4. Interface với thuộc tính hàm (interface with function property)
Interface có thể định nghĩa hàm như một thuộc tính.
interface MayTinh {
tinhTong(a: number, b: number): number;
}
let mt: MayTinh = {
tinhTong: (a, b) => a + b,
};4. Generic
4.1. Hàm generic (generic function)
Hàm generic hỗ trợ kiểu dữ liệu linh hoạt.
function inRa<T>(giaTri: T): T {
console.log(giaTri);
return giaTri;
}
inRa<number>(123);
inRa<string>("Xin chào");4.2. Lớp generic (generic class)
Lớp generic cho phép định nghĩa kiểu dữ liệu khi khởi tạo.
class Hop<T> {
private noiDung: T;
constructor(noiDung: T) {
this.noiDung = noiDung;
}
layNoiDung(): T {
return this.noiDung;
}
}
let hopSo: Hop<number> = new Hop(123);
console.log(hopSo.layNoiDung());4.3. Interface generic (generic interface)
Interface generic hỗ trợ kiểu dữ liệu tùy chỉnh.
interface CapDoi<T, U> {
khoa: T;
giaTri: U;
}
let cap: CapDoi<string, number> = { khoa: "ID", giaTri: 123 };4.4. Alias generic (generic type alias)
Alias generic định nghĩa kiểu dữ liệu thông qua từ khóa type.
type Mang<T> = T[];
let ds: Mang<string> = ["A", "B", "C"];4.5. Ràng buộc generic (generic constraint)
Dùng extends để ràng buộc kiểu dữ liệu.
function logDoiTuong<T extends { id: number }>(doiTuong: T): void {
console.log(doiTuong.id);
}
logDoiTuong({ id: 1, ten: "ABC" });5. Classes
5.1. Khai báo lớp với constructor và phương thức (declare a class with constructor and methods)
class Nguoi {
ten: string;
constructor(ten: string) {
this.ten = ten;
}
chao(): string {
return `Xin chào, ${this.ten}`;
}
}
let nguoi = new Nguoi("Nguyen Van A");
console.log(nguoi.chao());5.2. Kế thừa lớp (class inheritance)
class DongVat {
diChuyen(): void {
console.log("Động vật di chuyển");
}
}
class Chim extends DongVat {
bay(): void {
console.log("Chim bay");
}
}
let chim = new Chim();
chim.diChuyen();
chim.bay();5.3. Phạm vi truy cập (access modifiers for class members)
Dùng public, private, và protected để kiểm soát truy cập.
class TaiKhoan {
private matKhau: string;
constructor(matKhau: string) {
this.matKhau = matKhau;
}
layMatKhau(): string {
return this.matKhau;
}
}
let tk = new TaiKhoan("123456");
console.log(tk.layMatKhau());6. Interface (cont)
6.1. Kế thừa một interface khác (interface extending another interface)
Interface có thể kế thừa một interface khác bằng từ khóa extends.
interface HinhDang {
mauSac: string;
}
interface HinhChuNhat extends HinhDang {
chieuDai: number;
chieuRong: number;
}
let hcn: HinhChuNhat = {
mauSac: "đỏ",
chieuDai: 10,
chieuRong: 5,
};
console.log(hcn);6.2. Kế thừa nhiều interface (interface extending multiple interfaces)
Interface có thể kế thừa nhiều interface cùng lúc.
interface Hinh {
dienTich(): number;
}
interface HinhHop {
theTich(): number;
}
interface Hop3D extends Hinh, HinhHop {
chieuCao: number;
}
let hop: Hop3D = {
chieuCao: 10,
dienTich: () => 100,
theTich: () => 1000,
};
console.log(hop);6.3. Interface với chỉ số (interface with index signature)
Interface có thể định nghĩa các thuộc tính có khóa động bằng cách sử dụng chỉ số (index signature).
interface DanhSach {
[id: number]: string; // Khóa là số, giá trị là chuỗi
}
let ds: DanhSach = {
1: "Nguyen Van A",
2: "Nguyen Van B",
};
console.log(ds[1]); // "Nguyen Van A"6.4. Interface với chữ ký hàm (interface with call signature)
Interface có thể định nghĩa chữ ký hàm, biểu thị cách gọi một đối tượng như một hàm.
interface TinhToan {
(a: number, b: number): number; // Hàm nhận hai số và trả về một số
}
let cong: TinhToan = (a, b) => a + b;
console.log(cong(5, 10)); // 15Hy vọng bài viết này sẽ giúp bạn nắm rõ các khái niệm và cách sử dụng TypeScript một cách dễ dàng hơn. Đừng quên ghé thăm codetuthub.com để đọc thêm các bài viết về lập trình.
0 Bình luận