Kiểu Trả Về Của Hàm Không Trả Gì Trong TypeScript

📌 Giới Thiệu

Khi một hàm không trả về giá trị nào, kiểu trả về của nó trong TypeScript là gì? Nhiều lập trình viên cho rằng kiểu trả về là undefined, nhưng thực tế lại có phần phức tạp hơn. Trong bài viết này, chúng ta sẽ phân tích và làm rõ vấn đề này thông qua các ví dụ thực tế.

🚩 Trường Hợp 1: Hàm Thông Thường (Không Trả Về)

Khi bạn không trả về bất kỳ giá trị nào từ một hàm thông thường, TypeScript sẽ suy diễn kiểu trả về của nó là void.

function logMessage(message: string): void {
  console.log(message);
}

Ngay cả khi bạn không ghi chú kiểu trả về, TypeScript cũng sẽ tự động suy diễn:

function logMessage(message: string) {
  console.log(message);
}
// được suy diễn là: (message: string) => void

Tại thời điểm chạy, hàm này kỹ thuật sẽ trả về undefined, nhưng TypeScript sử dụng void để nói rằng “bỏ qua giá trị trả về.”

🚩 Trường Hợp 2: Hàm Asynchronous (Không Trả Về)

Đối với các hàm async, kiểu trả về sẽ là Promise<void>.

async function logMessage(message: string): Promise<void> {
  console.log(message);
}

Hoặc với hàm mũi tên:

const logMessage = async (message: string): Promise<void> => {
  console.log(message);
};

Ngay cả khi bạn không viết ghi chú kiểu trả về, TypeScript cũng suy diễn là Promise<void>.

🤔 Tại Sao Không Phải Là undefined?

Có thể bạn sẽ cảm thấy cám dỗ khi viết:

function logMessage(message: string): undefined {
  console.log(message);
}

Nhưng điều này sẽ gây ra lỗi:

Hàm thiếu câu lệnh trả về cuối cùng và kiểu trả về không bao gồm 'undefined'

Điều này là do undefined có nghĩa là hàm phải trả về undefined một cách rõ ràng.

Ví dụ về việc trả về undefined hợp lệ:

function doNothing(): undefined {
  return undefined; // ✅ hoạt động
}

Nhưng trong hầu hết các trường hợp, điều bạn muốn là void, không phải undefined.

🏗 Ví Dụ Thực Tế

Một tiện ích ghi log:

function logger(message: string): void {
  console.log(`[LOG]: ${message}`);
}

async function saveAndLog(data: string): Promise<void> {
  // mô phỏng quá trình lưu
  await new Promise(res => setTimeout(res, 1000));
  logger(`Đã lưu dữ liệu: ${data}`);
}

Ở đây:

• Hàm logger không trả về giá trị gì → void
• Hàm saveAndLog là async → Promise<void>

💡 Thông Tin Thêm

• void = “Tôi không quan tâm đến giá trị trả về.”
• undefined = “Hàm này phải trả về undefined một cách rõ ràng.”

👉 Luôn ưu tiên sử dụng void trừ khi bạn muốn ép buộc trả về undefined.

🛠 Thực Hành Tốt Nhất

• Luôn ghi chú kiểu trả về cho hàm của bạn để tăng tính rõ ràng.
• Sử dụng Promise<void> cho các hàm bất đồng bộ để đảm bảo rằng bạn không bỏ lỡ giá trị trả về.

⚠ Những Cạm Bẫy Thường Gặp

• Nhầm lẫn giữa void và undefined có thể dẫn đến lỗi khi biên dịch.
• Không sử dụng kiểu undefined trừ khi cần thiết, vì điều này yêu cầu hàm phải trả về giá trị này một cách rõ ràng.

⚡ Mẹo Tối Ưu Hiệu Suất

• Kiểm tra hiệu suất của các hàm không đồng bộ để đảm bảo rằng chúng không gây ra độ trễ không cần thiết.
• Sử dụng các công cụ phân tích mã nguồn để tối ưu hóa các hàm ghi log.

❓ Câu Hỏi Thường Gặp

1. Hàm không trả về giá trị có phải là void không?
   Có, nếu hàm không trả về giá trị, kiểu trả về sẽ là void.
2. Tại sao không nên sử dụng undefined?
   Bởi vì undefined yêu cầu hàm phải trả về giá trị này một cách rõ ràng, có thể gây ra nhầm lẫn.
3. Hàm async có trả về kiểu gì?
   Hàm async sẽ luôn trả về một Promise, thường là Promise<void> nếu không có giá trị trả về.

📚 Tài Nguyên Tham Khảo

• Tài liệu TypeScript chính thức
• Hướng dẫn về async/await trong JavaScript

👋 Kết Luận

Trong TypeScript, việc hiểu rõ về kiểu trả về của các hàm không trả về giá trị là rất quan trọng để phát triển mã nguồn chất lượng và dễ bảo trì. Hãy chắc chắn ghi chú kiểu trả về một cách rõ ràng và sử dụng void cho các hàm thông thường. Nếu bạn cần hỗ trợ thêm, hãy tham gia cộng đồng lập trình viên để chia sẻ và học hỏi nhiều hơn nữa!