TypeScript高级类型技巧：确保泛型对象所有属性在嵌套数组中被声明

本文探讨了如何在typescript中实现对泛型对象属性在嵌套数组结构中（如表单布局）的穷尽性检查。由于typescript原生不支持数组的穷尽性类型，文章提出了一种利用高级类型技巧，包括字面量类型、条件类型和交叉类型，来在编译时检测缺失属性的解决方案。同时，也详细阐述了该方法的局限性，并建议结合运行时检查以确保数据完整性。

在TypeScript中，我们经常需要处理复杂的数据结构，例如包含多个字段的表单布局。一个常见的需求是，希望在编译时确保某个泛型类型 T 的所有属性都已在特定的数据结构（例如嵌套数组）中被声明，从而避免遗漏。然而，TypeScript本身并没有“穷尽性数组”的概念，数组类型通常允许包含零个或多个指定类型的元素，而不强制包含所有可能的值。这使得在编译时强制要求所有属性都必须存在于一个数组结构中成为一个挑战。

构建基础类型与辅助函数

为了实现这一目标，我们首先需要定义一些基础类型和辅助函数，以确保在数据结构中捕获到精确的字段名称和值类型。

1. Field 类型定义Field 类型用于表示单个表单字段，它包含 fieldName 和 value 两个属性。关键在于，fieldName 的类型应该是一个字面量类型，这样我们才能精确地跟踪每个字段的名称。

   type Field = {
     fieldName: K;
     value: V;
   };

2. FieldFor 类型定义FieldFor 是一个实用类型，它从泛型对象 T 的每个属性中派生出对应的 Field 类型。例如，如果 T 有 firstName: string 属性，那么 FieldFor 将包含 Field。

   type FieldFor = { [K in keyof T]-?: Field }[keyof T];

   这里的 -? 操作符确保了所有属性都是必需的，并且 [keyof T] 将对象类型转换为一个联合类型，包含了 T 中所有属性对应的 Field 类型。

3. layout 和 field 辅助函数 为了方便构建表单结构，我们定义 layout 和 field 两个辅助函数。它们的作用是创建 Field 实例并组织它们。通过泛型参数的精确推断，这些函数能够保留 fieldName 和 value 的字面量类型信息。

   function layout[]>(fields: readonly [...T]) {
     return fields;
   }
   
   function field(fieldName: K, value: V): Field {
     return {
       fieldName,
       value,
     };
   }

   例如，field('firstName', 'John') 将被推断为 Field。

实现核心穷尽性检查逻辑

现在，我们来构建核心的类型检查逻辑，它将判断一个嵌套数组结构是否包含了泛型类型 T 的所有属性。这需要一个工厂函数和一些高级类型技巧。

Lobe

微软旗下的一个训练器学习模型的平台

下载

1. fieldsGroupLayoutFor() 工厂函数 我们定义一个 fieldsGroupLayoutFor 工厂函数，它接受一个泛型类型 T 并返回一个专门用于检查 T 类型属性穷尽性的函数。这种“函数返回函数”的模式是解决 TypeScript 部分类型参数推断限制的常见方法。

   function fieldsGroupLayoutFor() {
     // Missing 类型用于识别在 U 中缺失的 T 的属性
     type Missing[])[]> =
       FieldFor<{ [K in keyof T as Exclude]: T[K] }>;
   
     return function [])[]>(
       u: U & (Missing extends never ? unknown : readonly [Missing])
     ) {
       return u as readonly (readonly FieldFor[])[];
     };
   }

2. Missing 类型解析Missing 是实现穷尽性检查的关键。

   • U 代表我们传入的嵌套数组结构，它的类型是 readonly (readonly FieldFor[])[]。
   • U[number][number]['fieldName'] 会提取 U 中所有 Field 的 fieldName 属性的联合类型，这代表了在当前结构中已经声明的所有字段名。
   • Exclude 的作用是从 T 的所有键 K 中，排除掉那些已经在 U 中声明的字段名。剩下的就是 T 中缺失的字段名。
   • FieldFor]: T[K] }> 最终会生成一个联合类型，其中包含了所有缺失字段对应的 Field 类型。如果所有字段都已声明，Exclude 的结果将是 never，从而 Missing 也将是 never。

3. 类型断言技巧解析 返回函数中的 u 参数类型定义是实现编译时错误提示的核心： U & (Missing extends never ? unknown : readonly [Missing])

   • 如果 Missing 是 never（表示没有缺失字段），则 (Missing extends never ? unknown : readonly [Missing]) 的结果是 unknown。此时 u 的类型变为 U & unknown，等价于 U，表示类型检查通过。
   • 如果 Missing 不是 never（表示有缺失字段），则 (Missing extends never ? unknown : readonly [Missing]) 的结果是 readonly [Missing]。此时 u 的类型变为 U & readonly [Missing]。由于 U 是一个嵌套数组，而 readonly [Missing] 是一个包含缺失字段的元组，两者进行交叉类型操作通常会导致类型不兼容，从而触发 TypeScript 编译错误，并提示缺失的字段信息。

interface User {
  firstName: string;
  lastName: string;
  age: number;
  gender: string;
}

// 为 User 类型创建一个专属的表单布局检查器
const fieldsGroupLayoutForUser = fieldsGroupLayoutFor();

// 示例1：所有属性都已声明，类型检查通过
const form = fieldsGroupLayoutForUser([
  layout([
    field('firstName', 'John'),
    field('lastName', 'Doe'),
  ]),
  layout([
    field('age', 12),
    field('gender', 'Male'),
  ]),
]); // 编译通过

// 示例2：缺失 'age' 属性，类型检查失败，抛出编译错误
const badForm = fieldsGroupLayoutForUser([
  layout([
    field('firstName', 'John'),
    field('lastName', 'Doe'),
  ]),
  layout([
    // field('age', 12), // 'age' 字段被注释，导致缺失
    field('gender', 'Male'),
  ]),
]);
// 预期编译错误：
// Type 'readonly [Field<"firstName", string>]' is not
// assignable to type 'Field<"age", number>'