Như một lẽ tất yếu của phát triển phần mềm, TypeScript không phải là "lá chắn hoàn hảo" – nó chỉ bắt lỗi tại compile-time, nhưng runtime vẫn có thể crash nếu bạn không hiểu rõ cách type system hoạt động.

Với việc đang viết chủ yếu trên stack React + TypeScript, bài viết nho nhỏ này là một "nỗ lực" để chia sẻ 5 nguyên nhân lỗi TypeScript cơ bản dễ mắc phải, kèm nguyên nhân gốc rễ và cách khắc phục thực tế.

Lỗi #1: Dùng any để "né" lỗi → Mất hết lợi ích TypeScript

1const user: any = JSON.parse(response);
2console.log(user.email.toUpperCase()); // Compile OK → Runtime crash

Nguyên nhân: any tắt hoàn toàn type checking → bạn mất cảnh báo dù truy cập property không tồn tại. Khắc phục:

1interface User {
2  email: string;
3}
4
5function isUser(obj: any): obj is User {
6  return typeof obj.email === 'string';
7}
8
9const user = JSON.parse(response);
10if (!isUser(user)) throw new Error('Invalid user');
11console.log(user.email.toUpperCase()); // An toàn
12//Mẹo: Dùng unknown + type guard thay vì any.

Lỗi #2: Quên await trong try-catch → Lỗi không được bắt

1async function fetchData() {
2  throw new Error("Network error");
3}
4
5async function main() {
6  try {
7    fetchData(); // Quên await!
8  } catch (error) {
9    console.log("Caught:", error); // Không chạy
10  }
11}

Nguyên nhân: fetchData() trả về Promise, try-catch chỉ bắt lỗi sau khi await. Khắc phục :

1try {
2  await fetchData(); // Phải await
3} catch (error) {
4  console.log("Caught:", error); // Bắt được
5}

Lỗi #3: Dùng ! (non-null assertion) quá đà → Cannot read property of null

1function getName(user: User | null) {
2  return user!.name.toUpperCase(); // Nếu user = null → crash
3}

Nguyên nhân: ! nói với TypeScript: "Tôi chắc chắn nó không null" → nhưng runtime không biết. Khắc phục:

1function getName(user: User | null): string {
2  if (!user) throw new Error('User not found');
3  return user.name.toUpperCase();
4}
5
6// Hoặc dùng optional chaining
7return user?.name?.toUpperCase() ?? 'Guest';

Lỗi #4: Cast mù quáng với as → Vẫn crash dù không lỗi compile

1const data = response as { parse(): string };
2data.parse(); // Nếu không có method → crash

Nguyên nhân: as chỉ ép kiểu tại compile-time,không kiểm tra runtime. Khắc phục:

1funtion hasParse(obj:unknown): obs is {parse() :string }{
2	return typeof (obj as any).parse === 'function';
3}
4if(hasParse(data)){
5	data.parse(); // An toàn
6}

Lỗi #5: Không handle null/undefined dù bật strictNullChecks

1const users: User[] = getUsers();
2const first = users[0];
3console.log(first.name); // Compile OK → Runtime: Cannot read property 'name' of undefined

Nguyên nhân: users[0] có thể là undefined nếu mảng rỗng. Khắc phục:

1const first = users[0];
2if (!first) throw new Error('No users found');
3console.log(first.name);
4
5// Hoặc dùng optional chaining
6console.log(users[0]?.name ?? 'No name');

Kết

TypeScript không thay thế được runtime validation – nó chỉ là công cụ cảnh báo sớm. 5 nguyên tắc vàng để tránh lỗi TypeScript:

Không dùng any → dùng unknown + type guard
Luôn await trong try-catch
Không lạm dụng ! → kiểm tra null/undefined
Không as mù quáng → validate trước khi dùng
Luôn xử lý mảng rỗng, API error, network fail

Hy vọng bài viết giúp anh em giảm 80% lỗi runtime dù dùng TypeScript. Nếu bạn từng gặp lỗi "lạ" nào

Thanks for reading. Cheers,

@hyulevo653