本文深入探讨了在 TypeScript 中如何使用映射类型（Mapped Types）及其修饰符来创建具有可选属性的对象类型。通过将枚举值或字符串字面量作为键，并利用 `?` 修饰符，我们能够构建出既限制了键的可能值，又无需强制所有键都存在的灵活类型定义，从而有效解决复杂数据结构中的类型约束问题。
理解 TypeScript 映射类型与键限制
在 TypeScript 中，我们经常需要定义对象的结构，其中对象的键可能来源于一个预定义的集合，例如一组常量字符串或枚举值。映射类型（Mapped Types）是实现这一目标的强大工具，它允许我们基于现有类型来创建新类型，并对新类型的属性进行转换。
首先，让我们定义一组常量，它们将作为我们对象类型的合法键：
export const ABC = {
A: 'A',
B: 'B',
C: 'C',
} as const; // 使用 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'现在，AbcTypes 和 DefTypes 分别代表了我们希望用作键的字符串字面量联合类型。
初始尝试与遇到的问题
假设我们想要创建一个嵌套对象，其第一层键必须是 AbcTypes 中的一个，第二层键必须是 DefTypes 中的一个，并且叶子节点包含 onClick 和 onCancel 方法。一个直观的映射类型定义可能是这样的：
type MyNewDictionaryAttempt = {
[pKey in AbcTypes]: { // pKey 必须是 'A' | 'B' | 'C'
[eKey in DefTypes]: { // eKey 必须是 'D' | 'E' | 'F'
onClick: () => void;
onCancel: () => void;
}
}
};然而，当我们尝试使用这个类型来定义一个实际的对象，并且只提供部分键时，TypeScript 会报错：
慧谷动力网站管理系统拥有极为灵活的产品架构、并且完全开源任何企业机构都可对其二次开发、极强的可扩展性和可伸缩性，多年的网站开发经验、自助化的后台管理，充分满足大中小型企业电子商务网站的构建和运营管理需求，该系统采用最简单易用的asp+access进行搭建，拥有完善的网站前后台，并特别根据企业网站的特点开发出独具特色的栏目和功能。HuiguerCMS是企业建站的绝佳选择！ 系统三大特色：1、全静态：
const dictionary: MyNewDictionaryAttempt = {
[ABC.A]: {
[DEF.D]: {
onClick: () => null,
onCancel: () => null,
}
}
};
// 错误信息示例：
// Type '{ D: { onClick: () => null; onCancel: () => null; }; }' is missing the following properties from type '{ D: { ... }; E: { ... }; F: { ... }; }': E, F
// 并且对于 ABC.A 之外的键 (B, C) 也会有类似的缺失报错。这个错误发生的原因是，在 TypeScript 的映射类型中，默认情况下所有通过 in 迭代生成的属性都是必需的。这意味着 MyNewDictionaryAttempt 要求 ABC.A、ABC.B、ABC.C 都必须存在，并且在每个 ABC 键下，DEF.D、DEF.E、DEF.F 也都必须存在。这与我们“只使用一部分键，但不是全部”的需求相悖。
解决方案：利用映射修饰符 ? 使属性可选
为了解决这个问题，我们需要引入 TypeScript 的映射修饰符。映射修饰符允许我们改变映射类型中属性的特性，例如使其变为可选 (?)、只读 (readonly)，或者移除这些特性 (-?, -readonly)。
对于我们的需求，只需在映射类型中添加 ? 修饰符，即可将属性标记为可选：
type MyNewDictionary = {
[pKey in AbcTypes]?: { // 外层键是可选的
[eKey in DefTypes]?: { // 内层键也是可选的
onClick: () => void;
onCancel: () => void;
}
}
};通过在 [pKey in AbcTypes]? 和 [eKey in DefTypes]? 中添加 ?，我们告诉 TypeScript 这些属性是可选的。现在，我们可以只提供 AbcTypes 和 DefTypes 中的部分键，而不会收到类型错误：
// 完整的示例代码
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];
export type DefTypes = (typeof DEF)[keyof typeof DEF];
type MyNewDictionary = {
[pKey in AbcTypes]?: { // 标记为可选
[eKey in DefTypes]?: { // 标记为可选
onClick: () => void;
onCancel: () => void;
}
}
};
// 现在这个对象是完全合法的，因为所有键都是可选的
const dictionary: MyNewDictionary = {
[ABC.A]: {
[DEF.D]: {
onClick: () => null,
onCancel: () => null,
},
// DEF.E 和 DEF.F 是可选的，可以不提供
},
// ABC.B 和 ABC.C 也是可选的，可以不提供
};
// 也可以提供多个键
const anotherDictionary: MyNewDictionary = {
[ABC.A]: {
[DEF.D]: { onClick: () => console.log('A-D click'), onCancel: () => console.log('A-D cancel') },
[DEF.E]: { onClick: () => console.log('A-E click'), onCancel: () => console.log('A-E cancel') },
},
[ABC.C]: {
[DEF.F]: { onClick: () => console.log('C-F click'), onCancel: () => console.log('C-F cancel') },
}
};注意事项与总结
- 粒度控制：? 修饰符可以应用于映射类型的任何层级。在上述例子中，我们对两层映射都应用了 ?，使得无论是外层键还是内层键，都可以选择性地提供。如果只希望外层键可选而内层键强制，则只在外层 [pKey in AbcTypes]? 上使用 ?。
-
Partial
的区别 ：Partial工具类型也能使一个现有类型 T 的所有属性变为可选。然而，它的应用场景略有不同。Partial 适用于将一个已完整定义的类型 T 转换为一个部分实现的类型。而映射类型与 ? 修饰符的结合，则是在从头定义一个新类型时，就赋予其灵活的键选择能力，特别是在键来源于动态集合时。 - 其他映射修饰符：除了 ?，还有 readonly 用于创建只读属性，以及 + 或 - 前缀来添加或移除修饰符，例如 [P in keyof T]-?: T[P] 可以移除所有可选性，使所有属性变为必需。
通过熟练运用 TypeScript 的映射类型和映射修饰符，开发者可以创建出高度灵活且类型安全的复杂数据结构，精确控制对象的键值范围及其可选性，从而提升代码的可维护性和健壮性。
