TypeScript 映射类型中可选属性的灵活运用-js教程-PHP中文网

TypeScript 映射类型中可选属性的灵活运用

心靈之曲

发布： 2025-11-22 12:41:43

原创

138人浏览过

typescript 映射类型中可选属性的灵活运用

本文深入探讨了在 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 会报错：

Flawless AI

好莱坞2.0，电影制作领域的生成式AI工具

查看详情

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<T> 的区别：Partial<T> 工具类型也能使一个现有类型 T 的所有属性变为可选。然而，它的应用场景略有不同。Partial<T> 适用于将一个已完整定义的类型 T 转换为一个部分实现的类型。而映射类型与 ? 修饰符的结合，则是在从头定义一个新类型时，就赋予其灵活的键选择能力，特别是在键来源于动态集合时。
其他映射修饰符：除了 ?，还有 readonly 用于创建只读属性，以及 + 或 - 前缀来添加或移除修饰符，例如 [P in keyof T]-?: T[P] 可以移除所有可选性，使所有属性变为必需。

通过熟练运用 TypeScript 的映射类型和映射修饰符，开发者可以创建出高度灵活且类型安全的复杂数据结构，精确控制对象的键值范围及其可选性，从而提升代码的可维护性和健壮性。

以上就是TypeScript 映射类型中可选属性的灵活运用的详细内容，更多请关注php中文网其它相关文章！