Kiểu Chính xác trong TypeScript: So Khớp Hình Dạng Đối Tượng Nghiêm Ngặt cho Mã Nguồn Bền Vững

TypeScript, một tập hợp cha của JavaScript, mang lại kiểu tĩnh cho thế giới phát triển web năng động. Mặc dù TypeScript mang lại những lợi thế đáng kể về mặt an toàn kiểu và khả năng bảo trì mã nguồn, hệ thống kiểu cấu trúc của nó đôi khi có thể dẫn đến hành vi không mong muốn. Đây là lúc khái niệm "kiểu chính xác" (exact types) phát huy tác dụng. Mặc dù TypeScript không có tính năng tích hợp nào được đặt tên rõ ràng là "kiểu chính xác", chúng ta có thể đạt được hành vi tương tự thông qua sự kết hợp của các tính năng và kỹ thuật của TypeScript. Bài đăng blog này sẽ đi sâu vào cách thực thi việc so khớp hình dạng đối tượng nghiêm ngặt hơn trong TypeScript để cải thiện sự bền vững của mã nguồn và ngăn ngừa các lỗi phổ biến.

Tìm hiểu về Kiểu Cấu trúc của TypeScript

TypeScript sử dụng kiểu cấu trúc (còn được gọi là duck typing), có nghĩa là khả năng tương thích của kiểu được xác định bởi các thành viên của kiểu, chứ không phải bởi tên đã khai báo của chúng. Nếu một đối tượng có tất cả các thuộc tính mà một kiểu yêu cầu, nó được coi là tương thích với kiểu đó, bất kể nó có thêm thuộc tính nào khác hay không.

Ví dụ:

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}

printPoint(myPoint); // Điều này hoạt động tốt, mặc dù myPoint có thuộc tính 'z'

Trong kịch bản này, TypeScript cho phép `myPoint` được truyền vào `printPoint` vì nó chứa các thuộc tính `x` và `y` bắt buộc, mặc dù nó có thêm thuộc tính `z`. Mặc dù sự linh hoạt này có thể tiện lợi, nó cũng có thể dẫn đến các lỗi tinh vi nếu bạn vô tình truyền các đối tượng có thuộc tính không mong muốn.

Vấn đề với các Thuộc tính Thừa

Sự dễ dãi của kiểu cấu trúc đôi khi có thể che giấu lỗi. Hãy xem xét một hàm mong đợi một đối tượng cấu hình:

interface Config {
  apiUrl: string;
  timeout: number;
}

function setup(config: Config) {
  console.log(`API URL: ${config.apiUrl}`);
  console.log(`Timeout: ${config.timeout}`);
}

const myConfig = { apiUrl: "https://api.example.com", timeout: 5000, typo: true };

setup(myConfig); // TypeScript không phàn nàn ở đây!

console.log(myConfig.typo); //in ra true. Thuộc tính thừa vẫn tồn tại âm thầm

Trong ví dụ này, `myConfig` có một thuộc tính thừa là `typo`. TypeScript không báo lỗi vì `myConfig` vẫn thỏa mãn giao diện `Config`. Tuy nhiên, lỗi chính tả này không bao giờ bị phát hiện, và ứng dụng có thể không hoạt động như mong đợi nếu lỗi chính tả đó đáng lẽ phải là `typoo`. Những vấn đề tưởng chừng không đáng kể này có thể trở thành những cơn đau đầu lớn khi gỡ lỗi các ứng dụng phức tạp. Một thuộc tính bị thiếu hoặc sai chính tả có thể đặc biệt khó phát hiện khi xử lý các đối tượng lồng trong các đối tượng khác.

Các phương pháp để Thực thi Kiểu Chính xác trong TypeScript

Mặc dù "kiểu chính xác" thực sự không có sẵn trực tiếp trong TypeScript, đây là một số kỹ thuật để đạt được kết quả tương tự và thực thi việc so khớp hình dạng đối tượng nghiêm ngặt hơn:

1. Sử dụng Type Assertions với `Omit`

Kiểu tiện ích `Omit` cho phép bạn tạo một kiểu mới bằng cách loại trừ một số thuộc tính nhất định khỏi một kiểu hiện có. Kết hợp với một khẳng định kiểu (type assertion), điều này có thể giúp ngăn chặn các thuộc tính thừa.

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

// Tạo một kiểu chỉ bao gồm các thuộc tính của Point
const exactPoint: Point = myPoint as Omit & Point;

// Lỗi: Type '{ x: number; y: number; z: number; }' is not assignable to type 'Point'.
// Object literal may only specify known properties, and 'z' does not exist in type 'Point'.

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}


//Sửa lỗi
const myPointCorrect = { x: 10, y: 20 };
const exactPointCorrect: Point = myPointCorrect as Omit & Point;
printPoint(exactPointCorrect);

Cách tiếp cận này sẽ báo lỗi nếu `myPoint` có các thuộc tính không được định nghĩa trong giao diện `Point`.

Giải thích: `Omit` tạo ra một kiểu loại bỏ tất cả các khóa có trong `Point` khỏi kiểu của `myPoint`. Sau đó, `& Point` giao kiểu này với kiểu `Point`, về cơ bản yêu cầu đối tượng phải tuân thủ kiểu `Point`. Bằng cách khẳng định đối tượng theo kiểu kết hợp này, trình biên dịch sẽ kiểm tra các thuộc tính thừa và báo lỗi nếu tìm thấy bất kỳ thuộc tính nào. Điều này buộc chúng ta phải khai báo hình dạng chính xác khi định nghĩa đối tượng ban đầu.

2. Sử dụng một Hàm để Tạo Đối tượng

Bạn có thể tạo một hàm factory chỉ chấp nhận các thuộc tính được định nghĩa trong giao diện. Cách tiếp cận này cung cấp khả năng kiểm tra kiểu mạnh mẽ tại thời điểm tạo đối tượng.

interface Config {
  apiUrl: string;
  timeout: number;
}

function createConfig(config: Config): Config {
  return {
    apiUrl: config.apiUrl,
    timeout: config.timeout,
  };
}

const myConfig = createConfig({ apiUrl: "https://api.example.com", timeout: 5000 });

//Đoạn mã này sẽ không biên dịch được:
//const myConfigError = createConfig({ apiUrl: "https://api.example.com", timeout: 5000, typo: true });
//Argument of type '{ apiUrl: string; timeout: number; typo: true; }' is not assignable to parameter of type 'Config'.
// Object literal may only specify known properties, and 'typo' does not exist in type 'Config'.

Bằng cách trả về một đối tượng được xây dựng chỉ với các thuộc tính được định nghĩa trong giao diện `Config`, bạn đảm bảo rằng không có thuộc tính thừa nào có thể lọt vào. Điều này giúp việc tạo cấu hình an toàn hơn.

3. Sử dụng Type Guards

Type guards là các hàm thu hẹp kiểu của một biến trong một phạm vi cụ thể. Mặc dù chúng không trực tiếp ngăn chặn các thuộc tính thừa, chúng có thể giúp bạn kiểm tra chúng một cách rõ ràng và thực hiện hành động phù hợp.

interface User {
  id: number;
  name: string;
}

function isUser(obj: any): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj && typeof obj.id === 'number' &&
    'name' in obj && typeof obj.name === 'string' &&
    Object.keys(obj).length === 2 //kiểm tra số lượng khóa. Lưu ý: dễ bị lỗi và phụ thuộc vào số lượng khóa chính xác của User.
  );
}

const potentialUser1 = { id: 123, name: "Alice" };
const potentialUser2 = { id: 456, name: "Bob", extra: true };

if (isUser(potentialUser1)) {
  console.log("Valid User:", potentialUser1.name);
} else {
  console.log("Invalid User");
}

if (isUser(potentialUser2)) {
  console.log("Valid User:", potentialUser2.name); // Sẽ không chạy vào đây
} else {
  console.log("Invalid User");
}

Trong ví dụ này, type guard `isUser` không chỉ kiểm tra sự hiện diện của các thuộc tính bắt buộc mà còn cả kiểu của chúng và số lượng thuộc tính *chính xác*. Cách tiếp cận này rõ ràng hơn và cho phép bạn xử lý các đối tượng không hợp lệ một cách linh hoạt. Tuy nhiên, việc kiểm tra số lượng thuộc tính rất dễ bị lỗi. Bất cứ khi nào `User` có thêm/bớt thuộc tính, việc kiểm tra này phải được cập nhật.

4. Tận dụng `Readonly` và `as const`

Trong khi `Readonly` ngăn chặn việc sửa đổi các thuộc tính hiện có, và `as const` tạo ra một tuple hoặc đối tượng chỉ đọc nơi tất cả các thuộc tính đều là chỉ đọc sâu và có kiểu chữ (literal types), chúng có thể được sử dụng để tạo ra một định nghĩa và kiểm tra kiểu nghiêm ngặt hơn khi kết hợp với các phương pháp khác. Tuy nhiên, cả hai đều không tự ngăn chặn các thuộc tính thừa.

interface Options {
  width: number;
  height: number;
}

//Tạo kiểu Readonly
type ReadonlyOptions = Readonly;

const options: ReadonlyOptions = { width: 100, height: 200 };

//options.width = 300; //lỗi: Cannot assign to 'width' because it is a read-only property.

//Sử dụng as const
const config = { api_url: "https://example.com", timeout: 3000 } as const;

//config.timeout = 5000; //lỗi: Cannot assign to 'timeout' because it is a read-only property.

//Tuy nhiên, các thuộc tính thừa vẫn được phép:
const invalidOptions: ReadonlyOptions = { width: 100, height: 200, depth: 300 }; //không có lỗi. Vẫn cho phép thuộc tính thừa.


interface StrictOptions {
  readonly width: number;
  readonly height: number;
}

//Bây giờ sẽ báo lỗi:
//const invalidStrictOptions: StrictOptions = { width: 100, height: 200, depth: 300 };
//Type '{ width: number; height: number; depth: number; }' is not assignable to type 'StrictOptions'.
//  Object literal may only specify known properties, and 'depth' does not exist in type 'StrictOptions'.

Điều này cải thiện tính bất biến, nhưng chỉ ngăn chặn sự thay đổi, chứ không phải sự tồn tại của các thuộc tính thừa. Khi kết hợp với `Omit`, hoặc phương pháp dùng hàm, nó sẽ trở nên hiệu quả hơn.

5. Sử dụng các Thư viện (ví dụ: Zod, io-ts)

Các thư viện như Zod và io-ts cung cấp các khả năng xác thực kiểu và định nghĩa schema mạnh mẽ tại thời gian chạy. Các thư viện này cho phép bạn định nghĩa các schema mô tả chính xác hình dạng mong đợi của dữ liệu, bao gồm cả việc ngăn chặn các thuộc tính thừa. Mặc dù chúng thêm một phụ thuộc tại thời gian chạy, chúng cung cấp một giải pháp rất mạnh mẽ và linh hoạt.

Ví dụ với Zod:

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});

type User = z.infer;

const validUser = { id: 1, name: "John" };
const invalidUser = { id: 2, name: "Jane", extra: true };

const parsedValidUser = UserSchema.parse(validUser);
console.log("Parsed Valid User:", parsedValidUser);

try {
  const parsedInvalidUser = UserSchema.parse(invalidUser);
  console.log("Parsed Invalid User:", parsedInvalidUser); // Sẽ không đạt tới đây
} catch (error) {
  console.error("Validation Error:", error.errors);
}

Phương thức `parse` của Zod sẽ báo lỗi nếu đầu vào không tuân thủ schema, ngăn chặn hiệu quả các thuộc tính thừa. Điều này cung cấp xác thực tại thời gian chạy và cũng tạo ra các kiểu TypeScript từ schema, đảm bảo tính nhất quán giữa các định nghĩa kiểu và logic xác thực tại thời gian chạy của bạn.

Các Phương pháp Tốt nhất để Thực thi Kiểu Chính xác

Dưới đây là một số phương pháp tốt nhất cần xem xét khi thực thi việc so khớp hình dạng đối tượng nghiêm ngặt hơn trong TypeScript:

• Chọn kỹ thuật phù hợp: Cách tiếp cận tốt nhất phụ thuộc vào nhu cầu cụ thể và yêu cầu của dự án của bạn. Đối với các trường hợp đơn giản, khẳng định kiểu với `Omit` hoặc các hàm factory có thể là đủ. Đối với các kịch bản phức tạp hơn hoặc khi cần xác thực tại thời gian chạy, hãy xem xét sử dụng các thư viện như Zod hoặc io-ts.
• Hãy nhất quán: Áp dụng cách tiếp cận bạn đã chọn một cách nhất quán trong toàn bộ codebase của mình để duy trì một mức độ an toàn kiểu đồng nhất.
• Ghi tài liệu cho các kiểu của bạn: Ghi tài liệu rõ ràng cho các giao diện và kiểu của bạn để truyền đạt hình dạng mong đợi của dữ liệu cho các nhà phát triển khác.
• Kiểm thử mã của bạn: Viết các bài kiểm thử đơn vị để xác minh rằng các ràng buộc kiểu của bạn đang hoạt động như mong đợi và mã của bạn xử lý dữ liệu không hợp lệ một cách linh hoạt.
• Cân nhắc các đánh đổi: Việc thực thi so khớp hình dạng đối tượng nghiêm ngặt hơn có thể làm cho mã của bạn mạnh mẽ hơn, nhưng cũng có thể làm tăng thời gian phát triển. Cân nhắc lợi ích so với chi phí và chọn cách tiếp cận hợp lý nhất cho dự án của bạn.
• Áp dụng dần dần: Nếu bạn đang làm việc trên một codebase lớn hiện có, hãy xem xét áp dụng các kỹ thuật này dần dần, bắt đầu từ những phần quan trọng nhất của ứng dụng.
• Ưu tiên interfaces hơn type aliases khi định nghĩa hình dạng đối tượng: Interfaces thường được ưu tiên hơn vì chúng hỗ trợ hợp nhất khai báo (declaration merging), điều này có thể hữu ích để mở rộng các kiểu trên các tệp khác nhau.

Các Ví dụ trong Thế giới Thực

Hãy xem xét một số kịch bản trong thế giới thực nơi các kiểu chính xác có thể mang lại lợi ích:

• Tải trọng yêu cầu API (API request payloads): Khi gửi dữ liệu đến một API, điều quan trọng là phải đảm bảo rằng tải trọng tuân thủ schema mong đợi. Việc thực thi các kiểu chính xác có thể ngăn ngừa lỗi do gửi các thuộc tính không mong muốn. Ví dụ, nhiều API xử lý thanh toán cực kỳ nhạy cảm với dữ liệu không mong đợi.
• Tệp cấu hình: Các tệp cấu hình thường chứa một số lượng lớn các thuộc tính, và lỗi chính tả có thể phổ biến. Sử dụng các kiểu chính xác có thể giúp phát hiện sớm các lỗi chính tả này. Nếu bạn đang thiết lập vị trí máy chủ trong một môi trường đám mây, một lỗi chính tả trong cài đặt vị trí (ví dụ: eu-west-1 so với eu-wet-1) sẽ trở nên cực kỳ khó gỡ lỗi nếu không được phát hiện ngay từ đầu.
• Các chuỗi xử lý chuyển đổi dữ liệu: Khi chuyển đổi dữ liệu từ một định dạng này sang định dạng khác, điều quan trọng là phải đảm bảo rằng dữ liệu đầu ra tuân thủ schema mong đợi.
• Hàng đợi tin nhắn (Message queues): Khi gửi tin nhắn qua một hàng đợi tin nhắn, điều quan trọng là phải đảm bảo rằng tải trọng tin nhắn hợp lệ và chứa các thuộc tính chính xác.

Ví dụ: Cấu hình Quốc tế hóa (i18n)

Hãy tưởng tượng bạn đang quản lý các bản dịch cho một ứng dụng đa ngôn ngữ. Bạn có thể có một đối tượng cấu hình như sau:

interface Translation {
  greeting: string;
  farewell: string;
}

interface I18nConfig {
  locale: string;
  translations: Translation;
}

const englishConfig: I18nConfig = {
  locale: "en-US",
  translations: {
    greeting: "Hello",
    farewell: "Goodbye"
  }
};


//Đây sẽ là một vấn đề, vì một thuộc tính thừa tồn tại, âm thầm gây ra một lỗi.
const spanishConfig: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós",
    typo: "unintentional translation"
  }
};

//Giải pháp: Sử dụng Omit
const spanishConfigCorrect: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós"
  } as Omit & Translation
};

Nếu không có các kiểu chính xác, một lỗi chính tả trong một khóa dịch (như thêm một trường `typo`) có thể không được chú ý, dẫn đến thiếu bản dịch trong giao diện người dùng. Bằng cách thực thi so khớp hình dạng đối tượng nghiêm ngặt hơn, bạn có thể phát hiện các lỗi này trong quá trình phát triển và ngăn chúng đến tay người dùng cuối.

Kết luận

Mặc dù TypeScript không có "kiểu chính xác" tích hợp sẵn, bạn có thể đạt được kết quả tương tự bằng cách sử dụng kết hợp các tính năng và kỹ thuật của TypeScript như khẳng định kiểu với `Omit`, các hàm factory, type guards, `Readonly`, `as const`, và các thư viện bên ngoài như Zod và io-ts. Bằng cách thực thi việc so khớp hình dạng đối tượng nghiêm ngặt hơn, bạn có thể cải thiện sự bền vững của mã nguồn, ngăn ngừa các lỗi phổ biến và làm cho ứng dụng của bạn đáng tin cậy hơn. Hãy nhớ chọn cách tiếp cận phù hợp nhất với nhu cầu của bạn và nhất quán trong việc áp dụng nó trong toàn bộ codebase của bạn. Bằng cách xem xét cẩn thận các phương pháp này, bạn có thể kiểm soát tốt hơn các kiểu của ứng dụng và tăng khả năng bảo trì lâu dài.