TypeScript：在对象类型中定义可选且受限的键值-js教程-PHP中文网

TypeScript：在对象类型中定义可选且受限的键值

聖光之護

发布： 2025-11-22 14:45:01

原创

508人浏览过

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），允许我们修改映射类型生成属性的特性。其中，? 修饰符用于将属性标记为可选。通过在映射类型中添加 ?，我们可以轻松解决上述问题。

今客CRM客户管理系统 v18.1

今客CRM客户管理系统主要是为了帮助企业解决在日常工作中遇到的客户管理等难题而开发，通过今客CRM客户管理系统可以对企业事务中的不同功能进行操作，用户通过自定义字段类型可以达到适合不同企业的需求。在今客客户关系管理系统中管理着一个企业最为完整的客户信息，全面的客户信息覆盖在企业的市场营销、销售和服务与技术支持等企业整个前端办公领域的各个环节里。它为企业带来附加价值是不可限量的。今客CRM客户管理系

查看详情

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

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

以上就是TypeScript：在对象类型中定义可选且受限的键值的详细内容，更多请关注php中文网其它相关文章！