← Tất cả khoá học

TypeScript Thực Chiến

Kiểu tĩnh cho JavaScript, từ cơ bản đến lập trình tầng kiểu

Biên soạn bởi Nguyễn Anh Tuấn

Thêm kiểu tĩnh cho JavaScript bằng TypeScript: kiểu cơ bản & suy luận (inference), interface và structural typing, generics, rồi lập trình ở tầng kiểu (conditional, mapped & template literal types, utility types) - khép lại bằng tsconfig strict, khai báo .d.ts và di chuyển một dự án JS sang TS.

12 bài ~274 phút Đã xuất bản

Học xong mèo con làm được gì?

  • Thêm kiểu tĩnh cho JavaScript để bắt lỗi ngay khi gõ, trước cả khi chạy chương trình.
  • Hiểu sâu hệ thống kiểu: suy luận, structural typing, narrowing, generics - không chỉ "gắn kiểu cho có".
  • Lập trình ở tầng kiểu (type-level): conditional, mapped và template literal types như các thư viện chuyên nghiệp.
  • Cấu hình tsconfig strict, viết khai báo .d.ts và di chuyển một dự án JavaScript sang TypeScript an toàn.

Lộ trình học

  1. 1 Vì sao TypeScript? TypeScript là một lớp kiểu (type) phủ lên JavaScript: bắt lỗi trước khi chạy, gợi ý code, refactor an toàn. Bản chất under-the-hood: trình biên dịch tsc XOÁ sạch kiểu khi dịch ra JS (type erasure) nên kiểu không tồn tại lúc chạy - kèm khung so sánh TS gõ vào với JS xoá kiểu đi ra.
  2. 2 Kiểu cơ bản & suy luận Kiểu nguyên thuỷ, mảng, tuple, object và literal type; phân biệt any vs unknown vs never (vì sao tránh any, dùng unknown an toàn). Suy luận kiểu (type inference) để TS tự đoán thay vì chú thích mọi nơi, và as const để khoá literal.
  3. 3 Interface & structural typing Mô tả hình dạng dữ liệu bằng interface và type alias (optional, readonly, index signature); vì sao TS tương thích theo HÌNH DẠNG chứ không theo tên (structural / duck typing, khác nominal của Java/C#); excess property check gây bất ngờ. Bài under the hood của hệ thống kiểu.
  4. 4 Class trong TypeScript TypeScript thêm gì cho class của JavaScript: access modifier (public/private/protected), thuộc tính readonly, parameter property gọn gàng, abstract class và implements một interface. Phân biệt private của TS (chỉ lúc biên dịch) với #private thật của JS.
  5. 5 Union & narrowing Union type (A | B) và thu hẹp kiểu (narrowing) bằng typeof / instanceof / in / kiểm tra truthiness; discriminated (tagged) union để mô hình hoá trạng thái; kiểm tra vét cạn (exhaustiveness) bằng never. Cách mô hình hoá dữ liệu an toàn và để compiler nhắc khi thiếu nhánh.
  6. 6 Generics Generics - hàm và kiểu tham số hoá để tái dùng mà vẫn an toàn kiểu; ràng buộc generic (extends), tham số kiểu mặc định và suy luận tham số kiểu khi gọi hàm. Vì sao generics giống "hàm cho kiểu" và là nền của mọi thư viện TS chuyên nghiệp.
  7. 7 Conditional types & infer Lập trình ở tầng kiểu: conditional type (T extends U ? X : Y) như câu lệnh if cho kiểu; từ khoá infer để rút một kiểu con ra; conditional phân phối (distributive) trên union. Bước TypeScript trở thành một ngôn ngữ ở tầng kiểu.
  8. 8 Mapped & template literal types Sinh kiểu từ kiểu: mapped type ({ [K in keyof T]: ... }), đổi tên khoá (key remapping) và thêm/bớt modifier readonly/optional; template literal type để ghép chuỗi ở tầng kiểu (vd dựng tên onClick từ click). Cách các kiểu thông minh của thư viện được dựng nên.
  9. 9 Utility types & tự xây helper Bộ utility type có sẵn (Partial, Required, Pick, Omit, Record, ReturnType, Awaited…) và quan trọng hơn: TỰ DỰNG LẠI chúng từ mapped + conditional type để thấy chúng chỉ là kiểu mình cũng viết được. Nhìn under the hood thư viện kiểu chuẩn.
  10. 10 tsconfig, strict & .d.ts Những cấu hình tsc đáng quan tâm: nhóm strict, target / module / moduleResolution; tệp khai báo kiểu (.d.ts) và DefinitelyTyped (@types) để gắn kiểu cho thư viện JS chưa có kiểu; import type. Phần đời thực của một dự án TypeScript.
  11. 11 Di chuyển JS sang TS Chuyển dần một dự án JavaScript sang TypeScript: bật allowJs / checkJs, chú thích kiểu bằng JSDoc, siết strict từng bước và xử lý any tạm thời; chiến lược refactor tránh viết lại từ đầu. Đưa TypeScript vào một dự án thật.
  12. 12 Dự án cuối khoá Ba dự án nhỏ ghép mọi kỹ năng: (1) một thư viện tiện ích generic an toàn kiểu; (2) một helper type tự dựng (vd typed event emitter hoặc tự viết lại một utility type); (3) di chuyển một module JavaScript sang TypeScript strict. Tổng hợp toàn khoá.

Sắp bắt tay vào dự án thật?

Tên miền, VPS, hosting để đưa sản phẩm lên mạng - chọn ở trang Ưu đãi. Mua qua link là góp thêm “cá” nuôi Mèo, bạn không tốn thêm.

Ưu đãi & công cụ →