掌握 TypeScript 中的遞歸類型：優雅地處理深度限制

介紹

在 TypeScript 中使用深度巢狀的資料結構時，建立實用程式類型來轉換這些結構是一項常見任務。然而，遞歸類型雖然功能強大，但也面臨一系列挑戰。

其中一個挑戰是有效控制遞歸深度，以防止類型計算超出 TypeScript 的能力。本文將探討一種遞增和遞減類型級數字的常見方法，確定其局限性，並提出一個使用適當的遞增和遞減類型來管理遞歸深度的強大解決方案。

？基本型別級數字運算的問題

為了更好地理解這些限制，讓我們來看看在類型層級遞增或遞減數字時經常使用的簡單方法：

type Prev = [never, 0, 1, 2, 3, 4];
type Next = [1, 2, 3, 4, 5, 6];

type MinusOne = Prev[5]; // ? 4
type PlusOne = Next[5];  // ? 6

？問題場景：深度嵌套的可選屬性

假設您有一個深度巢狀的物件類型並且想要建立所有
屬性可選，最高可達指定等級：

type DeepObject = {
  a: number;
  b: {
    c: string;
    d: {
      e: boolean;
      f: {
        g: string;
        h: {
          i: number;
          j: {
            k: string;
          };
        };
      };
    };
  };
};

使用簡單的硬編碼方法，管理屬性變成可選的深度將如下所示：

type Prev = [never, 0, 1, 2, 3, 4];

type DeepOptional<
  T,
  Limit extends number = 1
> = Limit extends never
  ? never
  : {
      [K in keyof T]?: T[K] extends object
        ? DeepOptional<T[K], Prev[Limit]>
        : T[K];
    };

說明：

• DeepOptional 使屬性可選達到 Limit。
• Limit 將用於從靜態元組中取得遞減的值。

用法範例：

type NewDeepObject = DeepOptional<DeepObject, 3>;

// Result:
// {
//   a?: number;
//   b?: {
//     c?: string;
//     d?: {
//       e?: boolean;
//       f?: {
//         g: string;
//         h: {
//           i: number;
//           j: {
//             k: string;
//           };
//         };
//       };
//     };
//   };
// };

type NewDeepObject = DeepOptional<DeepObject, 1>;

// Result:
// {
//   a?: number;
//   b?: {
//     c: string;
//     d: {
//       e: boolean;
//       f: {
//         g: string;
//         h: {
//           i: number;
//           j: {
//             k: string;
//           };
//         };
//       };
//     };
//   };
// };

✋ 這種方法的問題

• 有限範圍：此方法僅與預先定義陣列 Prev 和 Next 一樣靈活。如果需要遞增或遞減超出這些陣列長度的數字，則必須手動擴展它們，這很麻煩且容易出錯。
• 可擴充性：隨著您的需求的發展，管理這些陣列變得越來越複雜，使得這種方法對於大規模類型操作來說不切實際。

？更穩健的解決方案：基於元組的增量和減量類型

為了克服預先定義數組的限制，我們可以使用元組操作來創建動態擴展的類型安全的遞增和遞減操作。

?️ 關鍵建構模組

• Length Utility：取得元組長度的型別：

type Prev = [never, 0, 1, 2, 3, 4];
type Next = [1, 2, 3, 4, 5, 6];

type MinusOne = Prev[5]; // ? 4
type PlusOne = Next[5];  // ? 6

• TupleOf：產生 N 個元素元組的型別：

type DeepObject = {
  a: number;
  b: {
    c: string;
    d: {
      e: boolean;
      f: {
        g: string;
        h: {
          i: number;
          j: {
            k: string;
          };
        };
      };
    };
  };
};

• Pop Utility：刪除元組最後一個元素的型別：

type Prev = [never, 0, 1, 2, 3, 4];

type DeepOptional<
  T,
  Limit extends number = 1
> = Limit extends never
  ? never
  : {
      [K in keyof T]?: T[K] extends object
        ? DeepOptional<T[K], Prev[Limit]>
        : T[K];
    };

• 遞增與遞減：

type NewDeepObject = DeepOptional<DeepObject, 3>;

// Result:
// {
//   a?: number;
//   b?: {
//     c?: string;
//     d?: {
//       e?: boolean;
//       f?: {
//         g: string;
//         h: {
//           i: number;
//           j: {
//             k: string;
//           };
//         };
//       };
//     };
//   };
// };

type NewDeepObject = DeepOptional<DeepObject, 1>;

// Result:
// {
//   a?: number;
//   b?: {
//     c: string;
//     d: {
//       e: boolean;
//       f: {
//         g: string;
//         h: {
//           i: number;
//           j: {
//             k: string;
//           };
//         };
//       };
//     };
//   };
// };

？應用增量和減量：一個實際範例

讓我們探索如何將這些實用程式類型應用於更複雜的現實世界問題：使物件的屬性在一定深度內可選。

問題場景：深度嵌套的可選屬性

假設您有一個深度巢狀的物件類型並且想要建立所有
屬性可選，最高可達指定等級：

type Length<T extends any[]> = (T extends { length: number } ? T["length"] : never) & number;

使用簡單的硬編碼方法，管理屬性變成可選的深度將會很複雜。以下是類型安全的 DeepOptional 實用程式如何解決此問題：

實作 DeepOptional

type TupleOf<N extends number, T extends unknown[] = []> = Length<T> extends N
  ? T
  : TupleOf<N, [...T, unknown]>;

說明：

• DeepOptional 使屬性可選達到 Limit。
• 該類型遞歸地遞增 CurrentLevel 直到與 Limit 匹配，此時停止遞歸並返回 T。
• 增量確保型別安全遞歸，無需手動陣列對應。

用法範例：

type Pop<T extends any[]> = T extends [...infer U, unknown] ? U : never;

?️ 結論

在medusajs，我們致力於尋找最高效和創新的解決方案來克服複雜的技術挑戰。透過利用基於元組的增量和減量類型，您可以超越基本類型級操作的限制並創建可擴展的、類型安全的實用程式。此方法不僅簡化了遞歸深度管理，還確保您保持複雜類型操作所需的靈活性，而不會超出 TypeScript 的類型檢查限制。

以上是掌握 TypeScript 中的遞歸類型：優雅地處理深度限制的詳細內容。更多資訊請關注PHP中文網其他相關文章！