Tóm tắt ngắn gọn
Bài viết này trình bày các kỹ thuật nâng cao trong TypeScript, giúp tối ưu hóa và bảo vệ mã nguồn. Các kỹ thuật này bao gồm:
- Kết hợp chuỗi ký tự với template literals để tạo kiểu chuỗi mới.
- Sử dụng 'Branded' types với intersection types để tạo kiểu dữ liệu độc nhất.
- Sử dụng từ khóa
infertrong conditional types để trích xuất thông tin kiểu. - Sử dụng template literal types để kết hợp kiểu chuỗi.
- Sử dụng đệ quy kiểu dữ liệu để định nghĩa các kiểu tự tham chiếu.
- Sử dụng variadic tuple types cho tuples linh hoạt.
- Chuyển đổi khóa với
astrong mapped types để tạo kiểu dữ liệu phái sinh. - Sử dụng const assertions để tạo literal types cụ thể.
- Sử dụng discriminated unions với
neverđể kiểm tra mẫu toàn diện.
[Kết Hợp Chuỗi Ký Tự với Template Literals]
Template literals trong TypeScript không chỉ tạo chuỗi động mà còn tạo kiểu chuỗi mới. Kết hợp với kiểu dữ liệu khác, bạn có thể tạo kiểu dữ liệu mới một cách linh hoạt. Ví dụ, type EventName<T extends string> = \${T}Updated`;` tạo kiểu sự kiện với hậu tố "Updated". Điều này hữu ích khi xây dựng hệ thống sự kiện hoặc duy trì quy tắc đặt tên nhất quán.
[Kiểu 'Branded' với Intersection Types]
Khi cần tạo kiểu dữ liệu độc nhất, không nhầm lẫn với kiểu khác dù cùng cấu trúc, hãy dùng 'Branded' types. Ví dụ: type CustomerId = string & { readonly brand: unique symbol }; và type ProductId = string & { readonly brand: unique symbol };. Dù cả hai đều là chuỗi, chúng không thể thay thế lẫn nhau, giúp bảo vệ mã nguồn khỏi lỗi.
[Sử Dụng Từ Khóa infer trong Conditional Types]
infer là từ khóa mạnh mẽ để trích xuất thông tin kiểu từ kiểu phức tạp. Ví dụ, type ExtractPromiseType<T> = T extends Promise<infer U> ? U : T; trích xuất kiểu trả về của Promise. Điều này hữu ích khi làm việc với hàm hoặc promise và tận dụng khả năng suy luận kiểu của TypeScript.
[Sử Dụng Template Literal Types để Kết Hợp Kiểu Chuỗi]
Template literal types cho phép tạo kiểu dữ liệu dựa trên sự kết hợp của nhiều literal types khác nhau. Ví dụ, type Theme = \${ThemeVariant}-${Color}`;` tạo kiểu theme từ các biến thể và màu sắc. Tính năng này hữu ích khi quản lý biến thể giao diện hoặc định nghĩa route API với pattern cụ thể.
[Đệ Quy Kiểu Dữ Liệu]
Đệ quy kiểu dữ liệu cho phép định nghĩa các kiểu tự tham chiếu chính nó, cần thiết khi làm việc với cấu trúc dữ liệu lồng nhau hoặc dạng cây. Ví dụ, type JSONValue = string | number | boolean | null | JSONValue[] | { [key: string]: JSONValue }; định nghĩa kiểu JSONValue có thể chứa chính nó.
[Variadic Tuple Types cho Tuples Linh Hoạt]
TypeScript 4.0 giới thiệu kiểu tuple biến đổi, cho phép xử lý tuple linh hoạt hơn. Ví dụ: type MergeTuples<T extends unknown[], U extends unknown[]> = [...T, ...U];. Kỹ thuật này hữu ích khi làm việc với hàm có số lượng tham số biến đổi hoặc khi cần kết hợp tuple động.
[Chuyển Đổi Khóa với as trong Mapped Types]
Khi làm việc với mapped types, as cho phép chuyển đổi khóa của đối tượng. Ví dụ, type MethodNames<T> = { [K in keyof T as \get${Capitalize<string & K>}`]: () => T[K] };` tạo kiểu dữ liệu phái sinh với tên thuộc tính đã được chỉnh sửa.
[const Assertions để Tạo Literal Types Cụ Thể]
Sử dụng const assertions giúp tạo literal types cụ thể từ giá trị tại thời điểm runtime. Ví dụ, const statusCodes = ["OK", "ERROR", "LOADING"] as const; và type StatusCode = typeof statusCodes[number];. Với const assertions, bạn có thể duy trì sự nhất quán giữa giá trị thực và kiểu dữ liệu.
[Sử Dụng Discriminated Unions với never để Kiểm Tra Mẫu Toàn Diện]
Discriminated unions là cách tuyệt vời để mô hình hóa trạng thái loại trừ lẫn nhau. Khi kết hợp với kiểu never, bạn có thể đạt được khả năng kiểm tra mẫu toàn diện. Nếu có trường hợp không được xử lý, TypeScript sẽ báo lỗi.
