Giới thiệu TypeScript

TypeScript là phiên bản mở rộng của JavaScript, bổ sung hệ thống kiểu tĩnh giúp code rõ ràng, ít lỗi và dễ bảo trì. Đây là lựa chọn tiêu chuẩn cho các dự án web chuyên nghiệp trong thời đại hiện nay.

---

1. Nội dung chính

• TypeScript là gì và khác JavaScript ở đâu
• Lợi ích thực tế khi dùng TypeScript trong dự án
• Vì sao TypeScript giúp code ít lỗi hơn
• Môi trường chạy TypeScript: tsc và node
• Viết file .ts đầu tiên và biên dịch sang .js

---

2. Ví dụ chi tiết

2.1. File TypeScript đầu tiên

// file: hello.ts
function hello(name: string) {
  return `Hello, ${name}`;
}

console.log(hello("TypeScript"));

2.2. Chạy chương trình

# Biên dịch TypeScript sang JavaScript
tsc hello.ts

# Chạy file JavaScript đã biên dịch
node hello.js

2.3. Lợi ích của TypeScript

// JavaScript - dễ gặp lỗi
function add(a, b) {
  return a + b;
}

add(5, "10"); // Kết quả: "510" - không như mong muốn

// TypeScript - phát hiện lỗi ngay từ đầu
function add(a: number, b: number) {
  return a + b;
}

add(5, "10"); // ❌ Lỗi: Argument of type 'string' is not assignable to parameter of type 'number'

---

3. Kiến thức trọng tâm

3.1. TypeScript = JavaScript + kiểu tĩnh (static typing)

• Phát hiện lỗi ngay khi viết code
• IDE hỗ trợ mạnh mẽ: autocomplete, refactoring
• Tăng năng suất và chất lượng code

💡 GHI NHỚ: TypeScript giúp bắt lỗi sớm, tiết kiệm thời gian debug

3.2. Dự án lớn đề xuất chuyển sang TS vì dễ mở rộng và dễ bảo trì

• Teamwork trơn tru: Code có cấu trúc rõ ràng
• Ít bug: Lỗi được phát hiện trước khi chạy
• Dễ refactor: Thay đổi code an toàn với type system

3.3. TypeScript vẫn chạy trên JavaScript

• TS biên dịch xuống JS: Tương thích mọi trình duyệt
• Không cần runtime đặc biệt: Dùng được cho cả frontend và backend
• Dần dần áp dụng: Có thể chuyển đổi từng phần

---

4. Bài tập thực hành

Bài 1: Cài đặt TypeScript

# Cài đặt TypeScript toàn cục
npm install -g typescript

# Kiểm tra phiên bản
tsc --version

Bài 2: Tạo project đầu tiên

# Tạo thư mục project
mkdir my-first-ts
cd my-first-ts

# Tạo file TypeScript
echo 'function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));' > intro.ts

# Biên dịch và chạy
tsc intro.ts
node intro.js

Bài 3: Viết hàm với nhiều tham số

// Tạo file calculator.ts
function calculate(a: number, b: number, operation: string): number {
  switch (operation) {
    case "add": return a + b;
    case "subtract": return a - b;
    case "multiply": return a * b;
    case "divide": return a / b;
    default: return 0;
  }
}

console.log(calculate(10, 5, "add")); // 15
console.log(calculate(10, 5, "multiply")); // 50

---

5. Sai lầm thường gặp

• Bỏ qua type annotation: Không khai báo kiểu, mất đi lợi ích của TS
• Dùng any quá nhiều: Làm giảm hiệu quả của type system
• Không cấu hình tsconfig.json: Dẫn đến việc biên dịch không optimal

⚠️ GHI NHỚ: Tránh dùng any khi có thể xác định được kiểu cụ thể

---

6. Kết luận

TypeScript mang lại nền tảng vững chắc cho lập trình JavaScript hiện đại. Chỉ cần hiểu bản chất kiểu tĩnh và biết biên dịch file .ts, bạn đã có thể bắt đầu hành trình viết code an toàn và chuyên nghiệp hơn.

🔑 GHI NHỚ QUAN TRỌNG:

• TypeScript giúp phát hiện lỗi sớm
• Code dễ bảo trì và mở rộng
• Tương thích với mọi môi trường JavaScript
• Bắt đầu đơn giản với tsc và file .ts