Function trong TypeScript

Hàm (function) là nền tảng của mọi ứng dụng. TypeScript giúp bạn khai báo kiểu cho tham số, giá trị trả về và cấu trúc hàm để tránh lỗi, tăng độ rõ ràng và dễ bảo trì.

---

2. Nội dung chính

• Khai báo hàm có kiểu tham số và kiểu trả về
• Optional parameters, default parameters
• Arrow function với typing
• Function type (khai báo kiểu cho hàm)
• Overload cơ bản
• Nguyên tắc chọn kiểu cho hàm trong dự án thực tế

---

2. Ví dụ chi tiết

2.1. Kiểu tham số và kiểu trả về

function sum(a: number, b: number): number {
  return a + b;
}

// Sử dụng
const result = sum(1, 2); // result: number
console.log(result); // 3

2.2. Optional parameter

function greet(name: string, title?: string): string {
  return title ? `${title} ${name}` : `Hello ${name}`;
}

// Sử dụng
console.log(greet("Alice")); // "Hello Alice"
console.log(greet("Bob", "Mr.")); // "Mr. Bob"

2.3. Default parameter

function applyDiscount(price: number, rate: number = 0.1): number {
  return price * (1 - rate);
}

// Sử dụng
console.log(applyDiscount(100)); // 90 (giảm 10%)
console.log(applyDiscount(100, 0.2)); // 80 (giảm 20%)

2.4. Arrow function có typing

const multiply = (a: number, b: number): number => a * b;

// Hoặc viết đầy đủ
const divide: (a: number, b: number) => number = (a, b) => {
  return a / b;
};

2.5. Function type

// Khai báo kiểu cho hàm
let calc: (x: number, y: number) => number;

// Gán hàm cho biến
calc = sum;
console.log(calc(5, 3)); // 8

// Gán hàm khác
calc = multiply;
console.log(calc(5, 3)); // 15

2.6. Overload cơ bản

// Khai báo overload
function format(value: number): string;
function format(value: string): string;
function format(value: any): string {
  return `Formatted: ${value}`;
}

// Sử dụng
console.log(format(123)); // "Formatted: 123"
console.log(format("ABC")); // "Formatted: ABC"

---

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

3.1. Hàm phải được gán kiểu rõ ràng

• Kiểu tham số và kiểu trả về giúp hạn chế lỗi logic
• IDE hỗ trợ tốt hơn với autocomplete và type checking
• Dễ bảo trì và refactor code

💡 GHI NHỚ: Luôn khai báo kiểu cho tham số và giá trị trả về

3.2. Optional và default parameters giúp hàm linh hoạt

• Optional (?) cho phép tham số có thể có hoặc không
• Default cho phép đặt giá trị mặc định
• Phù hợp cho các hàm xử lý dữ liệu, tính toán, format

3.3. Function type cực hữu ích trong callback

• Đặc biệt quan trọng khi làm việc với React, Node.js
• Xử lý bất đồng bộ và event handling
• Truyền hàm vào hàm khác một cách type-safe

---

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

Bài 1: Viết hàm chia hai số

function divide(a: number, b: number): number {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

console.log(divide(10, 2)); // 5
// divide(10, 0); // Lỗi: Cannot divide by zero

Bài 2: Viết hàm hello với optional parameter

function hello(name: string, age?: number): string {
  if (age !== undefined) {
    return `Hello ${name}, you are ${age} years old!`;
  }
  return `Hello ${name}!`;
}

console.log(hello("Alice")); // "Hello Alice!"
console.log(hello("Bob", 25)); // "Hello Bob, you are 25 years old!"

Bài 3: Tạo function type MathFn

// Khai báo function type
type MathFn = (x: number, y: number) => number;

// Gán cho multiply
let mathOperation: MathFn;
mathOperation = multiply;

console.log(mathOperation(4, 5)); // 20

// Có thể gán hàm khác
mathOperation = (a, b) => a - b;
console.log(mathOperation(10, 3)); // 7

---

5. Best Practices

5.1. Luôn đặt kiểu cho tham số

// ❌ Không tốt - thiếu kiểu cho tham số
function greet(name) {
  return `Hello ${name}`;
}

// ✅ Tốt - có kiểu rõ ràng
function greet(name: string): string {
  return `Hello ${name}`;
}

5.2. Sử dụng optional parameter thay vì undefined

// ❌ Không tốt - kiểu trả về phức tạp
function getUser(id: number): User | undefined {
  // ...
}

// ✅ Tốt - optional parameter rõ ràng
function updateUser(id: number, name?: string, email?: string): User {
  // ...
}

5.3. Đặt tên function type có ý nghĩa

// ❌ Không rõ ràng
type Fn = (x: number, y: number) => number;

// ✅ Rõ ràng và có ý nghĩa
type MathOperation = (x: number, y: number) => number;
type EventHandler = (event: Event) => void;
type Validator = (value: string) => boolean;

---

6. Kết luận

Typing cho hàm là một trong những sức mạnh lớn nhất của TypeScript. Biết cách khai báo kiểu đúng giúp code dễ đọc, ít lỗi và mở rộng dự án hiệu quả hơn.

🔑 GHI NHỚ QUAN TRỌNG:

• Luôn khai báo kiểu cho tham số và giá trị trả về
• Dùng optional và default parameters để tăng tính linh hoạt
• Function type giúp truyền hàm một cách type-safe
• Overload giúp xử lý nhiều kiểu đầu vào khác nhau