10 thói quen xấu cần từ bỏ khi lập trình Typescript trong năm 2024

TypeScript đã trở thành ngôn ngữ được nhiều nhà phát triển lựa chọn, cung cấp lợi ích của kiểu tĩnh đồng thời duy trì tính linh hoạt của JavaScript. Tuy nhiên, khi TypeScript tiếp tục phát triển, một số cách thực hành từng được coi là tốt nhất giờ đây có thể đã lỗi thời hoặc không còn tối ưu. Trong bài viết này, chúng ta sẽ đề cập đến 10 thói quen xấu của TypeScript bạn nên từ bỏ trong năm 2024 để viết mã sạch hơn, hiệu quả hơn và dễ bảo trì hơn.

1. Không sử dụng chế độ strict

Nhiều lập trình viên thường tắt chế độ strict của TypeScript để tránh phải xử lý các kiểm tra của kiểu nghiêm ngặt hơn. Tuy nhiên điều này thực ra không hề tốt chút nào.

Khi chế độ strict tắt, TypeScript trở nên dễ dãi hơn, làm giảm hiệu quả của tính an toàn của kiểu. Điều này có thể dẫn đến các lỗi không mong muốn và khiến việc tái cấu trúc trở nên khó khăn hơn trong tương lai.

Để khắc phục điều này, bạn cần bật chế độ strict trong tệp tsconfig.json của bạn. Nó sẽ thực thi việc kiểm tra kiểu tốt hơn và đảm bảo rằng mã của bạn sẽ mạnh mẽ hơn về lâu dài.

{
  "compilerOptions": {
    "strict": true
  }
}

2. Dựa vào any quá nhiều

Kiểu any thường được sử dụng như một cách khắc phục nhanh chóng khi các nhà phát triển không muốn suy nghĩ về kiểu chính xác.

Sử dụng any bỏ qua toàn bộ mục đích của TypeScript, về cơ bản biến nó thành JavaScript một lần nữa. Điều này có thể dẫn đến lỗi thời gian chạy, vì TypeScript không còn có thể giúp phát hiện lỗi trong quá trình phát triển.

Để khắc phục điều này, bạn nên sử dụng các kiểu cụ thể hơn như unknown, hoặc tốt hơn nữa, hãy xác định kiểu thích hợp cho dữ liệu của bạn. Kiểu unknown an toàn hơn any vì nó buộc kiểm tra kiểu trước khi sử dụng giá trị.

let data: unknown;

if (typeof data === "string") {
  console.log(data.toUpperCase());
}

3. Sử dụng kiểu khẳng định một cách tùy tiện

Kiểu khẳng định (as) có thể bị lạm dụng, đặc biệt là khi các lập trình viên không chắc chắn về kiểu và muốn tắt các lỗi TypeScript.

Kiểu khẳng định có thể dẫn đến mã không an toàn vì chúng yêu cầu TypeScript coi một giá trị là một kiểu cụ thể, ngay cả khi nó có thể không phải như vậy. Điều này có thể dẫn đến sự cố thời gian chạy nếu giá trị không như bạn mong đợi.

Để khắc phục điều này, bạn cần hạn chế sử dụng kiểu khẳng định. Thay vào đó, hãy sử dụng bộ bảo vệ cho kiểu, cho phép bạn kiểm tra và suy luận kiểu một cách an toàn trước khi sử dụng chúng.

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

if (isString(data)) {
  console.log(data.toUpperCase());
}

4. Bỏ qua kiểu Union và Intersection

Một số lập trình viên tránh sử dụng kiểu Union (|) và kiểu Intersection (&), ngay cả khi chúng sẽ làm cho mã biểu cảm và chính xác hơn.

Nếu không có kiểu Union và kiểu Intersection, mã của bạn có thể trở nên quá dài dòng và bạn có thể bỏ lỡ khả năng mô tả các cấu trúc dữ liệu phức tạp một cách ngắn gọn hơn của TypeScript.

Để khắc phục điều này, bạn nên tận dụng kiểu Union và kiểu Intersection để tạo ra các định nghĩa kiểu linh hoạt và có thể tái sử dụng hơn.

type Admin = { isAdmin: true; privileges: string[] };
type User = { isAdmin: false; email: string };

type Person = Admin | User;

function logUser(person: Person) {
  if (person.isAdmin) {
    console.log(person.privileges);
  } else {
    console.log(person.email);
  }
}

5. Sử dụng kiểu trả về không rõ ràng

Các hàm thường có kiểu trả về là any, object hoặc các kiểu không cụ thể khác, khiến người tiêu dùng hàm phải tự tìm hiểu xem nên mong đợi điều gì.

Kiểu trả về không cụ thể làm cho mã của bạn kém dự đoán hơn và khó gỡ lỗi hơn. Bạn mất đi lợi ích của việc kiểm tra kiểu tĩnh của TypeScript, khiến mã của bạn dễ xảy ra lỗi hơn.

Để khắc phục điều này, bạn luôn chỉ định kiểu trả về chính xác của một hàm. Nếu hàm trả về nhiều kiểu, hãy sử dụng kiểu hợp để mô tả chúng.

function fetchData(): Promise<{ id: number; name: string }> {
  return fetch("/data").then(response => response.json());
}

6. Bỏ qua null và undefined

Một số lập trình viên bỏ qua sự hiện diện của các giá trị null và undefined trong mã của họ, dẫn đến các lỗi không mong muốn.

JavaScript cho phép các biến là null hoặc undefined và TypeScript cung cấp các công cụ để xử lý rõ ràng các giá trị này. Việc bỏ qua chúng có thể dẫn đến lỗi thời gian chạy khi truy cập các thuộc tính hoặc gọi các phương thức trên null hoặc undefined.

Để giải quyết vấn đề này, bạn nên sử dụng chuỗi tùy chọn và toán tử kết hợp nullish để xử lý an toàn các giá trị null và undefined.

const name = user?.profile?.name ?? "Guest";

7. Lạm dụng Enums

Enums thường bị lạm dụng cho các giá trị hằng số đơn giản, khi các kiểu khác như const hoặc hợp chữ có thể đủ.

Enums có thể thêm độ phức tạp không cần thiết, đặc biệt là khi có các lựa chọn thay thế đơn giản hơn. Trong một số trường hợp, chúng thậm chí có thể gây ra các vấn đề liên quan đến khả năng thay đổi.

Để khắc phục điều này, bạn nên sử dụng kiểu chữ hoặc các đối tượng const cho các giá trị hằng số đơn giản.

type Role = "Admin" | "User" | "Guest";

let userRole: Role = "Admin";

8. Không sử dụng readonly

Việc không sử dụng từ khóa readonly dẫn đến các cấu trúc dữ liệu có thể thay đổi, điều này có thể gây ra lỗi và tác dụng phụ không mong muốn.

Khả năng thay đổi vì thế có thể dẫn đến việc sửa đổi ngẫu nhiên các đối tượng hoặc mảng, khiến việc theo dõi lỗi trở nên khó khăn hơn.

Để khắc phục điều này, bạn nên sử dụng readonly để thực thi tính bất biến khi thích hợp.

const data: readonly number[] = [1, 2, 3];

9. Bỏ qua bộ bảo vệ kiểu tùy chỉnh

Nhiều lập trình viên dựa vào các kiểm tra ngầm định hơn là sử dụng bộ bảo vệ kiểu tùy chỉnh để đảm bảo tính an toàn kiểu.

Nếu không có bộ bảo vệ kiểu rõ ràng, bạn có nguy cơ bỏ sót một số kiểu nhất định trong thời gian chạy, dẫn đến các lỗi tiềm ẩn.

Để giải quyết điều này, bạn cần triển khai bộ bảo vệ kiểu tùy chỉnh để kiểm tra kiểu rõ ràng và làm cho mã của bạn đáng tin cậy hơn.

function isUser(user: any): user is User {
  return typeof user.email === "string";
}

10. Không tận dụng kiểu unknown

Các lập trình viên thường mặc định sử dụng any cho các biến khi kiểu ban đầu không xác định. Trong khi đó, any tắt kiểm tra kiểu, điều này đi ngược lại mục đích của việc sử dụng TypeScript.

Để giải quyết điều này, bạn nên sử dụng kiểu unknown cho các biến khi bạn không chắc chắn về kiểu ban đầu và thu hẹp kiểu khi cần thiết.

let input: unknown;

if (typeof input === "string") {
  console.log(input.toUpperCase());
}

Kết luận

Từ bỏ những thói quen xấu của TypeScript này trong năm 2024 sẽ giúp bạn viết mã dễ bảo trì, hiệu quả và ít lỗi hơn. Bằng cách áp dụng kiểu gõ nghiêm ngặt hơn, tránh các lối tắt như any và tận dụng đầy đủ các tính năng nâng cao của TypeScript, bạn có thể cải thiện đáng kể chất lượng mã của mình và trở thành lập trình viên hiệu quả hơn.