TypeScript cơ bản: thêm "kiểu" cho JavaScript

Vì sao cần TypeScript?

// File: why-ts.js
// JavaScript: không báo lỗi, chạy sai im lặng
function greet(name) {
  return "Xin chào " + name.toUpperCase()
}

greet("An")     // ✅ "Xin chào AN"
greet(42)       // 💥 Runtime error: name.toUpperCase is not a function
greet(undefined) // 💥 Runtime error

// TypeScript: báo lỗi NGAY KHI VIẾT CODE
// function greet(name: string) {
//   return "Xin chào " + name.toUpperCase()
// }
// greet(42)  ← Editor gạch đỏ: "số 42 không phải string"

Kiểu dữ liệu cơ bản

// File: types.ts
// Kiểu nguyên thuỷ
let name: string = "An"
let age: number = 25
let isStudent: boolean = true

// Mảng
let scores: number[] = [90, 85, 92]
let names: string[] = ["An", "Bình", "Cường"]

// Object: dùng interface để định nghĩa "hình dạng"
interface User {
  name: string
  age: number
  email: string
  isActive?: boolean  // dấu ? = optional, có thể không có
}

const user: User = {
  name: "An",
  age: 25,
  email: "an@example.com",
  // isActive không bắt buộc nên bỏ qua được
}

// Function: khai báo kiểu tham số và giá trị trả về
function add(a: number, b: number): number {
  return a + b
}

add(1, 2)    // ✅ OK
// add("1", 2) ← 🔴 Error: "1" không phải number

Union types & Type narrowing

// File: union.ts
// Union type: biến có thể là string HOẶC number
let id: string | number
id = "abc"  // ✅
id = 123    // ✅
// id = true ← 🔴 Error: boolean không được

// Type narrowing: kiểm tra kiểu trước khi dùng
function printId(id: string | number) {
  if (typeof id === "string") {
    // TypeScript biết id là string ở đây
    console.log(id.toUpperCase())
  } else {
    // TypeScript biết id là number ở đây
    console.log(id.toFixed(2))
  }
}

// Type alias: đặt tên cho kiểu phức tạp
type Status = 'loading' | 'success' | 'error'

function showMessage(status: Status) {
  if (status === 'loading') console.log('Đang tải...')
  if (status === 'success') console.log('Thành công!')
  if (status === 'error') console.log('Có lỗi!')
}

showMessage('success')  // ✅
// showMessage('pending') ← 🔴 Error: 'pending' không thuộc Status

Cài đặt và chạy TypeScript

// File: setup.sh
# Cài TypeScript
npm install -g typescript

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

# Tạo file TypeScript
echo "const msg: string = \"Xin chào TypeScript\"" > hello.ts

# Biên dịch TS → JS
tsc hello.ts
# → Tạo ra file hello.js

# Chạy file JS
node hello.js

# Hoặc dùng ts-node để chạy trực tiếp (không cần build)
npx ts-node hello.ts

• Giải thích vì sao TypeScript an toàn hơn JavaScript
• Khai báo biến với kiểu: string, number, boolean, array
• Định nghĩa interface cho object
• Viết function có kiểu tham số và return type
• Cài đặt và chạy TypeScript bằng tsc hoặc ts-node