Làm chủ TypeScript trong 5 phút

Nếu bạn đã thành thạo JavaScript thì xin chúc mừng, bạn sẽ không cần phải học lại tư duy lập trình từ đầu, vì TypeScript sinh ra là để làm cho cuộc sống của bạn dễ dàng hơn, an toàn hơn và chuyên nghiệp hơn.

TypeScript là gì?

Theo định nghĩa từ trang chủ TypeScript của Microsoft, TypeScript là một ngôn ngữ lập trình mã nguồn mở có kiểu dữ liệu mạnh mẽ (strongly typed). Nó được xây dựng hoàn toàn trên nền tảng JavaScript (gọi là syntactic superset – siêu tập cú pháp), giúp cung cấp cho bạn các công cụ kiểm soát mã nguồn tốt hơn ở mọi quy mô dự án.

Nói một cách ngắn gọn nhất:
TypeScript = JavaScript + Cú pháp kiểu dữ liệu (Types).

• Công thức đơn giản: TypeScript = JavaScript + Cú pháp kiểu dữ liệu (Types).
• Sự khác biệt cốt lõi: JavaScript là ngôn ngữ kiểu dữ liệu động (dynamically typed) và lỏng lẻo. Bạn có thể gán biến const age = "26", sau đó đem đi cộng trừ toán học. JS không ngăn bạn lúc gõ, nhưng khi chạy thực tế (Runtime), dự án sẽ sinh ra lỗi kỳ quặc (như 26 + 1 = 261 thay vì 27). TypeScript giải quyết triệt để điều này bằng cách gạch chân đỏ cảnh báo ngay trong lúc bạn gõ code.
• Cơ chế suy luận thông minh (Type Inference): Bạn không cần lo lắng việc phải khai báo kiểu dữ liệu cho từng dòng code khiến file bị dài dòng. TypeScript đủ thông minh để tự “nhìn” vào giá trị bạn gán (ví dụ: let name = "Tien") và tự hiểu đó là kiểu chữ (string).

const user = {
  firstName: "Dev",
  lastName: "Tien",
  role: "Admin",
}
 
// Khi console log sẽ báo lỗi không tồn tại thuộc tính "name" trên kiểu dữ liệu
console.log(user.name); 
// Error: Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.

Trình biên dịch TypeScript (TSC) hoạt động thế nào?

Trình duyệt hay môi trường Node.js, Deno, Bun không thể đọc hiểu trực tiếp file TypeScript (.ts).

Do đó, chúng ta cần Trình biên dịch TSC (TypeScript Compiler) để thực hiện quá trình Transpilation (chuyển đổi ngôn ngữ): TSC sẽ quét qua file code, xóa sạch toàn bộ các “nhãn” định nghĩa kiểu dữ liệu phức tạp và dịch ngược về mã JavaScript thuần (.js) sạch sẽ để chạy ở bất cứ đâu.

Tính năng & Cú pháp cốt lõi

Điểm nâng cấp lớn nhất của TypeScript là cung cấp cơ chế Kiểm soát kiểu dữ liệu tĩnh (Static Typing). Thay vì để biến tự do thay đổi kiểu vô tội vạ như JavaScript, TypeScript buộc bạn phải định nghĩa rõ ràng hoặc nó sẽ tự suy luận.

Cú pháp khai báo biến cơ bản

Cấu trúc chuẩn để khai báo một biến trong TypeScript là:

let tên_biến: kiểu_dữ_liệu = giá_trị;

Dưới đây là cách áp dụng chi tiết cho các kiểu dữ liệu phổ biến nhất bao gồm: boolean, number, string, Array (string[]), và any.

let isDone: boolean = true; // Kiểu logic (đúng/sai)
let age: number = 26;       // Kiểu số (hỗ trợ cả số nguyên và số thập phân)
let name: string = "TienDev"; // Kiểu chuỗi chữ

// Kiểu Mảng (Array): Có 2 cách viết tương đương nhau
let skills: string[] = ["JavaScript", "TypeScript"]; 
let licenses: Array<string> = ["MIT", "Apache"];

// Kiểu Any: Cho phép nhận mọi kiểu dữ liệu 
// Hạn chế dùng vì nó sẽ tắt tính năng kiểm tra lỗi của TypeScript, khiến code lỏng lẻo như JavaScript thuần và cực kỳ khó debug khi dự án lớn lên.
let randomValue: any = "Hello";
randomValue = 10; // Không bị báo lỗi

Ngoài các kiểu dữ liệu cơ bản trên, TypeScript còn hỗ trợ các kiểu dữ liệu nâng cao khác như Tuple (mảng cố định), Enum (tập hợp hằng số), Unknown (kiểu ẩn danh an toàn), và Never (không bao giờ xảy ra).

// Tuple: Mảng có kích thước cố định và các phần tử phải đúng thứ tự kiểu dữ liệu
let coordinate: [number, number] = [10.5, 20.3]; // Hợp lệ
// let wrongCoordinate: [number, number] = ["10", 20]; // LỖI ngay!

// Enum: Tập hợp các hằng số có đặt tên, giúp code tường minh hơn
enum Role {
    Admin,
    Editor,
    User
}
let currentRole: Role = Role.Admin;

// Unknown: Kiểu dữ liệu an toàn hơn 'any'. 
// Nó nhận mọi giá trị nhưng bắt bạn phải kiểm tra kiểu trước khi dùng
let userInput: unknown = "Hello";
// let userName: string = userInput; // LỖI: Không thể gán thẳng unknown cho string
if (typeof userInput === "string") {
    let userName: string = userInput; // Hợp lệ sau khi đã kiểm tra
}

// Never: Biểu thị một giá trị không bao giờ xảy ra (Ví dụ: Hàm luôn ném ra lỗi hoặc vòng lặp vô hạn)
function throwError(message: string): never {
    throw new Error(message);
}

Định nghĩa hàm (Function)

Trong JavaScript, bạn gọi hàm và truyền tham số “mù”, rất dễ sai sót. Với TypeScript, bạn phải quy định chặt chẽ kiểu dữ liệu của tham số đầu vào và kiểu giá trị trả về (return type) sau dấu hai chấm :.

// Hàm nhận vào một chuỗi và bắt buộc phải trả về một chuỗi
function greet(user: string): string {
    return `Xin chào, ${user}!`;
}

// Nếu hàm chỉ thực thi hành động mà không trả về giá trị (no return), hãy dùng kiểu 'void'
function logMessage(message: string): void {
    console.log(message);
}

Interface & Class (Định hình cấu trúc Object phức tạp)

Đây là tính năng “ăn tiền” nhất giúp bạn viết code theo tư duy Hướng đối tượng (OOP). interface đóng vai trò như một bản thiết kế hoặc một “hợp đồng” bắt buộc Object phải tuân theo.

interface User {
    readonly id: number; // 'readonly' nghĩa là giá trị này chỉ được đọc, không thể sửa sau khi tạo
    name: string;
    email?: string;      // Dấu '?' nghĩa là thuộc tính này là tùy chọn (optional) - có hoặc không đều được
}

// Hợp lệ: Không cần truyền email vì có dấu '?'
const admin: User = { id: 1, name: "Admin" };

// Hợp lệ: Truyền đầy đủ các thuộc tính
const editor: User = { id: 2, name: "Editor", email: "editor@example.com" };

// LỖI: TypeScript sẽ gạch chân đỏ ngay nếu bạn cố tình sửa id
admin.id = 5; // Error: Cannot assign to 'id' because it is a read-only property.

Ưu và nhược điểm

Mức độ phổ biến & Hệ sinh thái

TypeScript không còn là một “xu hướng” nhất thời mà đã trở thành tiêu chuẩn bắt buộc của ngành công nghiệp phần mềm hiện đại.

• Thống kê biết nói: TypeScript nằm trong Top 3 – 5 ngôn ngữ phổ biến và được yêu thích nhất trên Stack Overflow Developer Survey. Theo số lượng người đóng góp trên GitHub, tháng 8 năm 2025 đánh dấu lần đầu tiên TypeScript vươn lên vị trí số 1, trong khi Python chiếm vị trí số 2.
• Các Editor hỗ trợ “tận răng”:
  • Nhóm Quốc dân & Miễn phí: VS Code (Mặc định ngon nhất, nhẹ nhàng, kho extension khổng lồ).
  • Nhóm Editor & Trợ lý AI (Xu hướng): Cursor (Vua tích hợp AI), OpenAI Codex (Hệ sinh thái Coding Agent), Google Antigravity (IDE tự động hóa của Google) và Claude Code (Trợ lý dòng lệnh từ Anthropic).
  • Nhóm Dự án lớn (Enterprise): WebStorm (IDE trả phí siêu mạnh, phân tích sâu và refactor an toàn tuyệt đối).
  • Nhóm Siêu nhẹ / Hardcore: Neovim (Hệ gõ bàn phím) và Sublime Text (Mượt mà, máy yếu chạy tốt).
  • Nhóm Online (Mì ăn liền): TypeScript Playground (Trang chủ), CodeSandbox, StackBlitz hoặc CodePen (Test nhanh giao diện).

Các Framework lớn đang sử dụng TypeScript

Biết TypeScript sẽ giúp bạn làm chủ nhanh chóng các công nghệ hàng đầu hiện nay:

• Angular (Google): Được viết 100% bằng TypeScript. Bạn bắt buộc phải biết TS để làm việc với Framework này.
• NestJS (Backend): Khung làm việc Node.js mạnh mẽ nhất cho doanh nghiệp, tận dụng tối đa tư duy hướng đối tượng (OOP) của TS.
• React / Next.js & Vue 3: Toàn bộ các tài liệu hướng dẫn và lệnh khởi tạo dự án (Vite, Next.js CLI) hiện nay đều tự động tích hợp sẵn template TypeScript và khuyến khích lập trình viên sử dụng 100%.

Cài đặt TypeScript

Để ứng dụng vào dự án thực tế, bạn chỉ cần nắm đúng quy trình 3 bước sau:

Bước 1: Cài đặt toàn cục qua Node.js

Bạn cần cài đặt Node.js trước. Sau đó mở Terminal/PowerShell và chạy lệnh sau để cài đặt TypeScript:

npm install -g typescript

Bước 2: Khởi tạo file cấu hình (tsconfig.json)

Đây là file quan trọng nhất để điều khiển cách TypeScript biên dịch. Hãy tạo nó bằng lệnh:

tsc --init

Trong file config này, hãy chú ý mục "target": "ES6" (phiên bản JS đầu ra) và "outDir": "./dist" (thư mục chứa file .js sau khi dịch). Xem thêm tại đây.

{
  "compilerOptions": {
    "target": "ES6",                          // Phiên bản JS đầu ra
    "module": "commonjs",                     // Hệ thống module cho Node.js
    "rootDir": "./src",                       // Thư mục chứa file .ts nguồn
    "outDir": "./dist",                       // Thư mục chứa file .js sau khi dịch
    "strict": true,                           // Bật kiểm tra lỗi nghiêm ngặt
    "esModuleInterop": true,                  // Hỗ trợ import mượt mà
    "skipLibCheck": true                      // Bỏ qua kiểm tra lỗi trong node_modules
  },
  "include": ["src/**/*"]                     // Chỉ định TSC quét thư mục src
}

Bước 3: Biên dịch và Chạy

Viết code vào file index.ts, sau đó chạy lệnh sau để biên dịch ra file index.js:

tsc index.ts

🔥 Lời khuyên thực chiến: Nếu bạn dùng các Framework hiện đại (React, Next.js, NestJS…), đừng tự cấu hình thủ công. Hãy sử dụng lệnh khởi tạo dự án của riêng framework đó và chọn option TypeScript, mọi thứ sẽ được thiết lập tự động hoàn hảo để bạn vào việc ngay lập tức!

Chúc bạn có những trải nghiệm gõ code “không góc chết” cùng TypeScript!