news 2026/4/28 23:18:23

TypeScript 对象

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TypeScript 对象

TypeScript 中的对象详解

在 TypeScript 中,对象是最常见的数据结构之一。TypeScript 通过强大的类型系统来描述对象的形状(shape),确保对象属性存在、类型正确,从而大幅减少运行时错误。

1. 对象字面量与类型推断
letuser={name:"Alice",age:30,isAdmin:true};// 类型推断为:{ name: string; age: number; isAdmin: boolean; }user.name="Bob";// OK// user.age = "30"; // 错误:类型不匹配// user.role = "admin"; // 错误:对象上不存在 role 属性
2. 使用接口(interface)定义对象类型(推荐)
interfaceUser{name:string;age:number;isAdmin?:boolean;// 可选属性readonlyid:number;// 只读属性}letadmin:User={name:"Eve",age:28,id:1// isAdmin 可省略};// admin.id = 2; // 错误:只读属性admin.age=29;// OK
3. 使用类型别名(type)定义对象类型
typePoint={x:number;y:number;z?:number;// 可选};letorigin:Point={x:0,y:0};// origin.z = undefined; // OK,可选属性可为 undefined
4. 匿名对象类型

直接在变量声明时定义(适合临时使用):

letconfig:{apiUrl:string;timeout:number;readonlydebug:boolean;}={apiUrl:"https://api.example.com",timeout:5000,debug:true};
5. 索引签名(Index Signatures)—— 动态属性

当对象属性名不确定时使用:

interfaceStringMap{[key:string]:string;// 任意 string 键,值必须是 string}letheaders:StringMap={"Content-Type":"application/json","Authorization":"Bearer token123"};headers["X-Custom"]="value";// OK// headers.age = 30; // 错误:值必须是 string

也可以限制键为 number:

interfaceNumberArray{[index:number]:string;// 如数组,但值必须是 string}
6. 额外属性检查(Excess Property Checks)

TypeScript 对对象字面量有严格检查:

interfacePerson{name:string;age:number;}letp:Person={name:"Tom",age:25,role:"admin"// 错误:role 不存在于 Person 接口};// 但通过变量赋值可绕过(结构化类型系统):letextra={name:"Tom",age:25,role:"admin"};letp2:Person=extra;// OK,多余属性被允许
7. 对象展开与合并
letdefaults={timeout:3000,retries:3};letconfig={...defaults,timeout:5000};// timeout 被覆盖// 类型:{ timeout: number; retries: number; }
8. 内置工具类型(Utility Types)操作对象

TypeScript 提供许多实用类型来变换对象类型:

工具类型作用示例
Partial<T>所有属性变为可选Partial<User>→ name?, age?, isAdmin?
Required<T>所有属性变为必选Required<User>
Readonly<T>所有属性变为只读Readonly<User>
Pick<T, K>挑选指定属性`Pick<User, “name”
Omit<T, K>排除指定属性Omit<User, "id">
Record<K, T>创建键为 K、值为 T 的对象类型Record<string, number>

示例:

typeUserUpdate=Partial<User>;// 更新时所有字段可选letupdate:UserUpdate={name:"New Name"};// OK,只改 nametypeUserBasic=Pick<User,"name"|"age">;letbasic:UserBasic={name:"Alice",age:30};
9. 对象 vs Map
场景推荐使用
键为字符串,结构固定对象 + interface
键为任意类型(对象、Symbol)Map<K, V>
需要动态添加属性对象 + 索引签名 或 Map
10. 最佳实践建议
建议说明
始终为对象定义接口或 type提升可读性和安全性
可选属性用?,只读用readonly明确意图
动态对象用索引签名避免 any
使用工具类型改造对象如 Partial 用于更新函数参数
避免 any 类型对象用 unknown 或具体接口替代
开启strict模式包括noImplicitAnystrictNullChecks
小结:对象类型常见写法速查
场景推荐写法
固定结构对象interface User { name: string; age: number; }
可选/只读属性isActive?: boolean; readonly id: number;
动态键对象[key: string]: string;
更新对象Partial<User>
只取部分字段`Pick<User, “name”
排除字段Omit<User, "password">

对象是 TypeScript 中最核心的数据载体,通过接口、工具类型和类型推断的结合,能实现高度类型安全的代码。

如果您想深入某个部分(如嵌套对象对象解构与类型对象合并的高级类型、或实际项目中的对象设计),请告诉我!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/22 2:44:38

Open-AutoGLM语音功能全攻略(从零部署到生产级应用)

第一章&#xff1a;Open-AutoGLM语音功能全攻略概述Open-AutoGLM 是一款基于 AutoGLM 架构的开源语音交互框架&#xff0c;专为开发者提供灵活、高效的语音识别与合成能力。该系统支持多语言语音输入输出&#xff0c;具备低延迟响应和高准确率的特点&#xff0c;适用于智能助手…

作者头像 李华
网站建设 2026/4/27 23:00:36

零基础也能学会!Open-AutoGLM远程配置全流程,小白秒变专家

第一章&#xff1a;Open-AutoGLM远程控制概述Open-AutoGLM 是一个基于 AutoGLM 架构设计的开源远程智能控制框架&#xff0c;旨在实现跨平台、低延迟的设备管理与自动化任务执行。该系统融合了自然语言理解能力与远程操作接口&#xff0c;允许用户通过语义指令触发远程主机上的…

作者头像 李华
网站建设 2026/4/28 5:05:08

Excalidraw AI创建HR人力资源体系结构图

Excalidraw AI 创建 HR 人力资源体系结构图 在企业组织日益复杂、人员流动频繁的今天&#xff0c;如何快速、准确地呈现人力资源体系的架构与流程&#xff0c;成为 HR 团队面临的一大挑战。一张清晰的组织架构图或入职流程图&#xff0c;不只是信息展示工具&#xff0c;更是沟…

作者头像 李华
网站建设 2026/4/28 18:12:01

揭秘Open-AutoGLM核心技术:如何实现文档自动识别与结构化存储

第一章&#xff1a;揭秘Open-AutoGLM核心技术&#xff1a;如何实现文档自动识别与结构化存储Open-AutoGLM 是一款基于多模态大语言模型的智能文档处理框架&#xff0c;专注于将非结构化文档&#xff08;如PDF、扫描件、图像等&#xff09;自动识别并转化为结构化数据&#xff0…

作者头像 李华
网站建设 2026/4/23 15:42:12

SAP UI5 Cache Buster:用可版本化 URL 解决缓存失效与发布一致性问题

在讲 SAP UI5 的 Cache Buster 之前,先把问题本质讲清楚:浏览器缓存的目标是快。一旦某个静态资源被缓存(例如 sap-ui-core.js、Component-preload.js、i18n.properties、manifest.json,甚至某些 OData 元数据),下一次访问时浏览器可能直接从 memory cache 或 disk cache…

作者头像 李华
网站建设 2026/4/23 16:27:59

Excalidraw AI减少跨部门协作摩擦

Excalidraw AI&#xff1a;让跨部门协作不再“鸡同鸭讲” 在一次典型的产品评审会上&#xff0c;产品经理刚说完“我们想做个会员等级系统&#xff0c;消费越多等级越高”&#xff0c;工程师已经在白板上画出了状态转换图&#xff0c;设计师顺手标出了关键交互节点&#xff0c;…

作者头像 李华