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 等多种操作系…

基础入门-网站协议身份鉴权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 接口全部放到上面截…

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

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

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

一、二极管 二极管的工作原理 二极管是一种由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…

【个人开发】macbook m1 Lora微调qwen大模型

本项目参考网上各类教程整理而成,为个人学习记录。 项目github源码地址:Lora微调大模型 项目中微调模型为:qwen/Qwen1.5-4B-Chat。 去年新发布的Qwen/Qwen2.5-3B-Instruct同样也适用。 微调步骤 step0: 环境准备 conda create --name fin…

了解Linux 中 make 与 Makefile

目录 一、为什么开发者需要构建工具? 二、make/Makefile 1. Makefile基本规则 2.清理项目 三、make的工作原理 一、为什么开发者需要构建工具? 在软件开发中,我们经常面临这样的场景:一个项目包含数十个源代码文件&#xff…

win11右击显示全部

正常: 输入: reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve 重启或刷新进程 刷新: taskkill /f /im explorer.exe & start explorer.exe 成功:

Redis基础--常用数据结构的命令及底层编码

零.前置知识 关于时间复杂度,按照以下视角看待. redis整体key的个数 -- O(N)当前key对应的value中的元素个数 -- O(N)当前命令行中key的个数 -- O(1) 一.string 1.1string类型常用命令 1.2string类型内部编码 二.Hash 哈希 2.1hash类型常用命令 2.2hash类型内部编码 2.3ha…

React 设计模式:实用指南

React 提供了众多出色的特性以及丰富的设计模式,用于简化开发流程。开发者能够借助 React 组件设计模式,降低开发时间以及编码的工作量。此外,这些模式让 React 开发者能够构建出成果更显著、性能更优越的各类应用程序。 本文将会为您介绍五…

Unity扩展编辑器使用整理(一)

准备工作 在Unity工程中新建Editor文件夹存放编辑器脚本, Unity中其他的特殊文件夹可以参考官方文档链接,如下: Unity - 手册:保留文件夹名称参考 (unity3d.com) 一、菜单栏扩展 1.增加顶部菜单栏选项 使用MenuItem&#xff…

Vue3+codemirror6实现公式(规则)编辑器

实现截图 实现/带实现功能 插入标签 插入公式 提示补全 公式验证 公式计算 需要的依赖 "codemirror/autocomplete": "^6.18.4","codemirror/lang-javascript": "^6.2.2","codemirror/state": "^6.5.2","cod…