← Quay lại danh sách bài viết

TypeScript: Mẹo và Thủ thuật cho Code Tốt Hơn

Xuất bản ngày
bởi Nguyễn Công Dũng
typescriptjavascripttutorial

TypeScript: Mẹo và Thủ thuật cho Code Tốt Hơn

TypeScript đã trở thành tiêu chuẩn thực tế để xây dựng các ứng dụng JavaScript quy mô lớn. Dưới đây là một số mẹo và thủ thuật nâng cao để giúp bạn viết code TypeScript tốt hơn.

Utility Types

TypeScript cung cấp các utility types mạnh mẽ có thể tiết kiệm thời gian:

Partial<T>

Làm cho tất cả các thuộc tính trở thành optional:

TypeScript
interface User {
  name: string;
  email: string;
  age: number;
}
 
type PartialUser = Partial<User>;
// { name?: string; email?: string; age?: number; }

Pick<T, K>

Chọn các thuộc tính cụ thể:

TypeScript
type UserName = Pick<User, 'name' | 'email'>;
// { name: string; email: string; }

Omit<T, K>

Loại bỏ các thuộc tính cụ thể:

TypeScript
type UserWithoutAge = Omit<User, 'age'>;
// { name: string; email: string; }

Type Guards

Type guards giúp TypeScript thu hẹp kiểu:

TypeScript
function isString(value: unknown): value is string {
  return typeof value === 'string';
}
 
function processValue(value: unknown) {
  if (isString(value)) {
    // TypeScript biết value là string ở đây
    console.log(value.toUpperCase());
  }
}

Discriminated Unions

Sử dụng discriminated unions để có type safety tốt hơn:

TypeScript
type Result<T> =
  | { success: true; data: T }
  | { success: false; error: string };
 
function handleResult<T>(result: Result<T>) {
  if (result.success) {
    // TypeScript biết result.data tồn tại
    console.log(result.data);
  } else {
    // TypeScript biết result.error tồn tại
    console.error(result.error);
  }
}

Const Assertions

Sử dụng as const để tạo literal types:

TypeScript
const colors = ['red', 'green', 'blue'] as const;
type Color = typeof colors[number]; // 'red' | 'green' | 'blue'

Template Literal Types

Tạo các kiểu chuỗi phức tạp:

TypeScript
type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

Best Practices

  1. Sử dụng strict mode: Bật tất cả các strict checks trong tsconfig.json
  2. Tránh any: Sử dụng unknown khi kiểu thực sự không xác định
  3. Tận dụng type inference: Để TypeScript suy luận kiểu khi có thể
  4. Sử dụng interfaces cho objects: Ưu tiên interfaces hơn type aliases cho object shapes
  5. Tài liệu hóa các kiểu phức tạp: Thêm JSDoc comments cho các định nghĩa kiểu phức tạp

Chúc bạn code vui vẻ!