TypeScript-interface接口类型

news/2024/7/20 18:25:37/文章来源:https://blog.csdn.net/vivian_1122/article/details/139145496

interface接口类型

在TS中使用interface接口来描述对象数据的类型,常用于给对象的属性和方法添加类型约束

⚠️ 一旦注解接口类型之后对象的属性和方法类型都需要满足要求,属性不能多也不能少

interface Person {name: stringage: number
}const p: Person = {name: 'lily',age: 20
}

应用场景:

  • 前端向后端发送数据:收集表单对象数据时的类型校验

  • 前端使用后端数据:渲染后端对象数组列表时的智能提示

// 表单数据收集场景
interface LoginForm {username: stringpassword: string
}let formData: LoginForm = {username: 'hanna'password: '123456'
}
// 渲染后端列表场景
interface Goods {id: stringprice: number
}let list:Goods[] = [{id:'01',price: 100}
]list.forEach((item) => console.log(item.price))

接口的可选设置

通过对属性进行可选标注,赋值的时候该属性可以缺失,如果有值必须保证类型满足要求

interface Datas {type: stringsize?: string
}
// 不传
let data: Datas = {type:'sucess'
}// 传值必须类型匹配
let data: Datas = {type:'sucess',size:'small'
}

接口的继承

使用 extends 实现接口继承,实现类型复用

// 原价商品类型
interface GoodsType {id: stringprice: number
}
// 打折商品类型
interface DisGoodsType {id: stringprice: numberdisPrice: number
}// 使用extends
interface DisGoodsType extends GoodsType {disPrice: number
}

Demo:

{code:200,msg:'success',data: {title:'文章标题',content:'文章内容'}
}
interface Data {title: stringcontent: string
}interface ResData {code: numbermsg: stringdata: Data
}let res: ResData = {code: 200,msg:'success',data:{title:'标题',content:'内容'}
}

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

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

相关文章

Java | Leetcode Java题解之第118题杨辉三角

题目&#xff1a; 题解&#xff1a; class Solution {public List<List<Integer>> generate(int numRows) {List<List<Integer>> ret new ArrayList<List<Integer>>();for (int i 0; i < numRows; i) {List<Integer> row new…

《探索Stable Diffusion:AI绘画的创意之路与实战秘籍》

《Stable Diffusion AI 绘画从提示词到模型出图》介绍了 Stable Diffusion AI 绘画工具及其使用技巧。书中内容分为两部分&#xff1a;“基础操作篇”&#xff0c;讲解了 SD 文生图、图生图、提示词、模型、ControlNet 插件等核心技术的应用&#xff0c;帮助读者快速从新手成长…

基于C#开发web网页管理系统模板流程-主界面管理员入库和出库功能完善

前言 紧接上篇->基于C#开发web网页管理系统模板流程-主界面管理员录入和编辑功能完善-CSDN博客 本篇将完善主界面的管理员入库和出库功能&#xff0c;同样的&#xff0c;管理员入库和出库的设计套路适用于动态表的录入和编辑 首先还是介绍一下本项目将要实现的功能 &#xf…

【Oracle】PL SQL 怎么重新编译无效的对象

1.打开PL SQL &#xff0c;点击图中有红色的 2.点击齿轮按钮即可 from&#xff1a;【Oracle】PL SQL 怎么重新编译无效的对象_plsql编译无效对象的按钮在哪里-CSDN博客

openresty(Nginx) 隐藏 软包名称及版本号 升级版本

1 访问错误或者异常的URL 2 修改配置&#xff0c;重新编译&#xff0c;升级 #修改版本等 vim ./bundle/nginx-1.13.6/src/core/nginx.h #define nginx_version 1013006 #define NGINX_VERSION "1.13.6" #define NGINX_VER "openresty/&q…

C++线程任务队列模型

功能描述 实现一个任务队列&#xff0c;用于任务的执行 任务队列 任务队列可以添加、删除任务&#xff0c;实现对任务的管理添加任务后&#xff0c;任务队列可以开始执行任务队列执行任务方式为串行执行 任务 任务执行需要持续一段10s内随机的时间&#xff0c;执行过程通过…

如何批量提取pdf文件名?批量提取文件夹里的文件名,只要用对方法!

在数字化时代&#xff0c;PDF文件已经成为我们日常工作中不可或缺的一部分。然而&#xff0c;随着PDF文件数量的不断增加&#xff0c;如何高效地管理这些文件成为了一个挑战。批量提取PDF文件名&#xff0c;就是解决这一问题的关键所在。本文将为你介绍几种实用的方法&#xff…

【小呆的力学笔记】连续介质力学的知识点回顾二:应变度量

文章目录 3. 格林应变与阿尔曼西应变 3. 格林应变与阿尔曼西应变 变形体在变形前的线元 O A → \overrightarrow{OA} OA &#xff0c;在变形后变成 o a → \overrightarrow{oa} oa &#xff0c;那么应变应该度量这种线元变形前后的差别。 ∣ o a → ∣ 2 − ∣ O A → ∣ 2 …

【Qt秘籍】[004]-Qt中的重要工具-介绍

QtCreator概览 当我们打开系统的菜单翻到刚刚下载的Qt文件&#xff0c;里面的内容却让我们眼花缭乱。 不过别急&#xff0c;下面我们将一一解析。 1.Assistant Qt自带的离线版本官方文档 2.Designer Qt图形化设计界面的工具&#xff0c;通过拖拽控件快速生成界面&#xff0c…

SpirngMVC框架学习笔记(一):SpringMVC基本介绍

1 SpringMVC 特点&概述 SpringMVC 从易用性&#xff0c;效率上 比曾经流行的 Struts2 更好 SpringMVC 是 WEB 层框架&#xff0c;接管了 Web 层组件, 比如控制器, 视图, 视图解析, 返回给用户的数据格式, 同时支持 MVC 的开发模式/开发架构SpringMVC 通过注解&#xff0c;…

【DrissionPage爬虫库 1】两种模式分别爬取Gitee开源项目

文章目录 DrissionPage爬虫库简介1. 浏览器操控模式&#xff08;类似于游戏中的后台模拟鼠标键盘&#xff09;2. 数据包收发模式&#xff08;类似于游戏中的协议封包&#xff09; 实战中学习需求&#xff1a;爬取Gitee开源项目的标题与描述解决方案1&#xff1a;用数据包方式获…

[机缘参悟-191] - 《道家-水木然人间清醒1》读书笔记 -14- 关系界限 - 经济和人格上的独立,走向成熟的必经之路,才能更好的谈其他情感(IT)

目录 前言&#xff1a; 1、“友善的孤独者” 2、“外向的孤独者” 3、道不同不相为谋 4、警惕依赖 5、完整独立的个体 6、不必纠正他人的错误&#xff0c;除非他影响了你 7、不再期待别人能理解自己&#xff0c;只有高维向下兼容你的人才能理解你 8、只有高维和同频的…

基于语音识别的智能电子病历(三)之 Soniox

Soniox成立于2020年&#xff0c;目前总部位于美国加州福斯特城&#xff0c;该公司开发了市场上最好的语音识别引擎之一。该公司目前提供市面上领先的云转录引擎之一——这也是audioXpress成功用于采访和一般语音转文本转换的引擎。 专注于语音AI的Soniox在2021年推出了世界上第…

据库管理-第196期 实战RDMA(20240528)

数据库管理196期 2024-05-28 数据库管理-第196期 实战RDMA&#xff08;20240528&#xff09;1 环境2 操作系统配置3 配置NVMe over RDMA4 挂载磁盘处理并挂载磁盘&#xff1a; 5 RDMA性能测试6 iSCSI部署7 iSCSI性能测试8 性能对比总结 数据库管理-第196期 实战RDMA&#xff08…

Petalinux 制作ZYNQ镜像文件流程

1概述 在Zynq-7000 SoC中搭建运行Linux&#xff0c;嵌入式软件栈。 处理器系统引导是一个分两个阶段的过程。第一个阶段是一个内部 BootROM&#xff0c;它存储 stage-0 的引导代码。BootROM 在 CPU 0 上执行&#xff0c;CPU 1 执行等待事件&#xff08;WFE&#xff09;指令。…

【全开源】宇鹿家政系统(FastAdmin+ThinkPHP+原生微信小程序)

&#xff1a;助力家政行业数字化升级 一、引言&#xff1a;家政服务的新篇章 随着移动互联网的普及和人们生活水平的提高&#xff0c;家政服务的需求日益增长。为了满足这一市场需求&#xff0c;并推动家政行业的数字化升级&#xff0c;我们特别推出了家政小程序系统源码。这…

这款信创FTP软件,可实现安全稳定的文件传输

信创&#xff0c;即信息技术应用创新&#xff0c;2018年以来&#xff0c;受“华为、中兴事件”影响&#xff0c;国家将信创产业纳入国家战略&#xff0c;并提出了“28n”发展体系。“8”具体指金融、石油、电力、电信、交通、航空航天、医院、教育等主要行业。目前企业使用比较…

代码随想录——左叶子之和(Leetcode404)

题目链接 BFS 队列 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right)…

python mp3转mp4工具

成品UI 安装moviepy库 pip install moviepy 转换demo from moviepy.editor import *# 创建一个颜色剪辑&#xff0c;时长与音频相同 audioclip AudioFileClip(r"C:\Users\Administrator\PycharmProjects\pythonProject44\test4\赵照 - 灯塔守望人.mp3") videoclip…