Lợi DevLộ trình học
Nên học TypeScript theo thứ tự nào, và học xong mỗi phần bạn sẽ làm được gì.
Vì sao phần TypeScript lại đứng trước phần React?
Docs này tập trung chính vào React và các thư viện hỗ trợ trong hệ sinh thái của nó (routing, quản lý state, gọi API, validate form...). Điểm chung của gần như toàn bộ các thư viện phổ biến hiện nay (TanStack Query, TanStack Router, Tanstack Form, Zustand, Zod...) là chúng được viết bằng TypeScript ngay từ đầu, và tài liệu/type gợi ý của chúng chỉ thực sự "sáng" lên khi bạn dùng chung với TS
Nói cách khác: học TypeScript ở đây không phải một lựa chọn thêm cho vui, mà là điều kiện gần như bắt buộc để đọc hiểu docs, type definitions, và tận dụng được autocomplete khi làm việc với các thư viện đó. Đây là lý do phần TypeScript được đặt lên trước, thay vì học React trước rồi quay lại TS sau.
Trước khi bắt đầu
Docs này được sắp xếp để đọc theo thứ tự từ trên xuống mỗi phần sau thường dùng lại khái niệm ở phần trước. Nếu bạn mới hoàn toàn, đừng nhảy cóc, kể cả khi một số trang trông "dễ" và muốn bỏ qua.
Về thời gian ước lượng
Con số dưới đây dành cho người học nghiêm túc, có thực hành code song song, không phải chỉ đọc lướt. Nếu bạn đã biết lập trình (JavaScript, hoặc ngôn ngữ có kiểu tĩnh khác), thời gian có thể ngắn hơn đáng kể. Ngược lại, nếu đây là lần đầu tiếp xúc với khái niệm kiểu dữ liệu, đừng ngại dành thời gian gấp đôi, gấp ba đây là khoản đầu tư một lần, dùng lại xuyên suốt phần React phía sau.
1. Bắt đầu nền tảng cú pháp (~30 phút)
Học cách khai báo kiểu cơ bản (: type) và hiểu khi nào TypeScript tự suy luận kiểu giúp bạn.
Xong phần này, bạn sẽ: đọc hiểu được một đoạn code TS đơn giản, biết vì sao đôi khi không cần ghi kiểu mà TS vẫn hiểu.
2. Kiểu cơ bản (~2-3 ngày)
Các kiểu dữ liệu nền tảng: chuỗi, số, boolean, mảng, tuple, enum, any vs unknown, xử lý null/undefined, kiểu cho hàm và object.
Xong phần này, bạn sẽ: tự khai báo kiểu cho hầu hết biến, tham số hàm trong một dự án nhỏ.
3. Kiểu phức hợp (~3-4 ngày)
Cách đặt tên và tái sử dụng kiểu (type), interface, kết hợp nhiều kiểu (union), và thu hẹp kiểu khi kiểm tra điều kiện (narrowing).
Xong phần này, bạn sẽ: viết được kiểu dữ liệu mô tả đúng logic thực tế, ví dụ trạng thái loading/success/error của một API call.
4. Modules (~3 giờ)
Cách chia sẻ type/interface giữa nhiều file trong cùng dự án.
Xong phần này, bạn sẽ: tổ chức được type dùng chung ra file riêng, import lại ở nhiều nơi mà không lặp code.
5. Nâng cao (~4-5 ngày) quan trọng nhất trước khi học React
Generics (viết code dùng được cho nhiều kiểu), Utility Types (Partial, Pick, Omit...), type assertion, và class (tùy chọn).
Đây thường là phần tốn thời gian nhất và cũng dễ nản nhất, vì Generics khá trừu tượng với người mới. Đừng vội đây chính là kiến thức bạn sẽ dùng liên tục khi đọc type definitions của các thư viện React ở phần sau.
Xong phần này, bạn sẽ: hiểu được cú pháp useState<T>(), useRef<T>() trong React, đọc hiểu được type gợi ý phức tạp từ các thư viện như TanStack Query hay React Hook Form, và biết cách tái sử dụng type Props giữa các component thay vì viết lại từ đầu.
6. Cấu hình (~15 phút)
Hiểu sơ về tsconfig.json đặc biệt là strict, vì hầu hết dự án thật đều bật chế độ này.
Xong phần này, bạn sẽ: không còn bối rối khi mở một project có sẵn và thấy TS "khó tính" hơn ví dụ trong docs.
7. Kết nối với React (~2 ngày)
Áp dụng toàn bộ kiến thức trên vào việc viết Props, State, event handler cho component React.
Xong phần này, bạn sẵn sàng chuyển qua phần docs về React và các thư viện hỗ trợ.
Tổng thời gian dao động khoảng ~3-4 tuần nếu học đều đặn mỗi ngày một ít nhưng đừng quá áp lực vào con số này, vì tốc độ mỗi người rất khác nhau.
Không nhớ hết cũng không sao
TypeScript có rất nhiều chi tiết nhỏ mà ngay cả người dùng lâu năm cũng phải tra lại kể cả khi làm việc với các thư viện React quen thuộc. Mục tiêu của lộ trình này không phải để bạn học thuộc lòng toàn bộ cú pháp, mà là giúp bạn nhận diện được vấn đề, đọc hiểu được type gợi ý từ thư viện, và biết tìm ở đâu khi cần đó là kỹ năng thực sự cần khi làm việc với hệ sinh thái React dùng TypeScript.
Đã biết TypeScript rồi?
Nếu bạn đã quen thuộc với các khái niệm trong lộ trình dưới đây, có thể bỏ qua phần này và bắt đầu với React.