Làm Chủ Các Utility Types của TypeScript: Hướng Dẫn Thực Tế cho Lập Trình Viên Toàn Cầu

TypeScript cung cấp một bộ công cụ mạnh mẽ gồm các utility types tích hợp sẵn có thể cải thiện đáng kể tính an toàn kiểu, khả năng đọc và bảo trì mã của bạn. Các utility types này về cơ bản là các phép biến đổi kiểu được định nghĩa trước mà bạn có thể áp dụng cho các kiểu hiện có, giúp bạn không phải viết mã lặp đi lặp lại và dễ gây lỗi. Hướng dẫn này sẽ khám phá các utility types khác nhau với các ví dụ thực tế phù hợp với các nhà phát triển trên toàn cầu.

Tại Sao Nên Sử Dụng Utility Types?

Utility types giải quyết các kịch bản thao tác kiểu phổ biến. Bằng cách tận dụng chúng, bạn có thể:

• Giảm mã soạn sẵn (boilerplate): Tránh viết các định nghĩa kiểu lặp đi lặp lại.
• Cải thiện an toàn kiểu: Đảm bảo rằng mã của bạn tuân thủ các ràng buộc về kiểu.
• Tăng khả năng đọc mã: Làm cho các định nghĩa kiểu của bạn ngắn gọn và dễ hiểu hơn.
• Tăng khả năng bảo trì: Đơn giản hóa các sửa đổi và giảm nguy cơ phát sinh lỗi.

Các Utility Types Cốt Lõi

Partial

Partial xây dựng một kiểu trong đó tất cả các thuộc tính của T được đặt thành tùy chọn (optional). Điều này đặc biệt hữu ích khi bạn muốn tạo một kiểu cho các cập nhật một phần hoặc các đối tượng cấu hình.

Ví dụ:

Hãy tưởng tượng bạn đang xây dựng một nền tảng thương mại điện tử với khách hàng từ nhiều khu vực khác nhau. Bạn có một kiểu Customer:

interface Customer {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
  address: {
    street: string;
    city: string;
    country: string;
    postalCode: string;
  };
  preferences?: {
    language: string;
    currency: string;
  }
}

Khi cập nhật thông tin của khách hàng, bạn có thể không muốn yêu cầu tất cả các trường. Partial cho phép bạn định nghĩa một kiểu trong đó tất cả các thuộc tính của Customer đều là tùy chọn:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... triển khai để cập nhật khách hàng với ID đã cho
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // Hợp lệ
updateCustomer("456", { address: { city: "London" } }); // Hợp lệ

Readonly

Readonly xây dựng một kiểu trong đó tất cả các thuộc tính của T được đặt thành readonly, ngăn chặn việc sửa đổi sau khi khởi tạo. Điều này rất có giá trị để đảm bảo tính bất biến (immutability).

Ví dụ:

Hãy xem xét một đối tượng cấu hình cho ứng dụng toàn cầu của bạn:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // Đã thêm phiên bản
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

Để ngăn chặn việc sửa đổi cấu hình một cách vô tình sau khi khởi tạo, bạn có thể sử dụng Readonly:

type ReadonlyAppConfig = Readonly<AppConfig>;

const readonlyConfig: ReadonlyAppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

// readonlyConfig.apiUrl = "https://newapi.example.com"; // Lỗi: Không thể gán cho 'apiUrl' vì đây là một thuộc tính chỉ đọc.

Pick

Pick xây dựng một kiểu bằng cách chọn một tập hợp các thuộc tính K từ T, trong đó K là một union của các kiểu chuỗi ký tự (string literal types) đại diện cho tên thuộc tính bạn muốn bao gồm.

Ví dụ:

Giả sử bạn có một interface Event với nhiều thuộc tính khác nhau:

interface Event {
  id: string;
  title: string;
  description: string;
  location: string;
  startTime: Date;
  endTime: Date;
  organizer: string;
  attendees: string[];
}

Nếu bạn chỉ cần title, location, và startTime cho một thành phần hiển thị cụ thể, bạn có thể sử dụng Pick:

type EventSummary = Pick<Event, "title" | "location" | "startTime">;

function displayEventSummary(event: EventSummary): void {
  console.log(`Event: ${event.title} at ${event.location} on ${event.startTime}`);
}

Omit

Omit xây dựng một kiểu bằng cách loại trừ tập hợp các thuộc tính K khỏi T, trong đó K là một union của các kiểu chuỗi ký tự đại diện cho tên thuộc tính bạn muốn loại trừ. Đây là kiểu đối lập với Pick.

Ví dụ:

Sử dụng cùng interface Event, nếu bạn muốn tạo một kiểu để tạo sự kiện mới, bạn có thể muốn loại trừ thuộc tính id, vốn thường được tạo bởi backend:

type NewEvent = Omit<Event, "id">;

function createEvent(event: NewEvent): void {
  // ... triển khai để tạo sự kiện mới
}

Record

Record xây dựng một kiểu đối tượng có các khóa thuộc tính là K và các giá trị thuộc tính là T. K có thể là một union của các kiểu chuỗi ký tự, kiểu số ký tự hoặc một symbol. Điều này hoàn hảo để tạo từ điển hoặc map.

Ví dụ:

Hãy tưởng tượng bạn cần lưu trữ các bản dịch cho giao diện người dùng của ứng dụng. Bạn có thể sử dụng Record để định nghĩa một kiểu cho các bản dịch của mình:

type Translations = Record<string, string>;

const enTranslations: Translations = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our platform!"
};

const frTranslations: Translations = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre plateforme !"
};

function translate(key: string, language: string): string {
  const translations = language === "en" ? enTranslations : frTranslations; // Đã đơn giản hóa
  return translations[key] || key; // Trả về khóa nếu không tìm thấy bản dịch
}

console.log(translate("hello", "en")); // Output: Hello
console.log(translate("hello", "fr")); // Output: Bonjour
console.log(translate("nonexistent", "en")); // Output: nonexistent

Exclude

Exclude xây dựng một kiểu bằng cách loại trừ khỏi T tất cả các thành viên union có thể gán cho U. Nó hữu ích để lọc ra các kiểu cụ thể từ một union.

Ví dụ:

Bạn có thể có một kiểu đại diện cho các loại sự kiện khác nhau:

type EventType = "concert" | "conference" | "workshop" | "webinar";

Nếu bạn muốn tạo một kiểu loại trừ các sự kiện "webinar", bạn có thể sử dụng Exclude:

type PhysicalEvent = Exclude<EventType, "webinar">;

// PhysicalEvent bây giờ là "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Attending a ${event}`);
}

// attendPhysicalEvent("webinar"); // Lỗi: Đối số kiểu '"webinar"' không thể gán cho tham số kiểu '"concert" | "conference" | "workshop"'.

attendPhysicalEvent("concert"); // Hợp lệ

Extract

Extract xây dựng một kiểu bằng cách trích xuất từ T tất cả các thành viên union có thể gán cho U. Đây là kiểu đối lập với Exclude.

Ví dụ:

Sử dụng cùng EventType, bạn có thể trích xuất kiểu sự kiện webinar:

type OnlineEvent = Extract<EventType, "webinar">;

// OnlineEvent bây giờ là "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Attending a ${event} online`);
}

attendOnlineEvent("webinar"); // Hợp lệ
// attendOnlineEvent("concert"); // Lỗi: Đối số kiểu '"concert"' không thể gán cho tham số kiểu '"webinar"'.

NonNullable

NonNullable xây dựng một kiểu bằng cách loại trừ null và undefined khỏi T.

Ví dụ:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString bây giờ là string

function processString(str: DefinitelyString): void {
  console.log(str.toUpperCase());
}

// processString(null); // Lỗi: Đối số kiểu 'null' không thể gán cho tham số kiểu 'string'.
// processString(undefined); // Lỗi: Đối số kiểu 'undefined' không thể gán cho tham số kiểu 'string'.
processString("hello"); // Hợp lệ

ReturnType

ReturnType xây dựng một kiểu bao gồm kiểu trả về của hàm T.

Ví dụ:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type Greeting = ReturnType<typeof greet>;

// Greeting bây giờ là string

const message: Greeting = greet("World");

console.log(message);

Parameters

Parameters xây dựng một kiểu tuple từ các kiểu của tham số của một hàm kiểu T.

Ví dụ:

function logEvent(eventName: string, eventData: object): void {
  console.log(`Event: ${eventName}`, eventData);
}

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams bây giờ là [eventName: string, eventData: object]

const params: LogEventParams = ["user_login", { userId: "123", timestamp: Date.now() }];

logEvent(...params);

ConstructorParameters

ConstructorParameters xây dựng một kiểu tuple hoặc mảng từ các kiểu của tham số của một hàm khởi tạo kiểu T. Nó suy ra các kiểu của các đối số cần được truyền vào hàm khởi tạo của một lớp.

Ví dụ:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams bây giờ là [message: string]

const paramsGreeter: GreeterParams = ["World"];
const greeterInstance = new Greeter(...paramsGreeter);

console.log(greeterInstance.greet()); // Outputs: Hello, World

Required

Required xây dựng một kiểu bao gồm tất cả các thuộc tính của T được đặt thành bắt buộc (required). Nó biến tất cả các thuộc tính tùy chọn thành bắt buộc.

Ví dụ:

interface UserProfile {
  name: string;
  age?: number;
  email?: string;
}

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile bây giờ là { name: string; age: number; email: string; }

const completeProfile: RequiredUserProfile = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // Lỗi: Thuộc tính 'age' bị thiếu trong kiểu '{ name: string; }' nhưng là bắt buộc trong kiểu 'Required'.

Các Utility Types Nâng Cao

Các Kiểu Chuỗi Mẫu (Template Literal Types)

Các kiểu chuỗi mẫu cho phép bạn xây dựng các kiểu chuỗi ký tự mới bằng cách nối các kiểu chuỗi ký tự hiện có, kiểu số ký tự, và nhiều hơn nữa. Điều này cho phép thao tác kiểu dựa trên chuỗi một cách mạnh mẽ.

Ví dụ:

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIEndpoint = `/api/users` | `/api/products`;

type RequestURL = `${HTTPMethod} ${APIEndpoint}`;

// RequestURL bây giờ là "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

function makeRequest(url: RequestURL): void {
  console.log(`Making request to ${url}`);
}

makeRequest("GET /api/users"); // Hợp lệ
// makeRequest("INVALID /api/users"); // Lỗi

Các Kiểu Điều Kiện (Conditional Types)

Các kiểu điều kiện cho phép bạn định nghĩa các kiểu phụ thuộc vào một điều kiện được biểu thị dưới dạng một mối quan hệ kiểu. Chúng sử dụng từ khóa infer để trích xuất thông tin về kiểu.

Ví dụ:

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

// Nếu T là một Promise, thì kiểu là U; ngược lại, kiểu là T.

async function fetchData(): Promise<number> {
  return 42;
}


type Data = UnwrapPromise<ReturnType<typeof fetchData>>;

// Data bây giờ là number

function processData(data: Data): void {
  console.log(data * 2);
}

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // Bắt buộc
  city?: string; // Tùy chọn
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// Giá trị ban đầu của form (các trường tùy chọn)
type InitialFormValues = Partial<FormData>;

// Giá trị form đã cập nhật (một số trường có thể bị thiếu)
type UpdatedFormValues = Partial<FormData>;

// Các trường bắt buộc để gửi đi
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// Sử dụng các kiểu này trong các component form của bạn
function initializeForm(initialValues: InitialFormValues): void { }
function updateForm(updates: UpdatedFormValues): void {}
function submitForm(data: RequiredForSubmission): void {}


const initialForm: InitialFormValues = { newsletterSubscription: true };

const updateFormValues: UpdatedFormValues = {
    firstName: "John",
    lastName: "Doe"
};

// const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test" }; // LỖI: Thiếu 'country' 
const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test", country: "USA" }; //OK

interface APIResponse {
  user_id: string;
  first_name: string;
  last_name: string;
  email_address: string;
  profile_picture_url: string;
  is_active: boolean;
}

// Chuyển đổi phản hồi API sang định dạng dễ đọc hơn
type UserData = {
  id: string;
  fullName: string;
  email: string;
  avatar: string;
  active: boolean;
};

function transformApiResponse(response: APIResponse): UserData {
  return {
    id: response.user_id,
    fullName: `${response.first_name} ${response.last_name}`,
    email: response.email_address,
    avatar: response.profile_picture_url,
    active: response.is_active
  };
}

function fetchAndTransformData(url: string): Promise<UserData> {
    return fetch(url)
        .then(response => response.json())
        .then(data => transformApiResponse(data));
}


// Bạn thậm chí có thể thực thi kiểu bằng cách:

function saferTransformApiResponse(response: APIResponse): UserData {
    const {user_id, first_name, last_name, email_address, profile_picture_url, is_active} = response;
    const transformed: UserData = {
        id: user_id,
        fullName: `${first_name} ${last_name}`,
        email: email_address,
        avatar: profile_picture_url,
        active: is_active
    };

    return transformed;
}

interface AppSettings {
  theme: "light" | "dark";
  language: string;
  notificationsEnabled: boolean;
  apiUrl?: string; // URL API tùy chọn cho các môi trường khác nhau
  timeout?: number;  //Tùy chọn
}

// Cài đặt mặc định
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// Hàm để hợp nhất cài đặt của người dùng với cài đặt mặc định
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// Sử dụng các cài đặt đã hợp nhất trong ứng dụng của bạn
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);