TypeScript Là Gì? Hướng Dẫn Dễ Hiểu Cho Người Không Lập Trình

TypeScript là JavaScript có kiểu dữ liệu. Bạn thêm nhãn cho biết mỗi giá trị nên thuộc loại dữ liệu nào — một số, một đoạn chữ, một danh sách đơn hàng — và TypeScript kiểm tra mã của bạn để tìm chỗ không khớp trước khi mã chạy. Trang chủ TypeScript mô tả nó là “JavaScript với cú pháp cho kiểu dữ liệu”; các kiểu được gỡ bỏ khi mã được chuyển thành JavaScript thông thường, và JavaScript đó chạy được ở bất cứ nơi nào JavaScript chạy.

Vì sao điều này quan trọng khi bạn xây dựng bằng AI

Các mô hình AI viết mã rất nhanh, và mã nhanh thì hay có lỗi: một trường tên customerName ở tệp này nhưng customer_name ở tệp khác, một giá tiền được truyền dưới dạng chữ thay vì số, một hàm được gọi thiếu giá trị. Trong JavaScript thuần, nhiều lỗi như vậy chỉ xuất hiện khi ai đó bấm nhầm nút.

TypeScript bắt được nhiều lỗi trong số đó sớm hơn, ngay khi mã đang được viết:

• AI nhận phản hồi tức thì. Lỗi kiểu chỉ đúng dòng sai, nên agent có thể sửa trước khi bạn thấy.
• Thay đổi an toàn hơn. Đổi tên một trường, TypeScript sẽ đánh dấu mọi chỗ còn dùng tên cũ.
• Mã tự giải thích. Kiểu dữ liệu ghi lại những gì một hàm yêu cầu và trả về, giúp bạn, AI và bất kỳ lập trình viên nào làm việc sau này.
• Trình soạn thảo thông minh hơn. Tự động hoàn thành và “đi đến định nghĩa” hoạt động tốt hơn vì trình soạn thảo biết mỗi giá trị là gì.

Đây là một lý do lớn khiến nhiều trình xây dựng ứng dụng AI mặc định dùng TypeScript.

Một ví dụ đời thường

Hãy nghĩ đến một kho hàng với các ngăn được dán nhãn. Mỗi ngăn có một biển: “Chỉ pallet”, “Làm lạnh”, “Tối đa 500 kg”. Khi một lô hàng đến, một người kiểm tra ở cửa so sánh hàng hóa với biển. Cá đông lạnh định vào ngăn hàng khô sẽ bị chặn ngay ở cửa, chứ không phải được phát hiện một tuần sau khi đã có mùi.

TypeScript chính là người kiểm tra ở cửa. Kiểu dữ liệu là các biển. Việc kiểm tra diễn ra trước khi hàng hóa — tức mã của bạn — được đưa vào sử dụng. Và khi mọi thứ đã vào vị trí, các biển được gỡ xuống: JavaScript đang chạy không còn kiểu dữ liệu nào.

TypeScript hoạt động như thế nào

1. Bạn (hoặc AI) viết các tệp .ts hoặc .tsx — TypeScript, với các nhãn kiểu.
2. Bộ kiểm tra kiểu đọc mã và báo các chỗ không khớp dưới dạng lỗi trong trình soạn thảo hoặc khi build.
3. Bước build gỡ bỏ kiểu, tạo ra JavaScript thuần.
4. JavaScript chạy trong trình duyệt hoặc trên máy chủ (Node.js, Deno, Bun).

Hệ quả quan trọng: TypeScript kiểm tra mã bạn đã viết, chứ không kiểm tra dữ liệu đến trong lúc ứng dụng đang chạy. Nếu một API bên ngoài trả về thứ gì đó bất thường, TypeScript không thấy được trừ khi bạn thêm xác thực khi chạy.

Ví dụ minh họa: một form đặt lịch

Giả sử bạn đang xây một ứng dụng đặt lịch cho một tiệm làm tóc. Đây là một kiểu mô tả một lịch đặt:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // dấu ? nghĩa là tùy chọn
};

Và một hàm tính tiền đặt cọc:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Bây giờ hãy xem TypeScript bắt được những gì.

Tên trường bị gõ sai.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript báo rằng prise không phải là thuộc tính hợp lệ và thiếu price. Trong JavaScript thuần, đoạn này âm thầm tính ra tiền cọc là NaN (không phải số).

Sai loại giá trị.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript báo rằng một chuỗi không thể dùng ở chỗ cần số. Nếu không có nó, "40" * 0.2 vẫn chạy được, nhưng "40" + 5 cho ra "405" — loại lỗi xuất hiện trên hóa đơn.

Dịch vụ không tồn tại.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript báo rằng "perm" không nằm trong các dịch vụ được phép. Khi sau này tiệm thêm dịch vụ uốn tóc, bạn thêm nó vào kiểu, và TypeScript chỉ ra mọi chỗ cần cập nhật — bảng giá, form, màu lịch.

Những gì nó không bắt được. Nếu form đặt lịch gửi price: "40" từ trình duyệt lên máy chủ, TypeScript trên máy chủ không thấy điều đó khi chạy. Đó là lý do các ứng dụng được xây tốt cũng xác thực dữ liệu đến, thường bằng một thư viện xác thực kiểm tra cấu trúc và chuyển nó thành một Booking hợp lệ.

TypeScript so với JavaScript

Giải thích các thuật ngữ thường gặp

Những lầm lẫn và hiểu nhầm thường gặp

• “TypeScript làm cho mã không có lỗi.” Nó bắt các chỗ không khớp về cấu trúc dữ liệu, không bắt logic sai. Một khoản cọc 2% thay vì 20% vẫn vượt qua kiểm tra kiểu.
• “Kiểu dữ liệu bảo vệ tôi khỏi đầu vào xấu.” Kiểu biến mất khi chạy. Hãy xác thực dữ liệu từ người dùng, form và API.
• any ở khắp nơi. Khi AI bị mắc kẹt, nó có thể dùng any hoặc // @ts-ignore để làm im lỗi. Điều đó che giấu vấn đề thay vì sửa chúng.
• Bỏ qua lỗi kiểu vì bản xem trước vẫn chạy. Một số công cụ vẫn chạy mã có lỗi kiểu. Những lỗi đó vẫn là các lỗi đang chờ xảy ra.
• “TypeScript chậm hơn.” Kiểu được gỡ bỏ trước khi chạy; JavaScript chạy về cơ bản giống hệt.
• “Chỉ dành cho các đội lớn.” Người xây dựng đơn lẻ cũng được lợi, đặc biệt khi AI thực hiện phần lớn các chỉnh sửa.

Nên yêu cầu gì với trình xây dựng AI của bạn

• “Dùng TypeScript với chế độ strict bật.”
• “Định nghĩa các kiểu dùng chung cho các bản ghi chính của chúng ta — Customer, Booking, Invoice — và dùng ở cả frontend lẫn backend.”
• “Đừng dùng any hoặc @ts-ignore để vượt qua lỗi; hãy sửa nguyên nhân gốc và cho tôi biết đó là gì.”
• “Xác thực mọi dữ liệu đến trên máy chủ, không chỉ bằng kiểu.”
• “Chạy bộ kiểm tra kiểu và sửa mọi lỗi trước khi bạn báo là đã xong.”
• “Khi đổi tên một trường, cập nhật mọi chỗ mà TypeScript đánh dấu.”
• “Giải thích lỗi kiểu này bằng tiếng Anh thông thường.”

Để tìm hiểu thêm về cách kiểm tra những gì AI đã tạo ra, xem cách review mã do AI tạo và cách debug một ứng dụng xây bằng AI.

TypeScript trong Mythex

Khi bạn không yêu cầu gì cụ thể, Mythex khởi tạo các dự án mới trên Vite + React + TypeScript + Tailwind. Trình soạn mã có khả năng hiểu ngôn ngữ — gợi ý tự động hoàn thành, chẩn đoán và đi đến định nghĩa cho TypeScript và JavaScript, cùng một số ngôn ngữ khác — nên lỗi kiểu hiển thị ngay trong mã, chứ không chỉ trong bản xem trước. Trình soạn mã chỉ đọc trên gói Free và chỉnh sửa đầy đủ trên Pro. Bạn vẫn có thể yêu cầu một bộ công nghệ khác trong prompt đầu tiên; trang tài liệu về cách chọn công nghệ giải thích cách làm, còn tài liệu trình soạn mã mô tả những gì trình soạn mã hiển thị.

Câu hỏi thường gặp