typescript中的type关键字和interface关键字区别

Type又叫类型别名(type alias),作用是给一个类型起一个新名字,不仅支持interface定义的对象结构,还支持基本类型、联合类型、交叉类型、元组等任何你需要手写的类型。

type num = number; // 基本类型
type stringOrNum = string | number; // 联合类型
type person = {name: string}; // 对象类型
type user = person & { age: number } // 交叉类型
type data = [string, number]; // 元组
type fun = () => void; // 函数类型

type和interface的相同点

1.都可以用来描述一个对象或者函数

interface

interface user {name: string; age:number}; // 对象
 
interface setUser {(name: string; age:number):void}; // 函数

type:

 type user = {name: string; age:number}; // 对象
 
 type setUser = (name: string; age:number):void;//函数

2.都可以进行拓展 

interface可以扩展,type可以通过交叉实现interface的extends行为,interface可以extends type,同时type也可以与interface类型交叉。

// interface通过extends实现继承
interface userName {
  name: string;
}
interface user extends userName {
  age: number
}
let stu:user = {name: 'wang', age: 10}


// interface的extends扩展可以通过type交叉(&)类型实现
type userName = {
   name: string;
}
type user = userName & {age: number}
let stu:user={name: 'wang', age: 18}


// interface扩展type
type name = {
  name: string;
}
interface user extends name {
  age: number;
}
let stu:user={name: 'wang', age: 89}


// type与interface交叉
interface name {
  name: string;
}
type user = name & {
  age: number;
}
let stu:user={name:'wang', age: 18}

type和interface的不同点

1.类型别名可以用于其它类型 (联合类型、元组类型、基本类型(原始值)),interface不支持

2.interface 可以多次定义来合并声明,type 不支持

interface user {
    name: string;
    age: number;
}
interface user {
    sex: string;
}
//user实际接口为:
{
    name: string;
    age: number;
    sex: string;
}

3.type 能使用 in 关键字生成映射类型,但 interface 不行

type keys = 'firstname' | 'surname';
 
type nameTypes = {
  [key in Keys]: string;
};
const test: nameTypes = {
  firstname: 'Pawel',
  surname: 'Grzybek',
};

4.默认导出方式不同

// inerface 支持同时声明,默认导出 而type必须先声明后导出
export default interface name {
  name: string;
};

// 同一个js模块只能存在一个默认导出
 type typeName = {name: string};
  export default typeName

5.在type中可以使用泛型

type Zoo<T> = T;
const num : Zoo<number> = 3;
 
type callback<T> = (data: T) => void;

6.type可以使用typeof获取实例类型

let div = document.createElement('div');
type divType = typeof div;

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

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

相关文章

47.HarmonyOS鸿蒙系统 App(ArkUI)创建轮播效果

创建轮播效果&#xff0c;共3页切换 Entry Component struct Index {State message: string Hello Worldprivate swiperController: SwiperController new SwiperController()build() {Swiper(this.swiperController) {Text("第一页").width(90%).height(100%).bac…

BLE架构图

PHY层(Physical layer 物理层) PHY层用来指定BLE所用的无线频段(2.4G)&#xff0c;调制解调方式和方法、跳频等。PHY层的性能直接决定整个BLE芯片的功耗、灵敏度以及selectivity等射频指标。 LL层(Link Layer 链路层) 链路层主要是对RF射频控制。链路层定义了协议栈中最为基础的…

C++解决大学课设所有管理系统(增删查改)

C一篇解决大学课设所有**管理系统(增删查改) 文章目录 C一篇解决大学课设所有**管理系统(增删查改)1.引言1.1 使用结果展示 2. 基本原理3. 文件层次结构4.具体实现(通讯录管理系统为例)4.1 通讯录实体类(addressbook.h)4.2 通讯录实现类(addressbook.cpp)4.3 通讯录管理类&…

蓝桥杯 — — 完全日期

完全日期 友情链接&#xff1a;完全日期 题目&#xff1a; 思路&#xff1a; 直接从20010101枚举到20211231&#xff0c;然后再判断每一个数是否是一个合法的日期&#xff0c;如果这个日期是合法的&#xff0c;接着判断这个日期的每一个位置上的数字之和是否是一个完全平方数…

ChatGPT 可以预测未来吗?

推荐 4月13日的一篇有趣的 paper&#xff0c;特来分享。 &#x1f449; 当前的大型语言模型&#xff08;LLMs&#xff09;具有强大的数据合成和推理能力&#xff0c;但它们在直接预测尚未发生事件的准确性上常常受到限制。传统的预测方法依赖于直接询问模型关于未来的问题。 …

linux下安装nacos2.2.0

1、获取下载地址并下载 1.1、打开nacos官网 1.2、找到对应版本&#xff0c;点进去 ## 1.3、复制地址 1.4下载 # 进入要安装的目录&#xff0c;cd /usr/local/src # 执行wget https://github.com/alibaba/nacos/releases/download/2.2.0/nacos-server-2.2.0.tar.gz2、 安装…

【产品经理修炼之道】- 平台型产品经理与业务型产品经理

从2015年开始&#xff0c;阿里的产品经理招聘分为平台型和业务型&#xff0c;后来很多互金公司逐步学习采纳了这种分工方式&#xff0c;那么什么是平台型产品经理&#xff0c;什么是业务型产品经理呢&#xff1f;先上结论&#xff1a; 平台型产品经理&#xff08;产品设计&…

loD:如何实现代码的“高内聚、低耦合“

设计模式专栏&#xff1a;http://t.csdnimg.cn/3a25S 目录 1.引用 2.何为"高内聚、低耦合" 3.LoD 的定义描述 4.定义解读与代码示例一 5.定义解读与代码示例二 1.引用 本节介绍最后一个设计原则:LoD(Law of Demeter&#xff0c;迪米特法则)。尽LoD不像SOLID、KI…

CTFshow-PWN-Test_your_nc(pwn0-pwn4)

1、pwn0 连上&#xff0c;等它程序执行完你可以直接来到 shell 界面 执行命令&#xff0c;获取 flag ctfshow{294ffc57-ee28-40ea-8c74-4dfeaf89d1e7} 2、pwn1 提供一个后门函数&#xff0c;连上即可得到flag 下载附件&#xff0c;拉进 ubantu &#xff0c;使用命令 checksec …

深度学习基础——计算量、参数量和推理时间

深度学习基础——计算量、参数量和推理时间 在深度学习中&#xff0c;计算量、参数量和推理时间是评估模型性能和效率的重要指标。本文将介绍这三个指标的定义、计算方法以及如何使用Python进行实现和可视化展示&#xff0c;以帮助读者更好地理解和评估深度学习模型。 1. 定义…

oracle 19c数据库W00n进程使用很多PGA内存资源的分析

今天&#xff0c;客户反馈测试环境的数据库PGA资源不足&#xff0c;报错ORA-04036: 实例使用的 PGA 内存超出 PGA_AGGREGATE_LIMIT&#xff1b;分析是多个W00n进程使用大量PGA-触发了BUG&#xff0c;对应解决办法就是打补丁。&#xff08;民间办法就是KILL进程、重启数据库&…

【JavaSE】搞定String类

前言 本篇会细致讲解String类的常见用法&#xff0c;让小伙伴们搞定String类~ 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 前言 常用的三种字符串构造 字符串长度length 字符串比较 比较 比较字符串的内容equals…

一个不努力学习的人是怎么过的软考高项?

首先要感谢软考方式的改革&#xff0c;如果不是机考&#xff0c;我可能也过不了&#xff0c;因为自己的笔迹实在太糟糕了。其实如果不是因为笔迹太差&#xff0c;我觉得我19年高项就过了&#xff0c;19年栽倒在论文上&#xff0c;只得了43分&#xff0c;我记忆深刻。 然后说一…

【算法】深入理解二分查找算法及其应用

文章目录 1. 朴素二分查找的基本步骤&#xff1a;2. 总结二分模板 二分查找&#xff08;Binary Search&#xff09;是一种在有序数组中查找目标值的高效算法。它的基本思想是将数组分成两半&#xff0c;然后确定目标值可能存在的那一半&#xff0c;重复这个过程直到找到目标值或…

如何进行支付功能的测试?

非现金支付时代&#xff0c;非现金支付已经成为了生活不可或缺的一部分&#xff0c;我们只需要一台手机便可走遍全国各地&#xff08;前提是支付宝&#xff0c;微信有钱<00>&#xff09;。 那么作为测试人员&#xff0c;支付测试也是非常重要的一环&#xff0c;那么下面…

隐私保护?还是安全漏洞?邮箱分身双重身份及创建攻略解析!

很多人只知道微信、QQ等应用分身&#xff0c;对于邮箱分身并不是很了解。邮箱分身和他们的不同点在于我们直接在原有邮箱的基础上创立新的虚拟邮箱地址&#xff0c;并且密码一致&#xff0c;在我们需要运营多个社交媒体账号或者管理多个项目的情况下&#xff0c;邮箱分身是一个…

IntelliJ IDEA2024 安装包(亲测可用)

目录 一、软件简介 二、软件下载 一、软件简介 IDEA&#xff08;Integrated Development Environment for Apache&#xff09; 是一款专为 Apache 开发者设计的集成开发环境。该软件提供了丰富的功能和工具&#xff0c;帮助开发者更高效地创建、调试和部署 Apache 项目。 主…

MobaXterm无法登陆oracle cloud的问题

问题 我在oracle cloud上创建实例的时候&#xff0c;只能使用密钥的方式登陆&#xff0c;当时下载了私钥文件。实例创建好以后&#xff0c;在mobaxterm上使用这个私钥文件无法登陆 排查 尝试使用mobaxterm的keygen&#xff0c;把私钥文件转成ppk格式&#xff0c;还是不行。…

【论文阅读02】一种基于双通道的水下图像增强卷积神经网络

来源&#xff1a;海洋论坛▏一种基于双通道的水下图像增强卷积神经网络 当前不会的 一、背景&#xff1a; 水下图像增强方法包含有无水下成像模型的水下图像增强方法、基于水下成像模型的水下图像恢复方法、水下成像模型与深度学习相结合的方法以及完全采用深度学习的方…