本文深入探讨了在 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），允许我们修改映射类型生成属性的特性。其中，? 修饰符用于将属性标记为可选。通过在映射类型中添加 ?，我们可以轻松解决上述问题。
使用 Scrapfly SDK（scrapfly-sdk）在 TypeScript 或 JavaScript 中进行网页抓取，用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。
将 MyNewDictionaryProblematic 类型修改如下：
type MyNewDictionary = {
[pKey in AbcTypes]?: { // 第一层键标记为可选
[eKey in DefTypes]?: { // 第二层键也标记为可选
onClick: () => void;
onCancel: () => void;
}
}
};在这个修正后的 MyNewDictionary 类型定义中，我们为 pKey 和 eKey 都添加了 ? 修饰符。这意味着：
- MyNewDictionary 对象可以包含 AbcTypes 中的任意键，但不需要包含所有键。
- 对于 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: () => {} }
// }
// };通过以上示例，我们可以看到 ? 修饰符的强大之处。它允许我们在保持类型安全的同时，极大地增加了对象结构的灵活性。
注意事项与总结
- 嵌套可选性： 在本例中，由于是嵌套的映射类型，我们需要在每一层都应用 ? 修饰符，以确保每一级的属性都是可选的。如果只在外层使用 ?，内层属性仍会是强制性的。
-
Partial
的区别： Partial是一个实用类型，它会使类型 T 的所有属性变为可选。虽然它也能实现属性可选，但对于像本例中这种需要基于特定类型动态生成键的场景，直接在映射类型中使用 ? 更为精确和灵活。Partial 适用于将一个已定义的完整接口或类型变为可选版本，而映射修饰符 ? 则是在定义新类型时直接控制属性的可选性。 - 类型推断： 当你使用这种可选类型时，TypeScript 的类型推断会很智能。访问可选属性时，TypeScript 会提醒你该属性可能为 undefined，因此需要进行空值检查，如 dictionary1[ABC.A]?.[DEF.D]?.onClick()。
- as const 的作用： 在原始问题中，ABC 和 DEF 被定义为 as const。这使得它们的属性值成为字面量类型（例如 'A' 而不是 string），这对于创建精确的联合类型 AbcTypes 和 DefTypes 至关重要，从而确保映射类型中的键是具体且有限的。
通过巧妙地运用 TypeScript 的映射类型和可选属性修饰符 ?，开发者可以构建出高度灵活且类型安全的对象结构。这种方法不仅解决了在特定键集合中定义非强制性属性的问题，也提升了代码的可读性和可维护性，是编写健壮 TypeScript 应用的重要技巧。
