TypeScript cho người mới: Bắt đầu lập trình có kiểu dữ liệu

TypeScript cho người mới: Bắt đầu lập trình có kiểu dữ liệu

TypeScript là ngôn ngữ lập trình mở rộng của JavaScript, được Microsoft phát triển và phát hành từ 2012. Theo báo cáo Stack Overflow Developer Survey, TypeScript liên tục nằm trong top 5 ngôn ngữ được yêu thích nhất. Nhiều công ty lớn như Airbnb, Microsoft, Slack đã chuyển đổi codebase sang TypeScript để giảm bug và tăng tốc độ phát triển. Bài viết này hướng dẫn TypeScript cơ bản cho người mới bắt đầu, từ cài đặt đến những khái niệm quan trọng nhất cần nắm vững.

TypeScript là gì và vì sao nên học?

TypeScript là siêu tập hợp (superset) của JavaScript — mọi code JavaScript hợp lệ đều chạy được trong TypeScript. Điểm khác biệt cốt lõi: TypeScript thêm hệ thống kiểu tĩnh (static typing), giúp phát hiện lỗi ngay lúc viết code thay vì lúc chạy.

• Phát hiện lỗi sớm: Lỗi kiểu dữ liệu bị bắt tại thời điểm biên dịch, giảm đáng kể bug khi chạy
• Autocomplete tốt hơn: Editor hiểu chính xác kiểu dữ liệu, gợi ý chính xác hơn
• Refactor an toàn: Đổi tên biến, thay đổi cấu trúc không lo sót chỗ
• Cộng đồng lớn: Angular, Vue 3, NestJS, và hàng loạt thư viện lớn đều được viết bằng TypeScript

Cài đặt TypeScript

Yêu cầu: Node.js đã cài đặt (kiểm tra bằng node -v). Cài đặt TypeScript toàn cục:

npm install -g typescript

Kiểm tra phiên bản:

tsc --version

Tạo file TypeScript đầu tiên hello.ts:

let message: string = "Xin chào TypeScript!";
console.log(message);

Biên dịch sang JavaScript:

tsc hello.ts

Lệnh trên tạo file hello.js — bạn có thể chạy bằng node hello.js.

Khai báo biến với kiểu dữ liệu

Khác với JavaScript, TypeScript cho phép khai báo kiểu rõ ràng:

let name: string = "Hưng";
let age: number = 30;
let isActive: boolean = true;
let scores: number[] = [85, 90, 92];
let person: { name: string; age: number } = { name: "Hưng", age: 30 };

Nếu gán sai kiểu, TypeScript báo lỗi ngay khi biên dịch:

let age: number = "ba mươi";  // Lỗi: Type 'string' is not assignable to type 'number'

Interface — đặc trưng quan trọng nhất

Interface định nghĩa cấu trúc của object, giúp code tự mô tả và an toàn hơn:

interface User {
  id: number;
  name: string;
  email?: string;  // dấu ? nghĩa là tùy chọn
}

function getUser(id: number): User {
  return { id: id, name: "Hưng" };
}

Lợi ích lớn nhất: khi bạn hoặc đồng nghiệp dùng hàm getUser, editor gợi ý chính xác các thuộc tính có sẵn, và lỗi thiếu thuộc tính bị bắt ngay lập tức.

Union types và Optional

Union type cho phép một biến nhận nhiều kiểu khác nhau:

let result: string | number = "thành công";
result = 200;  // hợp lệ

function format(value: string | number): string {
  if (typeof value === "string") return value.toUpperCase();
  return value.toFixed(2);
}

Kết hợp với typeof kiểm tra, code an toàn hơn hẳn so với JavaScript thuần.

Generics — viết code tái sử dụng

Generic giúp viết hàm linh hoạt mà vẫn giữ được kiểu dữ liệu:

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const first = firstElement([1, 2, 3]);       // number
const firstName = firstElement(["a", "b"]);  // string

TypeScript tự suy luận kiểu trả về dựa trên tham số truyền vào — không cần khai báo thủ công.

TypeScript với Node.js và các framework

TypeScript không chỉ dùng cho frontend:

• Backend: NestJS và Express đều hỗ trợ TypeScript đầy đủ
• Frontend: Angular mặc định dùng TypeScript; React và Vue cũng hỗ trợ tốt
• Tooling: ts-node chạy TypeScript trực tiếp, tsconfig.json cấu hình toàn bộ project

File cấu hình cơ bản tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

Tùy chọn strict: true bật toàn bộ kiểm tra nghiêm ngặt — luôn bật trong project thực tế.

So sánh nhanh JavaScript và TypeScript

Khi nào nên dùng TypeScript?

Không phải lúc nào cũng cần TypeScript:

• Nên dùng: Dự án lớn, nhiều người tham gia, codebase lâu dài, hệ thống backend phức tạp
• Có thể bỏ qua: Script nhỏ một lần, prototype nhanh, dự án học tập ngắn hạn

Với người mới: hãy học JavaScript trước thật vững, rồi chuyển sang TypeScript — quá trình chuyển đổi sẽ rất nhanh và mở ra nhiều cơ hội việc làm hơn. Tài liệu chính thức tại typescriptlang.org/docs là nơi tốt nhất để học sâu hơn.