vue3第三十四节(TS 之 interface 与 type 的异同)

1、interface 接口只能定义描述对象类型

如:

interface PersonIn {name: string;age:number;job:string;
}

// 定义函数

interface FPerson {(a: number, b:string) => void
}

2、类型别名 type则可以定义多种类型

如:

type userName = string 
type isShow = boolean
type age = number | string
type lists = [string] // 声明元组类型
type Tree<T> = {name: T} // 定义泛型
type PersonT = { // 定义对象name: string;age: number | string;job: string;
}
// 定义函数
type Fun1 = (a:string, b:number) => void

由上可见 type 可以定义基本类型别名、元组类型,type 支持联合类型,交叉类型,对象 函数
而 interface 只能定义 对象 函数

3、interface 与 type 定义同名类型时

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

interface 定义的 两个Person 同名,会自动合并为

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

但是 type 定义 相同名称 Person 时会 报错

type Person = {age: number;
}
// 会报错
type Person = {name: string;
}

4、interface 与 type 都可以继承

interface 继承使用的 extends

iterface PersonA {name: string;
}

interface 继承 interface

interface PersonB extends PersonA{age: number;
}

interface 继承 type

interface PersonB extends PersonA {job: string;
}

type 继承, 使用的是 & 符号

type PersonA  = {age: number;
}

type 继承 type

type PersonB = PersonA &  {name: string; job:string;}

type 继承 interface

interface Person {name: string;
}
type PersonB =  PersonA & Person

5、type 与 interface 检查规则不同

type Person = {name: string;age: number;
}

// type 定义的类型别名,只要包含部分就不会报错

const per:Person = {name: 'Andy'
}

interface 定义的接口类型,必须包含所有必选项属性,可以没有job类型,因job类型是可选项

interface PersonA {name: string;age: number;job?:string;
}const perB:PersonA = {name: 'Andy',age: 20
}

官网推荐我们要使用interface定义接口类型,并且interface可以满足绝多数场景使用,并会严格检查定义的描述对象是否符合接口类型,有助于提高代码质量规范编码,但是type的容错率更高,对于复杂的对象,可以使用type声明多种类型

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

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

相关文章

DeepDriving | CUDA编程-02: 初识CUDA编程

本文来源公众号“DeepDriving”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;CUDA编程-02&#xff1a; 初识CUDA编程 上一篇文章DeepDriving | CUDA编程-01&#xff1a; 搭建CUDA编程环境-CSDN博客介绍了如何搭建CUDA编程环境&a…

选择、快排、堆排序、归并

选择排序 排序的核心是&#xff1a;在未排序的序列中&#xff0c;把未排序第一个元素和未排序的最小元素交换位置。 因此&#xff0c;设计时&#xff0c;显然要设置两重 for 循环 假设未排序的第一个元素称为 a &#xff0c; 未排序的最小元素称为 b 第一重 for 循环控制总…

web压力测试,要不要过滤掉JS,CSS等请求?

在进行性能测试&#xff08;压测&#xff09;时&#xff0c;是否过滤掉对JavaScript、CSS等静态资源的请求&#xff0c;取决于你测试的目标和目的。 是测试服务端的性能还是前端的性能。这两种目的所涉及到的测试场景和工具等方法是不一样的。 一般的web产品&#xff0c;像cs…

java 8--Lambda表达式,Stream流

目录 Lambda表达式 Lambda表达式的由来 Lambda表达式简介 Lambda表达式的结构 Stream流 什么是Stream流&#xff1f; 什么是流呢&#xff1f; Stream流操作 中间操作 终端操作 Lambda表达式 Lambda表达式的由来 Java是面向对象语言&#xff0c;除了部分简单数据类型…

利用kubeadm安装k8s集群 以及跟harbor私有仓库下载镜像

目录 环境准备 master&#xff08;2C/4G&#xff09; 192.168.88.3 docker、kubeadm、kubelet、kubectl、flannel node01&#xff08;2C/2G&#xff09; 192.168.88.4 docker、kubeadm、kubelet、kubectl、flannel node02&#xff08;…

2024中青杯数学建模竞赛B题药物属性预测思路代码论文分享

2024年中青杯数学建模竞赛B题论文和代码已完成&#xff0c;代码为B题全部问题的代码&#xff0c;论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&#xff08;问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解&#xff09;、模型…

QT调用Tinyxml2库解析XML结构文件

在学习SVG结构的时候&#xff0c;发现SVG结构可以通过以XML文件直接解析&#xff0c;所以就去了解了Tinyxml2库的使用&#xff0c;相关教程也比较多。 个人感觉Tinyxml2库比官方的XML解析库更好用&#xff0c;这里做个技术总结&#xff0c;记录Tinyxml2库解析XML文件结构的简单…

【Linux取经路】一个简单的日志模块

文章目录 一、可变参数的使用二、Log2.1 日志打印2.1.1 时间获取2.1.2 日志分块打印 2.2 打印模式选择2.3 Log 使用样例2.4 Log 完整源码 三、结语 一、可变参数的使用 int sum(int n, ...) {va_list s; // va_list 本质上就是一个指针va_start(s, n); int sum 0;while(n){su…

为什么以太网适配器不是192.168而是196.254【笔记】

为什么以太网适配器不是192.168而是196.254【笔记】 前言版权为什么以太网适配器不是192.168而是196.254最后 前言 2024-03-12 22:55:34 公开发布于 2024-5-22 00:20:35 以下内容源自《【笔记】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CS…

Linux: tools: crash: not a supported file format

这个原因是,通过比对每个format的magic数值,或者其他的信息,来看是否属于某个format,如果都不符合,就会出现这个错误。说明kernel的coredump文件,dump的有些问题。 main (argc=3, argv=0x7fffffffda88) at main.c:496 496 } else if (is_compressed…

Java高级面试精粹:问题与解答集锦(一)

Java 面试问题及答案 1. 什么是Java中的多态&#xff0c;它是如何实现的&#xff1f; 答案&#xff1a; 多态是Java中的一个核心概念&#xff0c;它允许不同类的对象对同一消息做出响应&#xff0c;但具体的行为会根据对象的实际类型而有所不同。多态主要通过以下两种方式实现…

git命令行指引

命令行指引 您还可以按照以下说明从计算机中上传现有文件。 Git 全局设置 git config --global user.name "lizhijun" git config --global user.email "oldgunqfhotmail.com"创建一个新仓库 git clone gitfiles.tfedu.net:aigk985-gaokao/Folder-watc…

计算机毕业设计 | node.js(Express)+vue影院售票商城 电影放映购物系统(附源码+论文)

1&#xff0c;绪论 1.1 项目背景 最近几年&#xff0c;我国影院企业发展迅猛&#xff0c;各大电影院不断建设新的院线&#xff0c;每年新投入使用的荧幕数目逐年显著上升。这离不开人们的观影需求及对观影的过程要求的不断进步。广大观影消费者需要知道自己的空闲时间&#x…

Django中使用Celery(通用方案、官方方案)

Django中使用Celery&#xff08;通用方案、官方方案&#xff09; 目录 Django中使用Celery&#xff08;通用方案、官方方案&#xff09;通用方案场景前置准备完整代码 Celery官方方案【1】注册celery配置【2】创建celery文件【3】init注册【4】添加任务【5】启动worker异步任务…

设计模式六大原则之依赖倒置原则

文章目录 概念逻辑关系 小结 概念 依赖倒置原则指在设计代码架构时&#xff0c;高层模块不应该依赖底层模块&#xff0c;二者都应该依赖抽象。抽象不应该依赖于细节&#xff0c;细节应该依赖于抽象。 逻辑关系 如上图所示&#xff0c;逻辑应该就是这样&#xff0c;高层依赖于…

解决Wordpress中Cravatar头像无法访问问题

一、什么是Cravatar Gravatar是WordPress母公司Automattic推出的一个公共头像服务&#xff0c;也是WordPress默认的头像服务。但因为长城防火墙的存在&#xff0c;Gravatar在中国时不时就会被墙一下&#xff0c;比如本次从2021年2月一直到8月都是不可访问状态。 在以往的时候&…

Java_IO流学习

IO流 概念 I – in – 输入(读) O – out – 输出(写) 流 – 一点一点的像水流一样去传输数据 注意&#xff1a;站在程序的角度去看待输入还是输出 分类 按照方向分流&#xff1a;输入流、输出流 按照单位分流&#xff1a;字节流、字符流 按照功能分流&#xff1a;基础流/节点…

R语言:单细胞pcoa降维和去批次

#生成随机颜色 > randomColor <- function() { paste0("#",paste0(sample(c(0:9, letters[1:6]), 6, replace TRUE),collapse "")) } # 生成100个随机颜色 > randomColors <- replicate(100,randomColor()) > seuratreadRDS("seu…

RAG系统(四)手撕基于向量检索的 RAG

RAG系统&#xff08;一&#xff09;系统介绍与向量检索 RAG系统&#xff08;二&#xff09;文档的加载与分段 RAG系统&#xff08;三&#xff09;向量数据库 完整代码需要依赖前边三章中的代码&#xff0c;本节主要展示整合后的RAG系统&#xff0c;及运行示例。 from MyVec…

前端javascript包管理,npm升级用pnpm

一 pnpm 介绍 pnpm&#xff08;Package Manager&#xff09;是一个快速、节省磁盘空间的 JavaScript 包管理器&#xff0c;它是 Node.js 生态系统中 npm 的一个替代品。pnpm 解决了传统包管理工具在处理依赖时的一些痛点&#xff0c;特别是关于存储空间使用和依赖地狱的问题。…