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;

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

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

相关文章

信息系统项目管理师——第5章信息系统工程(三)

近几期的考情来看&#xff0c;本章选择题稳定考4分&#xff0c;考案例的可能性有&#xff0c;需要重点学习。本章节专业知识点特别多。但是&#xff0c;只考课本原话&#xff0c;大家一定要把本章至少通读一遍&#xff0c;还要多刷题&#xff0c;巩固重点知识。 3 系统集成 3…

初识C++之内联函数 auto关键字

初识C之内联函数 auto关键字 文章目录 初识C之内联函数 auto关键字一、 内联函数1.1 定义1.2 应用1.3 特性 二、auto关键字2.1 简介2.2 auto的详细使用2.3 范围for&#xff08;C&#xff09;2.4 注意事项 一、 内联函数 1.1 定义 以inline修饰的函数叫做内联函数&#xff0c;…

python 有哪些函数

Python内置的函数及其用法。为了方便记忆&#xff0c;已经有很多开发者将这些内置函数进行了如下分类&#xff1a; 数学运算(7个) 类型转换(24个) 序列操作(8个) 对象操作(7个) 反射操作(8个) 变量操作(2个) 交互操作(2个) 文件操作(1个) 编译执行(4个) 装饰器(3个) …

linux进阶篇:文件查找的利器——grep命令+管道操作详解

Linux文件查找的利器——grep命令管道操作详解 1 grep简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具&#xff0c;它能使用正则表达式搜索文本&#xff0c;并把匹配的行打印出来。 Uni…

Web 前端性能优化之六:构建优化

5、渲染优化 如果把浏览器呈现页面的整个过程一分为二&#xff0c;前面章节所讨论的诸如图像资源优化、加载优化&#xff0c;以及构建中如何压缩资源大小等&#xff0c;都可视为浏览器为呈现页面请求所需资源的部分&#xff1b;本章将主要关注浏览器获取到资源后&#xff0c;进…

【Linux】tcpdump P3 - 过滤和组织返回信息

文章目录 基于TCP标志的过滤器格式化 -X/-A额外的详细选项按协议(udp/tcp)过滤低详细输出 -q时间戳选项 本文继续展示帮助你过滤和组织tcpdump返回信息的功能。 基于TCP标志的过滤器 可以根据各种TCP标志来过滤TCP流量。这里是一个基于tcp-ack标志进行过滤的例子。 # tcpdump…

【汇编语言实战】求两组给定数组最大值

C语言描述该程序流程&#xff1a; #include <stdio.h> int main() {int arr1[]{11,33,23,542,12233,5443,267,456,234,453};int arr2[]{21,123,432,45,234,534,6517,678,879,1};int maxarr1[0];for(int i1;i<10;i){if(arr1[i]>max){maxarr1[i];}}printf("%d\…

团结引擎+OpenHarmony 2 xlua编译篇

文章目录 前言一、下载 xlua 源码二、OpenHarmony SDK三、开干 前言 提示&#xff1a;我们的 app 鸿蒙化过程 需要用到 xlua ,目前没有适配 OpenHarmony 平台&#xff0c;所以需要重新编译一下。编译有多种方式&#xff0c;但是我只会这一种 就是使用 cmake。 一、下载 xlua 源…

循环神经网络简介

卷积神经网络相当于人类的视觉&#xff0c;但是它并没有记忆能力&#xff0c;所以它只能处理一种特定的视觉任务&#xff0c;没办法根据以前的记忆来处理新的任务。比如&#xff0c;在一场电影中推断下一个时间点的场景&#xff0c;这个时候仅依赖于现在的场景还不够&#xff0…

C语言进阶|顺序表

✈顺序表的概念及结构 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使 用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串.. 线性表在逻辑上是线性结构&#xff0c;也就说是连…

cog predict docker unknown flag: --file

如图&#xff1a; 使用cog predict -i image“link-to-image” 出现docker unknown flag: --file的问题。 解决方法&#xff08;对我可行&#xff09;&#xff1a;切换cog版本。 这个是我一开始的cog安装命令&#xff08;大概是下的最新版&#xff1f;&#xff09;&#xff1…

自用---

零、环境配置 keil代码补全 keil pack包 cubemx配置安装包 一、LED cubemx配置PD2引脚为输出模式 uint16_t led_value 0x00; void led_set(uint8_t led_dis) {HAL_GPIO_WritePin(GPIOC,GPIO_PIN_All,GPIO_PIN_SET);HAL_GPIO_WritePin(GPIOC,led_dis<<8,GPIO_PIN_R…

vue3新手笔记

setup&#xff08;&#xff09;{}函数&#xff0c;是启动页面后&#xff0c;自动执行的一个函数。所有数据&#xff08;常量、变量&#xff09;、函数等等&#xff0c;都要return 出去。 ref函数&#xff1a;让页面上的数据响应式更新&#xff0c;不需要刷新页面&#xff1f; 对…

Docker篇(二)— Docker架构介绍

目录 一、Docker和虚拟机的区别二、Docker架构镜像和容器DockerHubDocker架构 小结 一、Docker和虚拟机的区别 Docker可以让一个应用在任何操作系统中非常方便的运行。而以前我们接触的虚拟机&#xff0c;也能在一个操作系统中&#xff0c;运行另外一个操作系统&#xff0c;保…

【GN】《Group Normalization》

ECCV-2018 Facebook AI Research 更多论文解读&#xff0c;可参考【Paper Reading】 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metrics5.2 Image Classification in ImageNet5.3 Object Detecti…

基于李雅普诺夫稳定性分析的一阶、二阶系统MATLAB仿真模型

李雅普诺夫稳定性定理 假设系统状态方程&#xff1a; 零状态为其平衡状态&#xff0c;即f(0,t)0 t&#xff1e;t0。如果存在一个具有连续的一阶偏导数的标量函数V (x,t)&#xff0c;并且满足下述条件&#xff1a; 1、V (x,t)是正定的&#xff1b; 2、沿状态方程轨线的V (x…

使用 nginx 服务器部署Vue项目

安装nginx 文本代理服务器 centos下载 注意需要root权限 在CentOS服务器上下载Nginx可以通过以下步骤完成&#xff1a; 更新系统软件包列表&#xff1a; yum update 安装EPEL存储库&#xff08;Extra Packages for Enterprise Linux&#xff09;&#xff1a; yum install…

利用Flexbox和Margin实现智能布局:如何巧妙分配剩余空间,让你的网页设计更上一层楼?

1、演示 2、flex布局 Flex布局是一种用于Web开发的弹性盒子布局模型&#xff0c;它可以让容器内的子元素在空间分配、对齐和排列方面具有更大的灵活性。以下是Flex布局的基本用法&#xff1a; 容器属性&#xff1a; display: flex;&#xff1a;将容器指定为Flex布局。flex-dire…

POP3的要点:查看电子邮件需要知道什么

在您点击阅读时&#xff0c;是否曾想过您是如何如此轻松地查看电子邮件的&#xff1f;对我们来说&#xff0c;这听起来可能只是几秒钟的加载时间&#xff0c;但实际上幕后发生了许多事情。邮局协议&#xff08;POP3&#xff09;是一种应用层协议&#xff0c;电子邮件客户端使用…

恒创科技:香港服务器CPU核心数如何选?越多越好吗?

​  谈到 CPU“核心”是完成所有处理的组件&#xff0c;程序能否顺利运行的第一因素是你有多少个核心。但由于不同的计算任务占用不同的资源&#xff0c;所以如果您打算简单地创建小型网站或者其他请求处理数据也不高的业务&#xff0c;那么您的基本型号应该包含 1、2 核已经…