TypeScript 中的对象类型:深入理解接口和类型别名

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。

在 TypeScript 中,对象是键值对的集合,每个键都是一个字符串(或符号),每个值可以是任何类型。TypeScript 提供了强大的类型系统,允许开发者定义对象的结构,从而提高代码的可读性和可维护性。

对象类型注解

在 TypeScript 中,你可以使用冒号 : 后跟类型来为对象添加类型注解。

let person: { name: string; age: number } = {name: "Alice",age: 30
};

在这个例子中,person 对象被注解为具有 name 属性(类型为 string)和 age 属性(类型为 number)。

接口

接口(interface)是 TypeScript 中定义对象类型的一种方式。接口允许你定义一个对象的形状,即它应该具有哪些属性以及这些属性的类型。

interface Person {name: string;age: number;
}let person: Person = {name: "Alice",age: 30
};

在这个例子中,Person 接口定义了一个对象的形状,然后我们创建了一个符合这个形状的对象。

类型别名

类型别名(type)是另一种定义对象类型的方式。类型别名允许你为类型定义一个新的名字。

type Person = {name: string;age: number;
};let person: Person = {name: "Alice",age: 30
};

在这个例子中,Person 类型别名定义了一个对象的形状,然后我们创建了一个符合这个形状的对象。

可选属性

在接口和类型别名中,你可以使用 ? 来标记一个属性是可选的。

interface Person {name: string;age?: number;
}let person: Person = {name: "Alice"
};

在这个例子中,age 属性是可选的,因此我们可以创建一个没有 age 属性的对象。

只读属性

在接口和类型别名中,你可以使用 readonly 关键字来标记一个属性是只读的。

interface Person {readonly name: string;age: number;
}let person: Person = {name: "Alice",age: 30
};person.name = "Bob"; // 错误,因为 name 属性是只读的

在这个例子中,name 属性是只读的,因此我们不能修改它的值。

索引签名

在接口和类型别名中,你可以使用索引签名来定义对象的索引类型。

interface StringArray {[index: number]: string;
}let colors: StringArray = ["red", "green", "blue"];

在这个例子中,StringArray 接口定义了一个索引签名,表示这个对象是一个字符串数组。

结论

在 TypeScript 中,对象是键值对的集合,每个键都是一个字符串(或符号),每个值可以是任何类型。TypeScript 提供了接口和类型别名等工具,允许开发者定义对象的结构,从而提高代码的可读性和可维护性。通过使用 TypeScript,开发者可以创建更强大和灵活的代码,从而提高生产力和代码质量。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/69397.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java基础】序列化、反序列化和不可变类

Hi~!这里是奋斗的明志,很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~~ 🌱🌱个人主页:奋斗的明志 🌱🌱所属专栏:Java基础面经 📚本系列文章为个…

吴恩达深度学习——卷积神经网络的特殊应用

内容来自https://www.bilibili.com/video/BV1FT4y1E74V,仅为本人学习使用。 文章目录 人脸识别相关定义Similarity函数使用Siamese网络实现函数d使用Triplet损失学习参数 神经风格迁移深度卷积网络可视化神经风格迁移的代价函数内容损失函数风格损失函数 人脸识别 …

搭建linux qt5.6环境

文章目录 准备工作步骤测试 准备工作 1、linux虚拟机环境 2、linux qt安装包相关文件,本文采用压缩包方式 步骤 1)启动虚拟机并登入 2)打开linux终端命令行,ifconfig获取当前linux环境的ip 3)使用WinSCP设置好ip、…

C++ 使用CURL开源库实现Http/Https的get/post请求进行字串和文件传输

CURL开源库介绍 CURL 是一个功能强大的开源库,用于在各种平台上进行网络数据传输。它支持众多的网络协议,像 HTTP、HTTPS、FTP、SMTP 等,能让开发者方便地在程序里实现与远程服务器的通信。 CURL 可以在 Windows、Linux、macOS 等多种操作系…

【产品小白】用户调研的需求是否都采纳?

在用户调研中,并非所有需求都应被直接采纳,而应通过系统分析转化为符合产品战略的有效决策。以下是关键思考框架: 1. 用户需求 ≠ 产品需求 矛盾性:用户个体需求可能相互冲突(如A功能的去留),需…

如何导入第三方sdk | 引入第三方jar 包

0. 背景1. 上传私有仓库2. 使用本地文件系统 0. 背景 对接一些第三方功能,会拿到第三方的sdk,也就是jar包,如何导入呢 1. 上传私有仓库 最好的方式就是将第三方jar包,上传到私有的仓库,这样直接正常在pom引用即可如果只…

基础入门-网站协议身份鉴权OAuth2安全Token令牌JWT值Authirization标头

知识点: 1、网站协议-http/https安全差异(抓包) 2、身份鉴权-HTTP头&OAuth2&JWT&Token 一、演示案例-网站协议-http&https-安全测试差异性 1、加密方式 HTTP:使用明文传输,数据在传输过程中可以被…

07苍穹外卖之redis缓存商品、购物车(redis案例缓存实现)

课程内容 缓存菜品 缓存套餐 添加购物车 查看购物车 清空购物车 功能实现:缓存商品、购物车 效果图: 1. 缓存菜品 1.1 问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压…

DeepSeek-R1 本地大模型搭建对接API

DeepSeek-R1 在这里将学到很多知识 欢迎使用使用DeepSeek-R1本地大模型DeepSeek 的模型基础说明DeepSeek的本地 API 说明DeepSeek 本地模型搭建1、执行命令安装及测试 DeepSeek-R1 API接口调用当然,我们为了让用户更加便捷,我们把API 接口全部放到上面截…

【0404】Postgres内 实现分配一个新的 Object ID (OID)

文章目录 1. 分配一个新 Object ID (OID)1.1 ShmemVariableCache 中 nextOid1.2 写一个 NEXTOID log record1. 分配一个新 Object ID (OID) Postgres内核中分配一个新的 Oid 是由函数 GetNewObjectId() 实现。该函数声明于 transam.h,实现于 varsup.c 源文件。 对于 GetNewO…

250207-MacOS修改Ollama模型下载及运行的路径

在 macOS 上,Ollama 默认将模型存储在 ~/.ollama/models 目录。如果您希望更改模型的存储路径,可以通过设置环境变量 OLLAMA_MODELS 来实现。具体步骤如下: 选择新的模型存储目录:首先,确定您希望存储模型的目标目录路…

Ubuntu20.4软件应用打不开

安装 snap-store: 确保 Snap 已安装: Snap 是一个包管理系统,需要先确保 snapd 已经安装。如果系统中没有安装,可以通过以下命令来安装 Snap: sudo apt update sudo apt install snapd安装 snap-store: 使…

深入解析:React 事件处理的秘密与高效实践

在 React 中,事件处理是构建交互式应用的核心。本文将带你深入探索 React 事件处理的机制、最佳实践以及如何避免常见陷阱,助你写出更高效、更健壮的代码。 1. React 事件处理的独特之处 合成事件(SyntheticEvent) React 使用合…

单片机之基本元器件的工作原理

一、二极管 二极管的工作原理 二极管是一种由P型半导体和N型半导体结合形成的PN结器件,具有单向导电性。 1. PN结形成 P型半导体:掺入三价元素,形成空穴作为多数载流子。N型半导体:掺入五价元素,形成自由电子作为多…

CNN 卷积神经网络处理图片任务 | PyTorch 深度学习实战

前一篇文章,学习率调整策略 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started CNN 卷积神经网络 CNN什么是卷积工作原理深度学习的卷积运算提取特征不同特征核的效果比较卷积核感受野共享权重池化 示例源码 …

3.1 学习UVM中的uvm_component类分为几步?

文章目录 前言一、定义1.1 角色和功能:1.2 与其他UVM类的区别:1.3 主要属性和方法: 二、使用方法2.1 定义和实例化:2.2 生命周期管理:2.3 组件间通信: 三、何时使用3.1 使用场景3.2 适用组件3.3 与uvm_obje…

谷云科技RestCloud全面接入DeepSeek 开启智能新时代

在数字化转型的浪潮中,谷云科技始终走在数据集成与智能应用领域的前沿。近期,随着 DeepSeek 的火爆出圈,谷云科技紧跟技术趋势,对旗下两大核心产品 —— 数据集成软件 ETLCloud 和 AI Agent 智能体构建平台进行了重大升级&#xf…

Kafka 入门与实战

一、Kafka 基础 1.1 创建topic kafka-topics.bat --bootstrap-server localhost:9092 --topic test --create 1.2 查看消费者偏移量位置 kafka-consumer-groups.bat --bootstrap-server localhost:9092 --describe --group test 1.3 消息的生产与发送 #生产者 kafka-cons…

FFmpeg 与 FFplay 参数详解:-f、-pix_fmt、-pixel_format 和 -video_size 的区别与用法

FFmpeg 与 FFplay 参数详解:-f、-pix_fmt、-pixel_format 和 -video_size 的区别与用法 在使用 FFmpeg 和 FFplay 进行视频处理和播放时,-f、-pix_fmt、-pixel_format 和 -video_size 是常用的参数。这些参数的作用和使用场景略有不同,理解它们的区别和用法对于正确处理和播…

即时通讯开源项目OpenIM配置离线推送全攻略

如何进行二次开发 如果您需要基于 OpenIM 开发新特性,首先要确定是针对业务侧还是即时通讯核心逻辑。 由于 OpenIM 系统本身已经做好了比较多的抽象,大部分聊天的功能已经具备了,不建议修改 IM 本身。 如果需要增加 IM 的能力,可以…