Explore all courses in this category.
Explore all courses in this category.
Nguyễn Đình Cường
0 comment
09 Nov, 2026
TypeScript đang trở thành yêu cầu phổ biến trong tin tuyển dụng frontend và Node.js. Khi phỏng vấn, người ta thường hỏi về lý do dùng TypeScript, sự khác nhau giữa các cách khai báo kiểu và cách xử lý kiểu an toàn. Hãy cùng ôn lại những câu hay gặp nhất.
TypeScript là tập mở rộng của JavaScript có thêm hệ thống kiểu tĩnh. Lợi ích chính là phát hiện lỗi ngay khi viết code thay vì lúc chạy, gợi ý code tốt hơn trong trình soạn thảo, hỗ trợ đổi tên và tái cấu trúc an toàn, và tài liệu hóa ý định của người viết. Đổi lại, bạn cần thêm bước biên dịch và chi phí học tập ban đầu.
interface User { id: number; name: string;}type Role = 'admin' | 'editor' | 'viewer';type Admin = User & { role: 'admin' };interface mô tả hình dạng đối tượng, có thể mở rộng bằng extends và gộp khai báo (declaration merging).type linh hoạt hơn: biểu diễn union, tuple, kiểu nguyên thủy và kiểu tính toán.any tắt kiểm tra kiểu, nên lạm dụng sẽ làm mất ý nghĩa của TypeScript. unknown là phiên bản an toàn hơn: bạn phải kiểm tra kiểu trước khi dùng. never biểu diễn giá trị không bao giờ xảy ra, ví dụ hàm luôn ném lỗi hoặc nhánh đã được loại trừ hoàn toàn.
function printLength(value: unknown) { if (typeof value === 'string') { console.log(value.length); // an toàn vì đã thu hẹp kiểu }}Union type cho phép giá trị thuộc một trong nhiều kiểu. Để làm việc an toàn, bạn thu hẹp kiểu bằng typeof, instanceof, kiểm tra thuộc tính hoặc discriminated union.
type Shape = | { kind: 'circle'; radius: number } | { kind: 'square'; size: number };function area(s: Shape): number { switch (s.kind) { case 'circle': return Math.PI * s.radius ** 2; case 'square': return s.size ** 2; }}Nếu sau này bạn thêm một hình mới mà quên xử lý trong switch, TypeScript sẽ báo lỗi, giúp tránh bỏ sót.
Generic cho phép viết hàm hoặc kiểu tái sử dụng với nhiều kiểu dữ liệu mà vẫn giữ an toàn kiểu.
function first<T>(items: T[]): T | undefined { return items[0];}const n = first([1, 2, 3]); // number | undefinedconst s = first(['a', 'b']); // string | undefinedPartial<T>: mọi thuộc tính thành tùy chọn.Required<T>: mọi thuộc tính bắt buộc.Pick<T, K> và Omit<T, K>: chọn hoặc loại một số thuộc tính.Record<K, V>: đối tượng với khóa K và giá trị V.ReturnType<F>: lấy kiểu trả về của hàm.Bạn nên biết file tsconfig.json và tùy chọn strict. Bật chế độ strict kích hoạt nhiều kiểm tra như strictNullChecks, giúp phát hiện lỗi truy cập giá trị có thể là null hoặc undefined. Dự án mới nên bật ngay từ đầu.
Kiểu của TypeScript chỉ tồn tại lúc biên dịch và bị xóa khi chạy. Vì vậy dữ liệu từ bên ngoài như phản hồi API vẫn cần kiểm tra lúc chạy, bằng thư viện xác thực hoặc kiểm tra thủ công, chứ không thể tin tuyệt đối vào khai báo kiểu.
Một câu hỏi thú vị là hãy mô hình hóa trạng thái của một yêu cầu mạng. Bạn có thể dùng discriminated union để buộc code xử lý đủ mọi trường hợp:
type RequestState<T> = | { status: 'loading' } | { status: 'error'; message: string } | { status: 'success'; data: T };function render(state: RequestState<string[]>) { if (state.status === 'loading') return 'Đang tải'; if (state.status === 'error') return state.message; return state.data.join(', ');}Cách này tốt hơn việc dùng ba biến rời rạc như isLoading, error, data vì không thể xảy ra trạng thái vô lý, chẳng hạn vừa đang tải vừa có lỗi. Khi trình bày, hãy nói rõ lợi ích: kiểu dữ liệu giúp ngăn các trạng thái không hợp lệ ngay từ lúc thiết kế. Đây là kiểu câu trả lời cho thấy bạn hiểu TypeScript là công cụ thiết kế, chứ không chỉ là cú pháp thêm kiểu vào biến.
Bạn không cần thuộc mọi tiện ích nâng cao. Hãy nắm chắc kiểu cơ bản, union, generic, unknown so với any và biết giải thích vì sao dùng TypeScript. Thêm vào đó, chuyển thử một dự án JavaScript nhỏ của bạn sang TypeScript sẽ cho bạn nhiều chuyện đáng kể.
Để học TypeScript bài bản cùng các dự án thực hành, bạn có thể xem danh sách khóa học tại codebem.com.
Nguyễn Đình Cường
0 comment