news 2026/8/30 1:26:17

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/8/29 2:05:22

基于Web的智能家教服务平台设计与实现-计算机毕业设计源码+LW文档

摘 要 在智能家教服务平台的运营实践中&#xff0c;智能化的管理方式相较于传统的手工管理手段&#xff0c;其优势显得尤为突出。它不仅大幅度削减了运营所需的人力资源成本&#xff0c;还有力地推动了网站管理向标准化、制度化和程序化的方向迈进&#xff0c;从而有效杜绝了管…

作者头像 李华
网站建设 2026/8/28 22:59:37

Open-AutoGLM异地设备协同管理实战(20年专家私藏方案曝光)

第一章&#xff1a;Open-AutoGLM异地设备管理核心理念Open-AutoGLM 是一种面向分布式环境的智能设备管理框架&#xff0c;专为跨地域、多终端的自动化运维场景设计。其核心理念在于通过统一的语义理解与指令生成机制&#xff0c;实现自然语言到设备操作的无缝映射&#xff0c;降…

作者头像 李华
网站建设 2026/8/29 19:37:49

在Bug爆发前“排雷”:预防性测试

在快速迭代的软件开发世界中&#xff0c;Bug的爆发往往像一场突如其来的风暴&#xff0c;轻则导致用户抱怨&#xff0c;重则引发系统崩溃和业务损失。传统的测试方法侧重于在代码完成后进行检测和修复&#xff0c;但这常被视为“事后救火”&#xff0c;成本高且效率低。相比之下…

作者头像 李华
网站建设 2026/8/29 15:21:58

你真的懂Open-AutoGLM回滚吗?:从原理到实操的4层防护体系构建

第一章&#xff1a;你真的懂Open-AutoGLM回滚吗&#xff1f;在持续集成与模型部署实践中&#xff0c;Open-AutoGLM 的版本控制机制常被忽视&#xff0c;而回滚操作正是保障系统稳定性的关键防线。当新版本模型引发推理异常或服务延迟时&#xff0c;能否快速、准确地执行回滚&am…

作者头像 李华
网站建设 2026/8/29 17:29:04

毕业设计 yolo深度学习动物识别

文章目录 0 前言1 深度学习实现动物识别与检测2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存…

作者头像 李华
网站建设 2026/8/30 1:14:11

31、SharePoint Web Parts 开发全解析

SharePoint Web Parts 开发全解析 1. Silverlight Web Parts 简介 Silverlight Web Parts 能为用户提供更丰富的界面体验。幸运的是,我们无需编写大量自定义代码来创建此类 Web Part,因为微软发布了项目扩展,其中包含 Web Part 模板。该扩展及相关文档可从 MSDN Code Gal…

作者头像 李华