讲师中心 微信公众号
AI工具推荐 视频效率加速

TypeScript教程:使用映射类型和可选修饰符定义具有受限且可选键的对象

夏伟大大_4660

夏伟大大_4660

发布时间:2025-11-22 08:35:01

|

511人浏览过

|

来源于php中文网

原创

TypeScript教程:使用映射类型和可选修饰符定义具有受限且可选键的对象

本教程旨在解决在 typescript 中定义对象类型时遇到的一个常见问题:如何确保对象的键来源于一个预定义的集合,但同时允许这些键是可选的,而非全部强制存在。文章将深入探讨如何结合使用映射类型(mapped types)和可选修饰符(?),以创建灵活且类型安全的对象结构,从而避免因缺少非必需属性而导致的编译错误。

在 TypeScript 开发中,我们经常需要定义具有特定结构的对象,其中对象的键值(key)必须限定在某个预设的枚举或字符串集合中。然而,一个常见的挑战是,我们可能不希望对象必须包含该集合中的所有键,而是允许它们是可选的。本文将详细介绍如何利用 TypeScript 的映射类型(Mapped Types)和可选修饰符(Mapping Modifiers)来优雅地解决这一问题。

定义基础类型集合

首先,我们定义两个常量对象,它们将作为我们对象键的来源。使用 as const 可以确保 TypeScript 推断出最窄的字面量类型,而不是宽泛的 string 类型。

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

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

接下来,我们基于这些常量对象创建联合类型(Union Types),这些联合类型将精确地表示允许的键值。

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

AbcTypes 和 DefTypes 现在分别是 ABC 和 DEF 对象中所有值组成的字面量联合类型。

初始尝试与遇到的问题

我们的目标是创建一个字典类型 MyNewDictionary,它的第一层键来自 AbcTypes,第二层键来自 DefTypes。每个最内层对象都包含 onClick 和 onCancel 两个函数。

一种直观的定义方式是使用映射类型:

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

然而,当我们尝试创建一个 MyNewDictionaryAttempt 类型的对象实例,并且只赋值了部分键时,TypeScript 编译器会报错:

Galileo TypeScript sdk
Galileo TypeScript sdk

完整的Galileo AI平台 TypeScript/JS SDK 参考,用于评估、观察和保护 GenAI 应用。适用于构建 Node.js 或 TypeScript 项目。

下载
const dictionaryAttempt: MyNewDictionaryAttempt = {
  [ABC.A]: {
    [DEF.D]: {
      onClick: () => null,
      onCancel: () => null,
    }
  }
};
/*
错误示例:
Type '{ D: { onClick: () => null; onCancel: () => null; }; }' is missing the following properties from type '{ D: { onClick: () => void; onCancel: () => void; }; E: { onClick: () => void; onCancel: () => void; }; F: { onClick: () => void; onCancel: () => void; }; }'
*/

这个错误表明,尽管我们只为 ABC.A 下的 DEF.D 属性赋了值,但 MyNewDictionaryAttempt 类型要求 ABC.A 下必须包含 DEF.E 和 DEF.F,同样,整个 dictionaryAttempt 对象也必须包含 ABC.B 和 ABC.C。这是因为默认情况下,映射类型会创建所有属性都为必需(mandatory)的新类型。

解决方案:使用可选修饰符 ?

要解决这个问题,我们需要引入 TypeScript 的映射修饰符(Mapping Modifiers)。具体来说,使用 ? 修饰符可以将映射类型生成的属性标记为可选(optional)。

我们将 MyNewDictionaryAttempt 类型修改为 MyNewDictionary,在每个映射类型的键后面添加 ?:

type MyNewDictionary = {
  [pKey in AbcTypes]?: { // 外层键现在是可选的
    [eKey in DefTypes]?: { // 内层键现在也是可选的
      onClick: () => void;
      onCancel: () => void;
    }
  }
};

通过在 [pKey in AbcTypes] 和 [eKey in DefTypes] 后面分别添加 ?,我们告诉 TypeScript:

  1. MyNewDictionary 对象可以包含 AbcTypes 中的任意键,但不需要全部包含。
  2. 对于 AbcTypes 中的每个键(例如 ABC.A),其对应的值(一个对象)可以包含 DefTypes 中的任意键,但同样不需要全部包含。

现在,我们可以按照预期创建对象实例,只包含我们需要的属性,而不会引发编译错误:

const dictionary: MyNewDictionary = {
  [ABC.A]: {
    [DEF.D]: {
      onClick: () => console.log('A.D clicked'),
      onCancel: () => console.log('A.D cancelled'),
    },
    // DEF.E 和 DEF.F 在这里是可选的,可以不写
  },
  [ABC.C]: { // ABC.B 也是可选的,可以不写
    [DEF.F]: {
      onClick: () => console.log('C.F clicked'),
      onCancel: () => console.log('C.F cancelled'),
    }
  }
};

// 尝试访问存在的属性
if (dictionary[ABC.A]?.[DEF.D]) {
  dictionary[ABC.A][DEF.D]?.onClick(); // 输出: A.D clicked
}

// 尝试访问不存在的属性(类型安全地处理 undefined)
console.log(dictionary[ABC.B]?.D?.onClick); // 输出: undefined

总结与注意事项

  • 映射类型 (Mapped Types): 允许你基于现有类型创建新类型,通过遍历一个联合类型或字面量类型的所有成员来生成新的属性。语法是 {[Key in UnionType]: ValueType}。
  • 可选修饰符 (?): 在映射类型中使用 ? ({[Key in UnionType]?: ValueType}) 可以将生成的属性标记为可选。这意味着在创建该类型的对象时,这些属性可以被省略。
  • as const 的重要性: 使用 as const 确保 TypeScript 推断出最具体的字面量类型,这对于创建精确的联合类型(如 AbcTypes)至关重要,从而使映射类型能够正确地工作。
  • 嵌套可选性: 当处理嵌套对象时,如果希望内层属性也是可选的,需要在内层映射类型中也使用 ? 修饰符。
  • 其他映射修饰符: 除了 ? (可选),还有 -? (必需),readonly (只读),和 -readonly (可写) 等修饰符,可以根据需求灵活组合使用。

通过掌握映射类型和可选修饰符,你可以在 TypeScript 中创建出更加灵活、健壮且类型安全的对象结构,有效管理复杂的配置或数据字典,同时避免不必要的强制性属性检查。

热门AI工具

更多
UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

292

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

500

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

351

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

266

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

578

2026.06.16

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

6099

2023.08.02

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6004

2023.10.24

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2138

2023.09.20

剧云AI短剧创作教程合集
剧云AI短剧创作教程合集

本专题聚焦剧云AI短剧创作,讲解从短剧灵感、梗概、全局大纲到分集、分场和正文的完整流程及节奏设计方法。

0

2026.10.14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

TypeScript——十天技能课堂
TypeScript——十天技能课堂

共21课时 | 1.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn