TS中类型别名和接口区别

news2024/9/24 4:24:13

在很多场景下,interface 和 type都能使用,因此两者在很多时候会被混淆:

接口可以通过之间的继承,实现多种接口的组合
使用类型别名也可以实现多种的,通过&连接,有差异:

  • 子接口中不能重新覆盖父接口中的成员,
  • 类型别名会合并,相同类型的成员进行交叉&。若一个number,一个字符串,就无法赋值。如下:
type User1= {
    name:number,

}
type User2 ={
    name:string
}

type MyUser = User1 & User2
let user:MyUser ={
    name:'zdy' 
} 

在这里插入图片描述

交叉平时用的不算很多,接口的继承用的多一些

推荐使用(接口)interface。

1.类型别名

type 会给一个类型起个新名字。 type 有时和 interface 很容易混淆,但是,不同的是,type可以作用于原始值(基本类型),联合类型,元组以及其它任何你需要手写的类型。

起别名不会新建一个类型,它创建了一个新名字来引用那个类型。给基本类型起别名作用不大,但是可以做为文档的一种形式使用.

type Name = string; // 基本类型

type NameFun = () => string; // 函数

type NameOrRFun = Name | NameFun; // 联合类型

function getName(n: NameOrRFun): Name {
    if (typeof n === 'string') {
        return n;
    } 
    return n();
}


2.接口

接口使用 interface 关键字进行定义, 在没有设置特殊标识时, 使用接口作为类型定义变量必须将接口内的属性完整定义, 不然就会报错 . 接口定义对象默认属性是可以更改的,接口相当于是一种契约

interface Person {
  name: string
  age: number
}
const person: Person = {
  name: 'a',
  age: 1
}
person.age = 2
console.log(person) // {name: 'a', age: 2}

一点小细节:

他们在约束函数时候形式有点不大一样,一个是冒号,一个是箭头

// interface
interface SetPoint {
  (x: number, y: number): void;
}

// type
type SetPoint = (x: number, y: number) => void;

接口和类型别名最大区别:
接口可以被类实现,而类型别名不可以
当然接口也可以继承类,表示类中的所有成员,都在接口中

// 火圈接口
 interface IFireShow{
    singleFire():void;
    doubleFire():void;
}

// 动物类:
abstract class Animal {
    abstract type:string;
    constructor(public name:string,public age:number){

    }
    sayHello(){
        console.log(`大家好,我是${this.name},我今年${this.age}`);
    }
}


class Lion extends Animal implements IFireShow{
    type:string = "狮子";
    singleFire(){
        console.log(`${this.name}我会喷单火圈`);
    }

    doubleFire(){
        console.log(`${this.name}我会喷双火圈`);
    }
}

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

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

相关文章

安防监控项目---boa服务器的移植

文章目录 前言一、boa服务器简介二、移植步骤三、测试结果四、A9平台移植BOA总结 前言 书接上期,在配置完成环境后,那么接下来呢还得移植两个非常关键的东西,一个呢时boa服务器,另一个呢时cgi接口,boa服务器能够使得我…

医学影像乳腺肿瘤分割的同学看过来:PDPNet:用于通用乳腺肿瘤分割的渐进式双先验网络

PDPNet:一种渐进式双先验网络,可以来从动态增强的图像中分割乳腺肿瘤,性能表现SOTA!并提高了模型的泛化能力,单位:贵州大学, 哈医大肿瘤医院, 贵州省人民医院 为了提高乳腺肿瘤分割模型的泛化能力&#xf…

中文编程工具免费版下载,中文开发语言工具免费版下载

中文编程工具免费版下载,中文开发语言工具免费版下载 中文编程工具开发的实际部分案例如下图 编程系统化课程总目录及明细,点击进入了解详情。 https://blog.csdn.net/qq_29129627/article/details/134073098?spm1001.2014.3001.5502

轻量封装WebGPU渲染系统示例<4>-CubeMap/天空盒(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/ImgCubeMap.ts 此示例渲染系统实现的特性: 1. 用户态与系统态隔离。 2. 高频调用与低频调用隔离。 3. 面向用户的易用性封装。 4. 渲染数据和渲染机制分离。 5. 用户…

【linux】文件系统+软硬连接+动静态库

文件系统软硬连接动静态库 1.理解文件系统1.1磁盘的物理结构1.2磁盘的存储结构1.3磁盘的逻辑结构1.4文件系统 2.软硬链接2.1什么是软硬链接2.2软硬链接的作用 3.动静态库3.1什么是库3.1静态库和静态链接3.2动态库和动态链接3.2.1通过环境变量找到动态库路径3.2.2把动态库拷贝到…

包含(has it)、继承(is it)

包含关系(has it) 继承关系(is it) class Person:def __init__(self, no, name, salary):self.no noself.name nameself.salary salarydef __str__(self):msg self.no "---" self.name --- self.salaryreturn m…

C++设计模式_15_Proxy 代理模式

Proxy 代理模式也是属于“接口隔离”模式,通过增加一层间接层来解决问题的模式。 文章目录 1. 动机( Motivation)2. 模式定义3. 结构( Structure )4. 代码演示Proxy 代理模式4.1 常规方法4.2 Proxy 代理模式 5. 要点总结6. 其他参考 1. 动机( Motivation) 在面向对…

4.2 数据库安全性控制

思维导图: 前言: 整体理解 计算机系统中的安全措施是层级设置的。用户首先需通过身份鉴定进入系统,然后受到多种控制和保护。 安全模型(图4.2) 用户进入计算机系统时需进行身份鉴定。合法用户进入后,数据库管理系统实施存取控制。…

17 HAP 覆盖特性与链路损耗特性分析

HAP 覆盖特性与链路损耗特性分析 HAP平台高度:17~22km之间。HAP通信业务的覆盖区域取决于覆盖区边缘至平台的仰角,仰角越小,覆盖区域越大。覆盖区内不同地点的用户至平台的距离差别也越大。HAP和终端几何关系: B:地面…

比较浮点数时,我被绊倒了

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不是…

大彩串口屏读写文件问题

分区 本文使用的是大彩串口屏M系列的: 串口屏内部有三个分区,分别为A、B、C三个区: A区:系统区,存储组态工程文件 B区:数据区,存储配置信息,记录数据、历史曲线等 C区:备…

火柴排队.

题意:给两列火柴,可以交换任意相邻的火柴,使得(ai-bi)^2的和最小,求最小交换次数。 分析:使得(ai-bi)^2的和最小,即a^2-2abb^2的和最小,那么使得2ab最大,就可…

Transformers实战(二)快速入门文本相似度、检索式对话机器人

Transformers实战(二)快速入门文本相似度、检索式对话机器人 1、文本相似度 1.1 文本相似度简介 文本匹配是一个较为宽泛的概念,基本上只要涉及到两段文本之间关系的,都可以被看作是一种文本匹配的任务, 只是在具体…

MySQL 5.7限制general_log日志大小

背景 需求: 在MySQL 5.7.41中开启general_log 并限制其大小,避免快速增长占用硬盘空间。 解决: 通过定时任务,执行简单的脚本,判断general_log 日志的大小,实现对通用查询日志的“每日备份”或“每日清…

CSS 滚动驱动动画与 @keyframes 新语法

CSS 滚动驱动动画与 keyframes 在 CSS 滚动驱动动画相关的属性出来之后, keyframes 也迎来变化. 以前, keyframes 的值可以是 from, to, 或者百分数. 现在它多了一种属性的值 <timeline-range-name> <percentage> 建议先了解 animation-range 不然你会对 timeli…

配置两个网关之间通过IPSec VPN互联并通过总部IPSec网关进行NAT后上网

规格 适用于V200R002C00及更高版本、所有形态的AR路由器。 组网需求 如图1所示&#xff0c;某企业分为总部和两个分支机构。分支机构1和分支机构2分别通过RouterB和RouterC与Internet相连。RouterA为NAT网关&#xff0c;总部RouterA和分支RouterB为固定公网地址&#xff0c;Rou…

Python正则表达式一点通

正则作为处理字符串的一个实用工具&#xff0c;在Python中经常会用到&#xff0c;比如爬虫爬取数据时常用正则来检索字符串等等。正则表达式已经内嵌在Python中&#xff0c;通过导入re模块就可以使用&#xff0c;作为刚学Python的新手大多数都听说”正则“这个术语。 今天来给…

Vue+el-image-viewer显示tiff图片,并能够切换图片中的帧

一、简述 在前端界面显示tiff图片&#xff0c;并能够点击翻页按钮切换tiff图片中的帧&#xff0c;接收到后端传来的buffer&#xff0c;在前端处理后进行展示 二、使用工具 引入Tiff.js文件&#xff0c;引入前先进行下载安装 import Tiff from tiff.js引入显示图片组件 comp…

Openssl数据安全传输平台014:OCCI的安装配置和使用:Centos8-Oracle19c代码跑通 + Window-Oracle11g代码没跑通(不影响本项目)

文章目录 0 代码仓库1 启动Centos oracle数据库2 Winsows安装配置OCCI库2.1 下载文件2.2 VS 配置2.2.1 VC包含目录2.2.2 VC库目录2.2.3 连接器-附加依赖项2.2.4 代码测试-Oracle11g2.2.4.1 准备2.2.4.2 代码测试 3 Centos安装配置occi库3.1 下载instantclient库文件压缩包3.2 w…

LeetCode:1465. 切割后面积最大的蛋糕(C++)

目录 1465. 切割后面积最大的蛋糕 题目描述&#xff1a; 实现代码与解析&#xff1a; 贪心 原理思路&#xff1a; 1465. 切割后面积最大的蛋糕 题目描述&#xff1a; 矩形蛋糕的高度为 h 且宽度为 w&#xff0c;给你两个整数数组 horizontalCuts 和 verticalCuts&#xff…