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.
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:
TypeScriptinterface User {
name: string;
email: string;
Bạn thấy thế nào?
Đăng nhập để phản hồi.
Pick<T, K>Chọn các thuộc tính cụ thể:
TypeScripttype UserName = Pick<User, 'name' | 'email'>;
// { name: string; email: string; }Omit<T, K>Loại bỏ các thuộc tính cụ thể:
TypeScripttype UserWithoutAge = Omit<User, 'age'>;
// { name: string; email: string; }Type guards giúp TypeScript thu hẹp kiểu:
TypeScriptfunction 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());
}
}Sử dụng discriminated unions để có type safety tốt hơn:
TypeScripttype 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);
}
}Sử dụng as const để tạo literal types:
TypeScriptconst colors = ['red', 'green', 'blue'] as const;
type Color = typeof colors[number]; // 'red' | 'green' | 'blue'Tạo các kiểu chuỗi phức tạp:
TypeScripttype EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'tsconfig.jsonany: Sử dụng unknown khi kiểu thực sự không xác địnhChúc bạn code vui vẻ!
Lập trình
Khám phá các pattern và kỹ thuật TypeScript nâng cao để viết code mạnh mẽ và dễ bảo trì hơn