【前端vue3】TypeScrip-interface(接口)和对象类型

对象类型

定义对象需要用到interface(接口),主要用来约束数据的类型满足格式

定义方式如下:

interface Person {
    name: string;
    age: number;
}

如对象中与接口中的属性不一致会报错,必须保持一致
例如如下:

interface Person {
    name: string;
    age: number;
}

const person: Person = {
    name:"小C学安全"
}
//会提示类型 "{ name: string; }" 中缺少属性 "age",但类型 "Person" 中需要该属性。ts(2741)

接口的重合和继承

重合interface,可以合并两个相同对象名的属性
例如:

interface Person {
    name: string;
}
interface Person {
    age: number;
}
const person: Person = {
    name:"小C学安全",
    age: 20
}

继承interface,例如对象A可以继承对象B的属性
例如:

interface PersonA {
    name: string;
}
interface PersonB extends PersonA {
    age: number;
}
const person: PersonB = {
    name:"小C学安全",
    age: 20
}

可选属性

可选属性就是该属性是可以不存在的
例如:

interface PersonA {
    name: string;
    age?: number;
}

const person: PersonA = {
    name:"小C学安全",
}
//这样写是不会报错的

也可以这么写
interface PersonA {
    name: string;
    age?: number;

}

const person: PersonA = {
    name:"小C学安全",
    age: 20
}

任意属性

定义方式: [propName: string]

interface PersonA {
    name: string;
    age?: number; //定义可选属性
    [propName: string]:any; //定义任意属性

}

const person: PersonA = {
    name:"小C学安全",
    age: 20,
    city: "北京"
}

以上代码中,PersonA并没有定义属性city,但是代码没有报错,是因为我们定义了任意属性

只读属性

只读属性是只能读取,但是不允许被赋值修改的
定义方式:在属性前加上readonly
例如:

interface PersonA {
    readonly name: string;
    age?: number; //定义可选属性
    [propName: string]:any; //定义任意属性


}

const person: PersonA = {
    name:"小C学安全",
    age: 20,
    city: "北京"
}

person.name= "小白"

以上代码就会报错,会提示:

无法为“name”赋值,因为它是只读属性。ts(2540)

添加函数

可以给对象属性添加函数
例如:

interface PersonA {
    readonly name: string;
    age?: number; //定义可选属性
    [propName: string]:any; //定义任意属性
    test : ()=>void; // 定义函数
}

const person: PersonA = {
    name:"小C学安全",
    age: 20,
    city: "北京",
    test: ()=>{
        console.log("定义函数成功")
    }
}

person.test()

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

湖北建筑施工特种作业人员建筑起重信号司索工:年薪多少?

"湖北建筑施工特种作业人员建筑起重信号司索工:年薪多少?前景如何?" 2024湖北建筑施工特种作业人员建筑起重信号司索工 2024年湖北省建筑施工特种作业人员中的建筑起重信号司索工,是一项关键的工种,其在建筑…

让我来告诉初学者到底什么叫嵌入式系统?

在开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!!我们在刚刚开始学习电子学…

智慧校园的含义是什么

智慧校园,这一概念深深植根于现代科技土壤之中,是由人工智能、大数据、云计算等前沿技术深度融合所催生的教育领域革新典范。它不仅仅是一个物理空间,而是一个集成了智能感知、个性化服务、教育资源优化、未来教学模式、高效管理、便捷生活服…

用全志T113做了块多功能卡片电脑,成本只要60块

FunnyPi-T113是一款基于全志T113-S3/D1S处理器的完全开源多功能开发板,设计FunnyPi最初的目的是想借此T113卡片电脑来满足日常学习,并结合T113高效能和低功耗的特点,来满足像语音助手,智能家居屏幕、桌面摆件屏、博客服务器等嵌入…

【前端】[vue3] [uni-app] 组件样式击穿:deep

我是在开发uni-app时测试的思路,大家可以借鉴一下。 我这边测试的是uni组件,但是我觉得即便你用element-plus之类的,样式击穿的思路都相同。 我自定义了一个全局样式scss文件,并引入到了项目中。(如图) 利用vue3 中的 deep 方式…

极狐GitLab落户香港科学园并成功发布AI产品驭码CodeRider国际版

GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab :https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署…

虚函数 虚表指针

虚函数表和虚表指针 1,虚函数的含义 用virtual声明类的成员函数称之为虚函数 2,作用 用于实现多态 存在继承关系,子类继承父类 子类重写了父类的virtual function 子类以父类的指针或者引用的身份出现 3,虚函数的实现原理 其中的…

html渲染的文字样式大小不统一解决方案

React Hooks 封装可粘贴图片的输入框组件(wangeditor)_react 支持图片拖拽的输入框-CSDN博客 这篇文章中的wangediter可粘贴图片的输入框,输入的文字和粘贴的文字在dangerouslySetInnerHTML渲染后出现了字体不统一的情况 在html中右键检查可…

openppp2 控制台回显窗口输出内容详解

本文介绍 openppp2 的控制窗口回显内容,以LINUX平台为例子,其它平台大同小异,区别只是多了一些额外的输出选项内容,本文会在下面补充。 在本文开始之前请查阅关联内容:openppp2 命令行接口详解-CSDN博客 控制台客户端…

自学鸿蒙HarmonyOS的ArkTS语言<三>路由跳转及传参

【官方文档传送门】 一、导入模块 import router from ohos.router二、新增页面配置 三、常用api 1、跳转到应用内的指定页面 build() {Row() {Button(下一页).onClick(() > {router.pushUrl({url: pages/Index2,params: {name: test}})})}.height(100%)}2、用应用内的某…

大模型如何改变世界?李彦宏:未来至少一半人要学会“提问题“

2023年爆火的大模型,对我们来说意味着什么? 百度创始人、董事长兼CEO李彦宏认为,“大模型即将改变世界。” 5月26日,李彦宏参加了在北京举办的2023中关村论坛,发表了题为《大模型改变世界》的演讲。李彦宏认为&#…

Transformer中的Self-Attention和Multi-Head Attention

2017 Google 在Computation and Language发表 当时主要针对于自然语言处理(之前的RNN模型记忆长度有限且无法并行化,只有计算完ti时刻后的数据才能计算ti1时刻的数据,但Transformer都可以做到) 文章提出Self-Attention概念&…

LeYOLO 用于目标检测的新型可扩展和高效CNN架构 | 最新轻量化SOTA! 5GFLOP下无对手!

本改进已集成到 YOLOv8-Magic 框架。 论文地址:https://arxiv.org/pdf/2406.14239 代码地址:https://github.com/LilianHollard/LeYOLO/tree/main 在深度神经网络中,计算效率对于目标检测至关重要,尤其是在新型模型更倾向于速度而非计算效率(浮点运算次数,FLOP)的情况下…

Transformer1--self attention

目录 一、 Vector set as 输入二、 模型输出(三种)1 **n-to-n**2 n-to-13 n-to-m 三、self-attention1、问题引入2、self-attention3 self-attention 原理介绍 一、 Vector set as 输入 一段声音讯号: 图结构(graph)…

店员顾客起纠纷?EasyCVR+AI视频监控管理平台,助力连锁门店安全运营

近日,某品牌咖啡店店员与顾客起冲突登上了新闻热搜,一时间引发大量关注。随着门店完整的监控视频录像公开,大家才了解事情的原委,而并非网传的那样。 随着社会的进步和科技的发展,视频监控已成为各行各业不可或缺的安全…

红军九大技战法

一、动态对抗,线上社工持续信息追踪 发起攻击前,发起攻击前,尽可能多的搜集攻击目标信息,做到知己知彼,直击目标最脆弱的地方。攻击者搜集关于目标组织的人员信息、组织架构、网络资产、技术框架及安全措施信息&#x…

一分钟了解中小企业数字化转型如何进行?「建议收藏」

关于“中小企业数字化转型方法论”,其实网上已经有不少文章给出了一些方式方法,那么这里我再系统性的讲解一下。 一、中小企业为什么要实现数字化转型 首先要知道,中小企业为什么要实现数字化转型?当前,世界经济数字化…

社区团购系统智慧门店物流配送系统开发,支持小程序公众号。

目录 前言: 一、为什么要做社区团购小程序? 二、怎么做一个社区团购小程序? 三、制作属于自己的社区团购小程序有什么好处? 总结: 前言: 社区团购是针对小区居民或群体开发的在线购物平台,…

深入解析 Python dataclass:类属性与类方法解释

文章目录 dataclass实例属性和类属性自动设置属性 实例方法静态方法(staticmethod)和 类方法(classmethod)静态方法类方法 dataclass dataclass 是 Python 3.7 引入的一个装饰器,用于简化类的定义。 使用 dataclass …

AcWing 1801:蹄子剪刀布 ← 模拟题

【题目来源】https://www.acwing.com/problem/content/1803/【题目描述】 你可能听说过“石头剪刀布”的游戏。 这个游戏在牛当中同样流行,它们称之为“蹄子剪刀布”。 游戏的规则非常简单,两头牛相互对抗,数到三之后各出一个表示蹄子&#x…