Khám Phá Các Kỹ Thuật Nâng Cao Trong TypeScript

Chào các bạn! Hôm nay, mình rất vui được chia sẻ với các bạn những kỹ thuật nâng cao trong TypeScript mà có thể bạn chưa biết đến. Những mẹo này sẽ giúp bạn tối ưu hóa mã nguồn và tăng cường hiệu suất trong các dự án lập trình của mình. Bài viết này sẽ giải thích các khái niệm một cách cụ thể kèm theo ví dụ thực tế. Hãy cùng bắt đầu nhé!

1. Kết hợp Chuỗi Ký Tự với Template Literals

Template literals không chỉ dùng để tạo ra các chuỗi động mà còn có thể sử dụng để tạo ra các kiểu chuỗi mới. Thông qua việc kết hợp với các kiểu dữ liệu khác, bạn có thể linh hoạt xây dựng các kiểu dữ liệu mới.

// Tạo kiểu sự kiện cho đơn hàng

type EventName<T extends string> = `${T}Updated`;
type OrderEvent = EventName<"order">; // Kết quả: "orderUpdated"

Kỹ thuật này rất hữu ích trong việc xây dựng hệ thống sự kiện hoặc duy trì quy tắc đặt tên nhất quán trong codebase.

2. Sử Dụng 'Branded' Types với Intersection Types

Branded types cho phép bạn tạo ra các kiểu dữ liệu độc nhất và tránh nhầm lẫn giữa các kiểu. Đây là kỹ thuật tuyệt vời để bảo vệ mã nguồn của bạn khỏi các lỗi không mong muốn.

// Định nghĩa kiểu CustomerId và ProductId

type CustomerId = string & { readonly brand: unique symbol };
type ProductId = string & { readonly brand: unique symbol };

function createCustomerId(id: string): CustomerId {
    return id as CustomerId;
}

function createProductId(id: string): ProductId {
    return id as ProductId;
}

Bằng cách này, bạn có thể bảo vệ mã nguồn của mình khỏi việc trộn lẫn các kiểu dữ liệu khác nhau.

3. Tận Dụng Từ Khóa infer trong Conditional Types

Từ khóa infer giúp bạn trích xuất thông tin kiểu từ các kiểu phức tạp, đặc biệt khi bạn làm việc với hàm hoặc promise.

// Trích xuất kiểu từ promise

type ExtractPromiseType<T> = T extends Promise<infer U> ? U : T;

Kỹ thuật này rất hữu ích để tạo ra các kiểu dữ liệu có khả năng tái sử dụng cao trong ứng dụng.

4. Sử Dụng Template Literal Types Để Kết Hợp Kiểu Chuỗi

Template literal types cho phép bạn định nghĩa các kiểu dữ liệu dựa trên sự kết hợp của nhiều literal types khác nhau, rất phù hợp cho việc quản lý các biến thể giao diện người dùng hoặc các route API.

// Định nghĩa kiểu Theme

type ThemeVariant = "light" | "dark";
type Color = "red" | "green" | "blue";
type Theme = `${ThemeVariant}-${Color}`;

Bằng cách này, bạn có thể dễ dàng áp dụng các loại theme khác nhau cho dự án của mình.

5. Đệ Quy Kiểu Dữ Liệu

Đệ quy kiểu dữ liệu cho phép bạn định nghĩa các kiểu có thể tự tham chiếu, cần thiết cho các cấu trúc dữ liệu lồng nhau hoặc dạng cây.

// Định nghĩa kiểu JSONValue

type JSONValue = 
    | string 
    | number 
    | boolean 
    | null 
    | JSONValue[] 
    | { [key: string]: JSONValue };

Với kỹ thuật này, bạn sẽ duy trì tính chính xác và nhất quán khi làm việc với các cấu trúc JSON phức tạp.

6. Variadic Tuple Types cho Những Tuples Linh Hoạt

TypeScript 4.0 đã giới thiệu kiểu tuple biến đổi, cho phép bạn xử lý các tuple một cách linh hoạt, hữu ích cho các hàm có số lượng tham số thay đổi.

// Kết hợp các tuple

type MergeTuples<T extends unknown[], U extends unknown[]> = [...T, ...U];

Kỹ thuật này đảm bảo tính an toàn khi thao tác trên các tuple.

7. 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 một đối tượng theo ý muốn, này rất hữu ích trong việc tạo ra các kiểu dữ liệu phái sinh.

// Định nghĩa phương thức cho UserProfile

type MethodNames<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

Với kỹ thuật này, bạn sẽ tạo ra các phương thức nhanh chóng từ các thuộc tính.

8. const Assertions để Tạo Literal Types Cụ Thể

Sử dụng const assertions giúp bạn tạo ra các kiểu literal từ các giá trị tại thời điểm runtime, duy trì tính khớp giữa giá trị và kiểu dữ liệu.

// Khai báo statusCodes

const statusCodes = ["OK", "ERROR", "LOADING"] as const;

Điều này giúp giảm thiểu rủi ro về lỗi không mong muốn khi sử dụng các giá trị này.

9. Sử Dụng Discriminated Unions với never Để Kiểm Tra Mẫu Toàn Diện

Discriminated unions kết hợp với kiểu never đảm bảo rằng mọi trường hợp đều được xử lý trong mã của bạn, giúp bạn tránh được các lỗi không mong muốn.

// Tính diện tích của các hình khác nhau

type Shape = 
    | { kind: "circle"; radius: number }
    | { kind: "square"; sideLength: number };

Kỹ thuật này giúp bạn mô hình hóa các trạng thái loại trừ lẫn nhau một cách hiệu quả.

Kết Luận

Trên đây là những kỹ thuật nâng cao trong TypeScript mà bạn có thể áp dụng để tối ưu hóa mã nguồn và tăng cường hiệu suất ứng dụng. Mong rằng những chia sẻ này sẽ hữu ích và hỗ trợ bạn trong công việc lập trình hàng ngày. Hãy theo dõi mình để có thêm nhiều bài viết chất lượng khác nhé!

source: viblo