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,一经查实,立即删除!

相关文章

安装 FFmpeg

安装 FFmpeg 1. Install FFmpeg On Ubuntu2. Install FFmpeg On Ubuntu 16.042.1. First add the repository2.2. Update the newly added repository2.3. Now install the ffmpeg2.4. For opening the ffmpeg for that type ffpmeg on the terminal 3. Uninstall ffmpegRefere…

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

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

Web刷题记录——购物车

一、代码及解题思路 1、添加方法 &#xff08;1&#xff09;逻辑 a、需要判断本次添加的商品是否存在于购物车中【根据id值是否相等判断】 b、如果不存在&#xff0c;即设置num1&#xff0c;并追加本次商品 c、如果存在&#xff0c;即只需设置数值1 【注意】 &#xff1a;这里…

【Keil5-调试】

Keil5-调试 ■ 好的链接■ watch窗口中&#xff0c;变量值不会刷新■ 当选择了非0级优化时■■ ■ 好的链接 参考地址&#xff1a; debug ■ watch窗口中&#xff0c;变量值不会刷新 有时候在watch窗口中&#xff0c;变量值不会刷新&#xff0c;这时候就需要查看一下"V…

2820: 【算法思想】【双指针】长按键入

题目描述 你的朋友正在使用键盘输入他的名字 name。偶尔&#xff0c;在键入字符 c 时&#xff0c;按键可能会被长按&#xff0c;而字符可能被输入 1 次或多次。你将会检查键盘输入的字符 typed。如果它对应的可能是你的朋友的名字&#xff08;其中一些字符可能被长按&#xff…

初识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…

Linux swapoff命令教程:如何正确使用swapoff命令(附实例详解和注意事项)

Linux swapoff命令介绍 swapoff是一个用于在Linux系统中停用交换空间的命令。当系统的物理内存&#xff08;RAM&#xff09;达到其最大容量时&#xff0c;Linux会使用交换空间。如果系统需要更多的内存&#xff0c;而RAM不足&#xff0c;那么内存中的非活动页面会被移动到交换…

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

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…

Spring-boot context.initializer.classes 配置的使用

在Spring Boot中&#xff0c;context.initializer.classes是一个属性&#xff0c;允许你在application.properties或application.yml配置文件中指定一个或多个实现ApplicationContextInitializer接口的类。这些类可以在Spring应用上下文初始化之前执行一些自定义的初始化逻辑。…

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;保…