Vì sao TypeScript?

JavaScript rất dễ tính. Bạn gõ nhầm tên một thuộc tính, nó không hề báo lỗi - chỉ lặng lẽ trả về undefined, rồi cái sai trôi tiếp tới tận lúc chạy. Xem thử:

const meo = { ten: "Bo", tuoi: 2 };
console.log("Sang nam meo " + (meo.tuoii + 1));

Sang nam meo NaN

Thấy lỗi chưa? tuoii bị gõ thừa một chữ i. JavaScript đọc meo.tuoii ra undefined, rồi undefined + 1 ra NaN. Không một lời cảnh báo. Nếu đoạn này nằm sâu trong ứng dụng, lỗi có thể trôi tới tận tay người dùng mới lộ.

• ▸JavaScript chỉ phát hiện loại lỗi này lúc CHẠY, thường là quá muộn.
• ▸Gõ nhầm thuộc tính cho ra undefined một cách lặng lẽ, rồi lan thành NaN.
• ▸Lỗi bắt càng muộn càng đắt: muộn nhất là khi người dùng gặp.

TypeScript là JavaScript cộng thêm một lớp kiểu (type). Bạn nói cho công cụ biết "biến này là số, hàm này nhận chuỗi", và trình biên dịch tsc kiểm tra những lời hứa đó trước khi chạy. Vẫn đoạn code y hệt, nhưng lưu thành .ts:

const meo = { ten: "Bo", tuoi: 2 };
console.log("Sang nam meo " + (meo.tuoii + 1));

error TS2551: Property 'tuoii' does not exist on type
'{ ten: string; tuoi: number; }'. Did you mean 'tuoi'?

tsc không chỉ chặn lỗi, nó còn đoán đúng ý bạn: "Did you mean 'tuoi'?". Cùng một lớp kiểu đó cho bạn hai món quà nữa khi viết code: gợi ý (autocomplete) chính xác vì editor biết hình dạng dữ liệu, và đổi tên (refactor) an toàn vì TS tìm ra mọi chỗ dùng tới.

• ▸tsc kiểm kiểu lúc biên dịch, bắt lỗi ngay khi gõ thay vì lúc chạy.
• ▸Lớp kiểu là tài liệu sống: editor gợi ý đúng và refactor không sợ sót.
• ▸Cùng một code, đổi đuôi .ts là có thêm một tấm lưới an toàn.

Đây là điều nhiều người dùng TypeScript cả năm vẫn chưa nắm rõ. tsc không "chạy" kiểu của bạn - nó xoá sạch kiểu rồi sinh ra JavaScript thuần. Lúc chạy, không còn TypeScript ở đâu cả, chỉ có JS. Người ta gọi đó là type erasure (xoá kiểu). Bấm thử từng ví dụ:

function chao(ten: string): string {
    return "Xin chao, " + ten;
}
const loi: string = chao("Bo");

function chao(ten) {
    return "Xin chao, " + ten;
}
const loi = chao("Bo");

Hệ quả rất quan trọng: kiểu không làm chậm lúc chạy (vì đã biến mất), và bạn không thể hỏi một type lúc chạy ("biến này có đúng kiểu User không?") - vì tới lúc đó type đã không còn. Nhưng để ý ví dụ enum: nó là ngoại lệ, tsc sinh hẳn một object thật nên enum vẫn sống tới runtime.

• ▸tsc biên dịch TS thành JS thuần và xoá toàn bộ thông tin kiểu (type erasure).
• ▸Vì kiểu biến mất, không có chi phí lúc chạy và không kiểm được type ở runtime.
• ▸Ngoại lệ: enum/class sinh ra code thật, nên chúng còn sống sau khi biên dịch.

Đủ lý thuyết, ta cài thật. TypeScript là một gói npm; tsc là trình biên dịch. Viết một file .ts rồi dịch ra .js:

const ten: string = "the gioi";
console.log("Xin chao, " + ten);

npm install -D typescript
npx tsc hello.ts     # sinh ra hello.js (kiểu đã bị xoá)
node hello.js

Xin chao, the gioi

Muốn cấu hình một lần cho cả dự án, dùng file tsconfig.json (chạy npx tsc --init để sinh bản đầy đủ). Bản tối thiểu:

{
  "compilerOptions": {
    "target": "es2020",
    "module": "nodenext",
    "strict": true,
    "outDir": "dist"
  }
}

Bạn vừa nắm điều quan trọng nhất: TypeScript là một lớp kiểm tra lúc biên dịch rồi tan đi, để lại JavaScript chạy. Từ đây, cả khoá xoay quanh việc dùng lớp đó cho thật giỏi: bắt đầu từ kiểu cơ bản và suy luận kiểu, tới interface và structural typing, generics, rồi lập trình hẳn ở tầng kiểu - và khép lại bằng cách di chuyển một dự án JS sang TS.