[Javascript Typescript] Bài 9 - TypeScript - Trang bị 'Giáp Sắt' cho Ninja JavaScript

🚀TypeScript là gì? Tại sao nên dùng TypeScript thay vì JavaScript thuần?
🚀Làm quen với các kiểu dữ liệu cơ bản (Primitive Types) trong TypeScript.
🚀Cách định kiểu dữ liệu cho Mảng (Array) và Đối tượng (Object).
🚀Hướng dẫn cài đặt môi trường Node.js, npm và TypeScript từ A-Z.

🛡️ Phần 1: TypeScript là gì và vì sao đáng học?

TypeScript là một superset của JavaScript do Microsoft phát triển. Nói ngắn gọn, bạn vẫn viết JavaScript như cũ, nhưng được gắn thêm một hệ thống kiểu dữ liệu để code rõ ràng và an toàn hơn.

Điểm quan trọng nhất là: mọi code JavaScript hợp lệ cũng là code TypeScript hợp lệ. Vì vậy, đây không phải là học lại từ đầu, mà là nâng cấp JavaScript bằng một “bộ giáp” giúp phát hiện lỗi sớm hơn.

• JavaScript vẫn là nền tảng: biến, hàm, mảng, object, class... vẫn giữ nguyên tinh thần cũ.
• TypeScript thêm Type System: cho phép mô tả rõ kiểu của biến, tham số hàm và dữ liệu trả về.
• Mục tiêu chính: bắt lỗi ngay trong editor thay vì chờ chạy test mới phát hiện.

💻 Ví dụ rất ngắn:

let tenTrinhDuyet: string = "chrome"; // Biến này phải là chuỗi

// tenTrinhDuyet = 123; // Lỗi: không thể gán number vào string

Chỉ với một chú thích kiểu nhỏ, TypeScript đã giúp bạn chặn lỗi ngay trong lúc đang gõ code.

🎯 Phần 2: Vì sao Automation Tester nên dùng TypeScript?

Trong automation, thứ tốn thời gian nhất không phải lúc nào cũng là viết test, mà là debug các lỗi dữ liệu, lỗi truyền tham số sai và lỗi đổi tên nhưng quên sửa chỗ gọi. TypeScript xử lý rất tốt đúng những điểm đau đó.

🔹 1. Bắt lỗi sớm thay vì chờ chạy mới vỡ ra

JavaScript rất linh hoạt, nhưng chính sự linh hoạt đó cũng dễ tạo ra lỗi runtime khó chịu.

let soLuong = 5; // Hiện tại là number

soLuong = "Năm sản phẩm"; // JavaScript vẫn cho phép đổi sang string

let soLuong: number = 5; // Khai báo rõ: biến này phải là số

// soLuong = "Năm sản phẩm"; // Lỗi: Type 'string' is not assignable to type 'number'

Với TypeScript, lỗi kiểu dữ liệu bị chặn ngay trong editor. Bạn không cần đợi script chạy được 20-30 giây rồi mới quay lại tìm nguyên nhân.

🔹 2. Gợi ý code chuẩn hơn, đọc code nhanh hơn

Khi TypeScript biết dữ liệu của bạn trông như thế nào, VS Code cũng có thể gợi ý chính xác các thuộc tính và phương thức tương ứng. Điều này đặc biệt hữu ích khi làm Page Object, helper hoặc utils dùng lại nhiều nơi.

function login(username: string, password: string): void {
  console.log(`Đăng nhập với user: ${username}`); // Hàm này không trả về gì
}

login("admin", "123456"); // OK
// login("admin", 123456); // Lỗi: password phải là string

Nhìn vào chữ ký hàm, bạn hiểu ngay dữ liệu đầu vào là gì, đầu ra là gì. Khi đổi tên hàm hoặc đổi kiểu dữ liệu, TypeScript cũng giúp phát hiện các chỗ cần sửa để refactor an toàn hơn.

💡 Mẹo nhớ nhanh: TypeScript không thay JavaScript, mà giúp JavaScript bớt “liều” và dễ bảo trì hơn.

🔤 Phần 3: Chú thích kiểu dữ liệu cơ bản trong TypeScript

Cú pháp nền tảng của TypeScript là:

let tenBien: kieuDuLieu = giaTri;

Bạn có thể xem nó như hành động dán nhãn lên chiếc hộp dữ liệu trước khi bỏ giá trị vào trong.

🔹 1. string, number, boolean

Đây là các kiểu nguyên thủy bạn dùng nhiều nhất khi viết script, config và dữ liệu test.

let browserName: string = "chromium"; // Lưu tên trình duyệt
let timeout: number = 30000; // Lưu thời gian chờ tính bằng mili giây
let isHeadless: boolean = true; // Bật chế độ chạy ẩn

browserName = "firefox"; // OK
timeout = 45000; // OK
isHeadless = false; // OK

// browserName = 123; // Lỗi: number không gán được vào string
// timeout = "30s"; // Lỗi: string không gán được vào number
// isHeadless = 1; // Lỗi: number không gán được vào boolean

🔹 2. any và unknown

any là “cửa thoát hiểm” khi bạn chưa kiểm soát được kiểu dữ liệu. Nó rất tiện, nhưng cũng rất nguy hiểm vì gần như tắt luôn việc kiểm tra kiểu.

unknown an toàn hơn: bạn vẫn nhận được dữ liệu chưa rõ kiểu, nhưng TypeScript bắt bạn kiểm tra trước khi dùng.

let duLieuTam: any = "Xin chào";
duLieuTam = 123; // OK
duLieuTam = true; // OK

let giaTriBiAn: unknown = "Xin chào từ API";

if (typeof giaTriBiAn === "string") {
  console.log(giaTriBiAn.toUpperCase()); // OK vì đã kiểm tra kiểu trước
}

// console.log(giaTriBiAn.toUpperCase()); // Lỗi nếu chưa kiểm tra kiểu

⚠️ Lưu ý: Chỉ dùng any khi thật sự cần. Nếu còn kiểm soát được luồng dữ liệu, hãy ưu tiên unknown hoặc định kiểu rõ ràng.

🔹 3. void, null, undefined và Type Inference

void thường dùng cho các hàm không trả về dữ liệu. null và undefined thường xuất hiện ở các biến có thể chưa có giá trị. Còn Type Inference là khả năng TypeScript tự suy luận kiểu khi bạn gán giá trị ngay lúc khai báo.

function logMessage(message: string): void {
  console.log(message); // Hàm chỉ log ra màn hình, không trả về dữ liệu
}

let username: string | null = "tester01";
username = null; // OK vì biến này cho phép null

let tenDuAn = "Playwright Project"; // TypeScript tự suy luận đây là string
// tenDuAn = 123; // Lỗi: không thể đổi sang number

Lời khuyên thực tế là: để TypeScript tự suy luận cho các biến đơn giản, nhưng với tham số hàm và dữ liệu trả về thì nên chú thích tường minh.

🧱 Phần 4: Chú thích kiểu cho mảng và object

Đây là phần rất quan trọng với tester vì phần lớn dữ liệu test đều đi qua array và object: danh sách môi trường, bộ dữ liệu đăng nhập, config, response API, payload...

🔹 1. Mảng trong TypeScript

Bạn có thể định kiểu mảng theo hai cách quen thuộc: kieuDuLieu[] hoặc Array<kieuDuLieu>. Cả hai đều đúng.

let browserList: string[] = ["chrome", "firefox", "webkit"]; // Mảng chuỗi
let retryAttempts: Array<number> = [1, 2, 3]; // Mảng số

browserList.push("edge"); // OK
retryAttempts.push(4); // OK

// browserList.push(123); // Lỗi: number không thêm được vào mảng string
// retryAttempts.push("5"); // Lỗi: string không thêm được vào mảng number

Khi dữ liệu test được khóa chặt kiểu như vậy, bạn giảm được rất nhiều lỗi lẫn lộn giữa số, chuỗi và boolean trong quá trình chạy test.

🔹 2. Object có “hình dạng” rõ ràng

TypeScript cho phép mô tả trước object phải có những thuộc tính nào và kiểu của từng thuộc tính là gì. Đây là nền tảng để sau này bạn học type, interface và class dễ hơn.

let testUser: {
  username: string;
  id: number;
  isVip: boolean;
};

testUser = {
  username: "standard_user",
  id: 101,
  isVip: false
}; // OK

// testUser = { username: "guest", id: 102 }; // Lỗi: thiếu thuộc tính isVip
// testUser = { username: "admin", id: "001", isVip: true }; // Lỗi: id phải là number

🔹 3. Thuộc tính tùy chọn và chỉ đọc

Trong thực tế, có field có thể có hoặc không, và cũng có field chỉ nên gán một lần rồi giữ nguyên. TypeScript hỗ trợ rất tốt cả hai tình huống này.

let testConfig: {
  readonly env: string;
  baseURL: string;
  timeout: number;
  tags?: string[];
};

testConfig = {
  env: "staging",
  baseURL: "https://anhtester.com",
  timeout: 5000
}; // tags có thể không có vẫn hợp lệ

// testConfig.env = "production"; // Lỗi: env là readonly

testConfig = {
  env: "staging",
  baseURL: "https://anhtester.com",
  timeout: 5000,
  tags: ["smoke", "login"] // Thuộc tính tùy chọn có thể xuất hiện khi cần
};

⚙️ Phần 5: Cài Node.js, npm, TypeScript và chạy thử dự án đầu tiên

Muốn chạy được TypeScript trong thực tế, bạn cần một môi trường Node.js. Đây cũng chính là nền tảng đi kèm npm, công cụ quản lý package quen thuộc của hệ JavaScript.

🔹 1. Node.js và npm dùng để làm gì?

• Node.js: cho phép chạy JavaScript bên ngoài trình duyệt.
• npm: giúp cài thư viện, quản lý package và khai báo phụ thuộc của dự án.
• package.json: là file mô tả dự án và danh sách dependencies.

Với người mới, chỉ cần nhớ một ý: cài Node.js là thường có sẵn npm. Hãy ưu tiên bản LTS từ nodejs.org để ổn định hơn.

🔹 2. Kiểm tra môi trường và khởi tạo dự án

💻 Các lệnh cơ bản:

# Kiểm tra Node.js và npm đã cài thành công chưa
node -v
npm -v

# Tạo thư mục dự án và đi vào bên trong
mkdir my-first-ts-app
cd my-first-ts-app

# Tạo file package.json mặc định
npm init -y

Sau bước này, dự án của bạn đã có file package.json. Đây là nơi ghi lại tên dự án, phiên bản và các package cần thiết để chạy.

🔹 3. Cài package và chạy file TypeScript đầu tiên

Để thấy npm hoạt động thế nào, bạn có thể cài một package quen thuộc như lodash. Sau đó mới cài tiếp bộ công cụ TypeScript.

# Cài một package để thực hành
npm install lodash

# Cài TypeScript và ts-node cho môi trường phát triển
npm install typescript ts-node --save-dev

# Tạo file cấu hình TypeScript
npx tsc --init

Giờ hãy tạo file index.ts và chạy thử một ví dụ đơn giản:

const thongDiep: string = "Hello TypeScript"; // Khai báo biến có kiểu rõ ràng
const soLanThu: number = 3; // Giá trị số

console.log(thongDiep);
console.log(`Số lần thử tối đa: ${soLanThu}`);

💻 Chạy file index.ts:

npx ts-node index.ts

npx cho phép bạn chạy các công cụ cài cục bộ trong dự án mà không cần cài global trên máy.

🔹 Ghi nhớ nhanh cho Tester

• TypeScript là JavaScript được bổ sung hệ thống kiểu dữ liệu, không phải một ngôn ngữ hoàn toàn xa lạ.
• Lợi ích lớn nhất của TypeScript là bắt lỗi sớm, gợi ý code tốt và giúp refactor an toàn hơn.
• Các kiểu cơ bản cần nhớ đầu tiên là string, number, boolean, any, unknown và void.
• Mảng và object có thể được định kiểu chặt chẽ để dữ liệu test luôn nhất quán.
• ? dùng cho thuộc tính tùy chọn, còn readonly dùng cho dữ liệu không nên bị sửa lại.
• Muốn chạy TypeScript, bạn cần Node.js, npm, typescript, ts-node và thường có thêm file tsconfig.json.

✅ Kết luận: Bài 9 là bước chuyển rất quan trọng từ JavaScript “linh hoạt nhưng dễ sơ hở” sang TypeScript “rõ ràng và an toàn hơn”. Nếu nắm chắc phần chú thích kiểu cơ bản, mảng, object và cách cài môi trường, bạn đã có nền móng tốt để học tiếp type, interface, class và xây framework automation bài bản hơn.