🧠 TypeScript không làm code bạn chạy đúng hơn

TypeScript không làm code bạn chạy đúng hơn.
Nó chỉ giúp bạn sai ít hơn trước khi code chạy.

🚫 Mở đầu – Những hiểu lầm phổ biến

Rất nhiều dev đang vô tình đặt kỳ vọng sai vào TypeScript:

• TypeScript giúp code an toàn ở runtime

• TypeScript chạy cùng Node.js

• TypeScript giống Java / C# (có type thật tồn tại khi chạy)

Nghe có vẻ hợp lý… nhưng sai ở mức bản chất.

👉 Thực tế:

TypeScript hoàn toàn biến mất khi chương trình chạy.

⚙️ Bản chất thật của TypeScript

Nếu phải mô tả ngắn gọn, chính xác:

TypeScript = Type Checker + Transpiler

Pipeline thực thi:

.ts (source)
   ↓
Parser → AST
   ↓
Type Checker
   ↓
Transformer
   ↓
.js (output)
   ↓
V8 (Node.js / Browser)

📌 Điều quan trọng nhất cần hiểu:

• Type chỉ tồn tại ở compile-time

• Runtime chỉ chạy JavaScript thuần

🧩 1. Type Checker – “bộ não” của TypeScript

Đây là phần mang lại giá trị lớn nhất.

Nó hoạt động hoàn toàn trước khi code chạy.

Những gì nó làm:

• Phát hiện lỗi sớm (Static Analysis)
  Ví dụ: không thể cộng number với object

• Type Annotations
  Bạn định nghĩa shape dữ liệu:

  function greet(name: string): string {}

• Hỗ trợ IDE (IntelliSense)
  VS Code hiểu chính xác object có gì → gợi ý chuẩn

• Zero cost runtime
  👉 Khi chạy thật, toàn bộ phần này bị xóa sạch

🔄 2. Transpiler – “máy dịch” phía sau

TypeScript không chạy được trực tiếp.

Node.js và browser chỉ hiểu JavaScript.

→ Transpiler chịu trách nhiệm biến .ts → .js

Nó làm gì?

• Type Stripping (xóa type)

  (name: string)

  👉 biến mất hoàn toàn

• Down-leveling
  ES6 → ES5 (tương thích browser cũ)

• Chuẩn hóa output
  Đảm bảo code chạy được ở nhiều môi trường

🧪 LAB 1 – (Type Erasure) Type biến mất như thế nào?

Code

function greet(name: string): string {
  return "Hello " + name;
}

console.log(greet("Dev"));

Hình ảnh

Sau khi compile

function greet(name) {
  return "Hello " + name;
}

Insight

• string biến mất hoàn toàn

• Không có dấu vết type nào tồn tại

👉 Đây chính là:

Type Erasure

🧪 LAB 2 – Runtime Reality: TypeScript không bảo vệ bạn

Trường hợp 1 (truyền sai kiểu):

Code:

function greet(name: string): string {
  return "Hello " + name;
}

console.log(greet(123));

Hình ảnh:

• Compile-time

• TypeScript sẽ cảnh báo lỗi.

Nhưng nếu vẫn build và ta thu được:

Trường hợp 2 (truyền đúng kiểu):

Code:

function greet(name: string): string {
  return "Hello " + name;
}

console.log(greet("Admin"));

Hình ảnh

• Compile-time

• Type-safe.

Build và ta thu được:

Insight

• TypeScript chỉ cảnh báo

• Bạn hoàn toàn có thể bỏ qua

• Runtime vẫn chỉ chạy JavaScript

👉 Điều này dẫn tới một kết luận quan trọng:

TypeScript không bảo vệ bạn ở runtime

🔥 Kết luận

TypeScript không phải là “lá chắn chống bug”.

Nó là một công cụ giúp bạn:

• Hiểu rõ code hơn

• Phát hiện sai sớm hơn

• Refactor an toàn hơn

Nhưng:

Nó không can thiệp vào cách code của bạn chạy.

⏭️ Phần tiếp theo

Ở bài tiếp theo, chúng ta sẽ đi sâu vào thứ ảnh hưởng trực tiếp đến runtime nhưng nhiều dev cấu hình sai:

⚙️ tsconfig.json – file quyết định TypeScript sẽ build code của bạn như thế nào