TypeScript：可选键值对象定义方法

本文深入解析了 TypeScript 中定义可选且受限对象键值的方法，重点介绍了如何利用映射类型和可选属性修饰符 `?` 来构建灵活且类型安全的数据结构。针对键值需来自预定义枚举类型，但又允许键非强制性的场景，文章详细阐述了解决方案，避免因缺少非必要键导致的编译错误，提升开发效率和代码健壮性。通过具体示例，展示了如何在嵌套的映射类型中应用 `?` 修饰符，以及与 `Partial` 的区别，强调了 `as const` 在确保类型精确性中的作用，为 TypeScript 开发者提供了实用技巧，以创建更具弹性的对象模型。

本文深入探讨了在 TypeScript 中如何创建一种对象类型，其键值必须来自预定义的枚举类型，但同时允许这些键不是强制性的。通过利用 TypeScript 的映射类型和可选属性修饰符 `?`，我们能够构建出既灵活又类型安全的数据结构，有效避免了因缺少非必要键而导致的编译错误，从而提升了开发效率和代码健壮性。

理解问题背景：映射类型与强制性键

在 TypeScript 中，我们经常需要定义对象类型，其键名来源于一组预定义的值（例如枚举或字面量类型）。映射类型（Mapped Types）是实现这一目标的一种强大机制。例如，给定以下常量和类型定义：

export const ABC = {
  A: 'A',
  B: 'B',
  C: 'C',
} as const;

export const DEF = {
  D: 'D',
  E: 'E',
  F: 'F',
} as const;

export type AbcTypes = (typeof ABC)[keyof typeof ABC]; // 'A' | 'B' | 'C'
export type DefTypes = (typeof DEF)[keyof typeof DEF]; // 'D' | 'E' | 'F'

我们可能希望创建一个字典类型 MyNewDictionary，其第一层键是 AbcTypes 中的值，第二层键是 DefTypes 中的值，并且每个最内层对象包含 onClick 和 onCancel 方法。一个直观但存在问题的尝试可能是这样：

type MyNewDictionaryProblematic = {
  [pKey in AbcTypes]: {
    [eKey in DefTypes]: {
      onClick: () => void;
      onCancel: () => void;
    }
  }
};

当我们尝试创建一个 MyNewDictionaryProblematic 类型的对象时，如果只包含部分键，TypeScript 编译器会报错：

const dictionary: MyNewDictionaryProblematic = {
  [ABC.A]: { // 错误：类型 '{ D: { onClick: () => null; onCancel: () => null; }; }' 缺少类型 '{ D: { onClick: () => void; onCancel: () => void; }; E: { onClick: () => void; onCancel: () => void; }; F: { onClick: () => void; onCancel: () => void; }; }' 中的以下属性: 'E', 'F'
    [DEF.D]: {
      onClick: () => null,
      onCancel: () => null,
    }
  }
};

这个错误发生的原因是，默认情况下，映射类型会将其生成的所有属性都视为必需的。这意味着 MyNewDictionaryProblematic 期望 ABC.A、ABC.B、ABC.C 都存在，并且在 ABC.A 内部，又期望 DEF.D、DEF.E、DEF.F 都存在。这显然不符合我们“不强制所有键都存在”的需求。

解决方案：利用映射修饰符 ?

TypeScript 提供了映射修饰符（Mapping Modifiers），允许我们修改映射类型生成属性的特性。其中，? 修饰符用于将属性标记为可选。通过在映射类型中添加 ?，我们可以轻松解决上述问题。

将 MyNewDictionaryProblematic 类型修改如下：

type MyNewDictionary = {
  [pKey in AbcTypes]?: { // 第一层键标记为可选
    [eKey in DefTypes]?: { // 第二层键也标记为可选
      onClick: () => void;
      onCancel: () => void;
    }
  }
};

在这个修正后的 MyNewDictionary 类型定义中，我们为 pKey 和 eKey 都添加了 ? 修饰符。这意味着：

1. MyNewDictionary 对象可以包含 AbcTypes 中的任意键，但不需要包含所有键。
2. 对于 AbcTypes 中的某个键（例如 ABC.A），其对应的值（一个嵌套对象）也可以包含 DefTypes 中的任意键，但同样不需要包含所有键。

示例代码与验证

使用修正后的 MyNewDictionary 类型，我们可以灵活地创建对象，只包含我们需要的键，而不会触发编译错误：

// 修正后的类型定义
type MyNewDictionary = {
  [pKey in AbcTypes]?: {
    [eKey in DefTypes]?: {
      onClick: () => void;
      onCancel: () => void;
    }
  }
};

// 示例用法 1: 只包含部分 AbcTypes 键和部分 DefTypes 键
const dictionary1: MyNewDictionary = {
  [ABC.A]: {
    [DEF.D]: {
      onClick: () => console.log('A.D clicked'),
      onCancel: () => console.log('A.D cancelled'),
    },
    [DEF.E]: { // 可以在 ABC.A 下添加另一个 DEF 键
      onClick: () => console.log('A.E clicked'),
      onCancel: () => console.log('A.E cancelled'),
    }
  },
  [ABC.C]: { // 也可以只包含 ABC.C，而忽略 ABC.B
    [DEF.F]: {
      onClick: () => console.log('C.F clicked'),
      onCancel: () => console.log('C.F cancelled'),
    }
  }
};

// 示例用法 2: 甚至可以创建一个空对象 (虽然不常见，但类型上是允许的)
const emptyDictionary: MyNewDictionary = {};

// 示例用法 3: 访问可选属性时，需要进行空值检查
if (dictionary1[ABC.A] && dictionary1[ABC.A][DEF.D]) {
  dictionary1[ABC.A][DEF.D]?.onClick(); // 安全调用
}

// 尝试添加不在 AbcTypes 或 DefTypes 中的键会报错
// const invalidDictionary: MyNewDictionary = {
//   'Z': { // 错误: 'Z' 不可赋值给类型 'AbcTypes'
//     [DEF.D]: { onClick: () => {}, onCancel: () => {} }
//   }
// };

通过以上示例，我们可以看到 ? 修饰符的强大之处。它允许我们在保持类型安全的同时，极大地增加了对象结构的灵活性。

注意事项与总结

1. 嵌套可选性： 在本例中，由于是嵌套的映射类型，我们需要在每一层都应用 ? 修饰符，以确保每一级的属性都是可选的。如果只在外层使用 ?，内层属性仍会是强制性的。
2. Partial 的区别： Partial 是一个实用类型，它会使类型 T 的所有属性变为可选。虽然它也能实现属性可选，但对于像本例中这种需要基于特定类型动态生成键的场景，直接在映射类型中使用 ? 更为精确和灵活。Partial 适用于将一个已定义的完整接口或类型变为可选版本，而映射修饰符 ? 则是在定义新类型时直接控制属性的可选性。
3. 类型推断： 当你使用这种可选类型时，TypeScript 的类型推断会很智能。访问可选属性时，TypeScript 会提醒你该属性可能为 undefined，因此需要进行空值检查，如 dictionary1[ABC.A]?.[DEF.D]?.onClick()。
4. as const 的作用： 在原始问题中，ABC 和 DEF 被定义为 as const。这使得它们的属性值成为字面量类型（例如 'A' 而不是 string），这对于创建精确的联合类型 AbcTypes 和 DefTypes 至关重要，从而确保映射类型中的键是具体且有限的。

通过巧妙地运用 TypeScript 的映射类型和可选属性修饰符 ?，开发者可以构建出高度灵活且类型安全的对象结构。这种方法不仅解决了在特定键集合中定义非强制性属性的问题，也提升了代码的可读性和可维护性，是编写健壮 TypeScript 应用的重要技巧。

理论要掌握，实操不能落！以上关于《TypeScript：可选键值对象定义方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！